CK Eyewear Micro-cite
In the second week of the Misk UI and UX course, we were asked to create a micro-cite of one of the brands, while solving a persona pain point during online shopping.
We got to choose one of three personas. After a long discussion, we chose the procrastinator for those reasons:
- We would like to investigate more why he keeps changing his mind?
- We could find a solution to make him convince him to complete the purchase
- We love challenges 😏
Brand selection
Based on our persona who’s: a young adult who prefers affordable online shopping, likes to post on social media, tends to pay extra since he delayed the process of buying as his pain point.
We looked for a brand that is affordable for all incomes and suits young adults. Calvin Kline was chosen since it's a trendy and edgy brand. Our microsite focus on delivering all kinds of eyewear for our persona with a trendy option to fit his personality. But our persona tends to leave the products in the shopping bag without completing the purchase process.
Problem Statement
Online shoppers change their decision when they shop online, and they leave products to hold in the cart.
Project Approach
1- Study User
In this phase we started with studying our users which includes the following:
- Screener: a short survey with questions that help us to find eligible participants to interview
- Interviews: included open questions that allow the participants to tell their stories and pain points, which we will analyze later and find a solution for. We did ask them a couple of questions regarding their shopping online experience and we focused on the eyewear online shopping experience.
We collected a total of 35 screener responses, then we interviewed 16 participants through phone calls in approximately 5 to 8 minutes to investigate more.
- Affinity Map: concluded all the interviews’ responses.
Affinity Map Findings: three different feelings our participants encountered during eyewear online shopping, the uncertainty since they can`t try the eyewear online, worries or concerns regarding their budget, and might be encouraged in case of coupons and sales.
So on our website, we aim to make the user:
- Certain about his decision by allowing trying out
- Have no concern regarding his budget as there is a limit
- Receive special coupons to encourage him to complete the purchase
2- Competitor Analysis
In this phase we analyzed the direct and indirect competitors through methodologies:
- Feature Analysis: we analyzed the features of other competitors in order to highlight their advantages and limitations.
- Leaf Diagram: In the Leaf Diagram, we compared the best practices in the features we want to include in our micro-site. Based on it we included a more personalized recommendation system that depends on the face shape of the user. Also, for the user to complete checking out the system will send him a discounted coupon over the on-hold items, after a duration of them being added to the cart.
- Layout Analysis: Comparing different layouts shows that many categories and sections might get the user lost and affect his experience navigating through the website. Therefore, we’ll direct our users to the service we provide in order to achieve quicker and easier navigation.
- Heuristic Evaluation: By evaluating competitors in the previous diagram, we reached a better understanding of best practices, and how to propose our solution to the user in an efficient way.
3- Information Architecture
Before we start ahead and design the solution we worked on the following steps:
- Card Sorting: In the card sorting we choose the hybrid way, where we allowed users to add categories if they didn’t find a match in the defined category. Users matched almost every product directed to the right category in no time except the Goggle. They didn’t understand the meaning of it, hence we changed it into Sports Goggles on the website to eliminate any confusion.
- Site Map: We made a sitemap that includes the homepage, header, and footer.
- Wireframe: After the sitemap, we developed a better idea of how the website would look like, so we designed a lo-fi wireframe of the main pages.
- Workflow: the step followed was creating the user workflow:
- Mockup Prototype: At this stage, we were ready to design our proposed solution in a form of a prototype mockup. It was done using Figma.
Finally, we are willing to improve our solution in the following areas:
- Enhancing the layout in terms of balancing design.
- Focusing on the website features such as adding budget, and presenting it on the homepage to easily access it.
- Making Artificial intelligence (AI) feature in the virtual trying to detect skin tone, for more personalize and thorough recommendation to the user.
Big thank you to our great team: Lana Khan and Worod Aldmmaeen
Thank you for reading :D
