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
Mobile App Design: ShadeOn

Affinity Diagram (Summary)

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.

Mobile App Design: ShadeOn

User insights from user Interviews

Mobile App Design: ShadeOn

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
Mobile App Design: ShadeOn

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.

Mobile App Design: ShadeOn

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.

Mobile App Design: ShadeOn

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.

Mobile App Design: ShadeOn

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.

Mobile App Design: ShadeOn

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.

Mobile App Design: ShadeOn

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.

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.

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.

Mobile App Design: ShadeOn

01. Home page Iterations

Mobile App Design: ShadeOn

02. Product page iterations

Mobile App Design: ShadeOn

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.

Mobile App Design: ShadeOn

UI Style Guide

Hi-Fi Prototype Demo

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.