Affinity Diagram (Summary)
Project Overview
The project focuses on identifying the emerging trends of the fast-changing makeup community.
It also provides some new creatives and user experience enhancements for the application of virtual try-on and AI in the apparel retail space to create a more personalized experience.
Tools
Miro
Figma/FigJam
Google Drive
Photoshop
Procreate
My Role
UX research
UX design
UI design
Timeline
Overall: 4 weeks
Discovery & Research: 2+ weeks
Design & testing: 2 weeks
The Problem
Online makeup shoppers are hesitant to make decisions when buying products because they are unsure of how the product will look on their skin tone and skin type.
The Solution
To develop an app that uses AI and AR technology to help the shopper make confident decisions and lessen the cognitive load when shopping for makeup online that suits her skin tone and type.
My Design Process
Research
Interviews
During the ideation phase of the project, 5 user interviews were conducted with makeup users (aged 20–40) to match the proto-persona created.
Together, the team and I wrote a script for an interview with 21 open-ended questions about the values, motivations, and daily makeup routines of our target audience. In 4 days, I recruited and interviewed 5 users remotely. The user insights are summarized using an affinity diagram.
User insights from user Interviews
Survey Findings
Surveys
After the project kickoff, we defined our research strategy and objectives. In order to collect quantitative data about user pain points and potential product features to better understand users' makeup habits and behaviors.
We built an online survey with 16 questions (including open-ended, multiple-choice, and ordinal scale questions) and shared it in the makeup communities. In just a few days, we received over 40 submissions. Based on these, we identified 5 common pain points, which led us to the next step.
Discover
User Persona
User Personas
We wanted to form a deeper understanding of our users' make upgoals, needs, experiences, and behaviors. So, we created an user persona address the most common pain points mentioned in user research. We kept updating them throughout the project as we gathered more data. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas.
Competitor Analysis (Beauty apps with try-on)
Competitor Analysis
With Kirsten as our user persona, we decided to do a analysis of the beauty brands and apps that she would use for makeup and cosmetics.
These apps mostly focus on single brand products and lack the elements of a personalized shopping experience. This suggests there is a gap for an integrated try-on database that includes different brands.
Besides, most brands and ecommerce apps do not address the importance of integrating a look try-on feature to promote the products and give beginners a more thorough and easier experience.
Ideation
Ideation Brainstorming
Based on the opportunities identified in the customer journey map and the synthesized user insights, the insights are categorized into different categories using different key words according to how often they are mentioned by users. The insights were then translated into specific features.
Insights Sorting
In addition, we used the "I like, I wish, what if" ideation method to come up with more features for the app. With the user insights in mind, it helped us to brainstorm in the right direction while keeping the scope of user needs in mind.
The cards with the most votes were then put into the matrix to be reevaluated based on impact and complexity.
Feature Prioritization Matrix
Feature Prioritization Matrix
Finally, the ones with low complexity and high impact are carried on to the next stage of design. This new feature structure is extremely helpful to prevent us from slipping into scope creep.
User Flow (Based on 6 Features/Taks)
After defining the features, we mapped out the on boarding process and divided the 6 features, and mapped out the flow for each task/feature separately, so it was clear to see the steps users take to use each feature.
User flow for each Task
Integrated User Flow
We further integrated the flows of all the features, so we could delete and combine some of the repetitive steps in the process, so we could identify the shortcuts and also narrow down the screens for prototyping.
Integrated User Flow
Sketches
The sketches were based on the features we decided on in the feature prioritization matrix and the features we identified as value creators in the product value proposition canvas. As also shown on my the user flow diagram, the essentials are Virtual TRY-ON, shopping, trends, personalized quiz, and detailed product info.
-
-
-
-
Initial Sketches
-
-
Design
Wireframes
Using Figma, the sketches were translated into low-fidelity wireframes. However, in our lo-fi testing, we soon discovered some of the screens were repetitive, and there were some functional issues. Besides, the information architecture on some screens does not follow the same logic since they were designed by different team members.
Based on the lo-fi testing results, we discussed the main navigation structure and reiterated the user flow to decide what to include in each navigation item.
As the lead designer, I made a new version in mid-fi wireframes (see the mid-fi prototype demo gif below) to make the logic and information structure flow better as well as eliminate some functional issues.
-
Lo-Fi Wireframe (AR Try-on)
-
Lo-Fi Wireframe (Quiz)
-
Lo-Fi Wireframe (Shopping)
-
Lo-Fi Wirefram (Trendy Look)
-
Mid-fi Prototype Demo
Testing
Usability Testing
After testing the mid-fi prototype with 5 users, I created a fully-functional, high-fidelity prototype of the new flows. Overall, we did 5 user tests for each version of lo-fi, mid-fi and hi-fi prototype.
01 Home page iterations
During testing, users pointed out that the "CTA" on the home page is not prominent and the icons are too bold, so we made some iterations as shown below.
02 Product page iterations
The user feedback reported the information is too packed on the product page, the layout is too busy. Thus, we broke down the information and kept it light on each page with consistent visuals and buttons as below.
01. Home page Iterations
02. Product page iterations
Mood board
UI Design
After A/B testing and the usability issues were resolved, we moved on to design the final screens with the visuals that users liked.
My goal was to create a visual identity that’s aligned with the brand’s values and message, which are “delicate, luxurious, colorful, and fun." As a result, we chose a color scheme that emphasized purple and beige.
Then we developed a UI style guide that included the layout grid, typography, etc. to keep our designs consistent. Some components were also created along the way.
UI Style Guide
Hi-Fi Prototype Demo
Next steps
Being a 4-week project, it is a prototype that covers some of the important features that fulfill users' needs and identify a gap in the retail makeup space. However, future iterations such as the following can be done.
01
We found 'social interaction' as one of the important factors in our user research. A 'community' feature can be further developed to allow user interactions.
02
To enable smooth user interactions, many of the features in the app involve building a large product database and acquiring AR/AI technical knowledge. We can also explore more in the future.
03
The KPIs of this app include conversion, customer retention, and customer satisfaction. So, the designs can be scaled up or down to work well with loyalty or marketing programs for retail brands.
Learnings
What new hard skill, soft skill, trick, or tool did you learn throughout the project? Was there any design practice you’ve tried for the first time? How did this project contribute to your growth as a designer? Did you have any preconceptions that were crushed? What did you learn throughout this project that’s influencing the way you design?
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.