Case study: Designing an eyewear microsite
For the last two weeks, I worked on my second project for Misk Academy UX course. The project was to create a microsite for an existing brand. The microsite should provide features that solve a persona’s pain point. We were given three personas to choose from. My team went with the “Procrastinator” as we thought it’s an interesting and challenging one.
The user we’re targeting is an adventurous young adult that is interested in networking and sharing stuff on social media and would look for affordable products to stay within his budget.
Calvin Klein closed its high-end line, its CEO mentioned that it’s healthier for the brand in the long run. The company is focusing on serving its main audience; the youth, fulfilling sexy, urban, and trendy images with different products including eyewear. To meet the business and user needs we created an eyewear microsite for CK to deliver its images and continue in its approach, also provide our persona with a good eyewear online shopping experience to enjoy events and adventurous trips wearing one of CK eyewear.
If a procrastinator did online shopping over the microsite we created, he should complete the purchase. We have to find a solution for that. Therefore, we wrote our problem statement to investigate the reason behind it.
Problem Statement:
“ Online shoppers change their decision when they shop online, and they leave products hold in cart.”
Our Approach
Our project plan included 5 main phases:
1.Study Our User:
This phase took the most of our time because we did a survey right after the screener -screener was done through Google form to reach our target users-thinking we’ll have enough data to start with. But looking at the results we realized that we did a mistake as it wasn’t helpful. We needed an interview to observe and gather as much information from the users. So we dropped the survey and started forming interview questions.
We did 35 screeners and conducted 16 phone call interviews for about 8 minutes each.
There were many interesting answers that we grouped in the following affinity map.
Affinity map findings:
- Users seemed uncertain about buying eyewear online because they can’t tell if it’s the right fit for them. Therefore, We’d like to offer them a try-ability feature.
- Controlling the budget is a struggle and a concern that prevents users from continuing to check out from the cart. A suggested feature is allowing users to add their budget limit which will be connected to their cart. The cart will act as a friendly reminder letting them know if they exceeded the budget.
- Sales and discounted coupons drive users to check out from the cart immediately. The website will send users a discounted coupon after a specific time of products being added and left at the cart.
2.Competitor Analysis
Feature Analysis gave us a good idea of how e-commerce websites conduct their business. Based on it, we found that few provide an Augmented Reality (Ar) trying; which are done by the camera, but it takes time, and that may annoy users or made them change their decision in buying. On the website, we added two options of try-ability: Scanning with a camera and uploading an image to be detected with Artificial Intelligence (AI). Through those two methods, users can try eyewear and encouraged to buy it. It gives the user a different experience, a fun one where he can also share his photo wearing the virtual eyewear with his friends over social media. This feature will also serve the business as it’s considered a marketing strategy.
In Leaf Analysis we compared best practices in different businesses and we came up with a feature that would serve the user and provide him with a more personalized shopping experience. Our proposed recommendation system will be also based on user face shape which will be provided through the AR try-ability. Again AI will be used to detect the user's face shape.
Layout analysis made us rethink how we are going to include our feature on the website because more features might get the user lost. Also, we noticed that a lot of categories mislead the user and can take more time for him to reach the desired products. Therefore, the microsite should be user-friendly with a simple layout.
Through Heuristic evaluation we learned best practices to design an e-commerce website.
3.Information Architecture (IA)
Before we draw our site map we did a Card Sorting for 17 users. We did a hybrid card sorting where categories are already listed but letting users add more if they couldn't find a match. Users took time to match products to the “Goggle” category and some didn't understand what Goggle meant. We decided to make it “Sport Goggle” on the website to make it clear.
4.Wireframe
A lo-fi wireframe was done to visualize the website.
After the wireframe we created the user workflow:
And here is where we reached the step in our project where we designed a mockup of our proposed solution. We did it by Figma which we were recently introduced to by our instructors in the course.
Key Features
CK Eyewear microsite key features for a better online shopping experience would be as the following:
- Setting budget limit
- Try eyewear virtually
- know your face shape
- personalized recommendations
- Reminder on carts item with a discounted coupon
5.Mockup Prototype
Finally, we presented our work and we received valuable feedback from our instructors and classmates. We’ll take their feedback into consideration and iterate through our work to improve it.
The points that we’re going to consider in order to enhance the experience for our user:
- Make setting the budget feature emphasized on the homepage and easier for the user to access. Also, make users set a budget number in a more easy and quick way.
- Improve the layout and make it more pleasing to the user, by balancing the design elements.
- Make the AI detects user skin tone. Hence, a more thorough recommendation system.
Thanks to the great team: Ghaidalbakri and Worod Aldmmaeen.
And thank you readers :D
