Encouraging online consumers to make better-informed purchase decisions.
UX/UI Design

MEI is a digital assistant IOS app designed for users to virtually try on makeup trends, find their perfect shades, customize their looks, and shop all at their fingertips. It allows users to feel more confident shopping online in a stress-free environment. It’s like having a personal glam squad in your own pocket!

Desktop - 3.png

PROJECT OVERVIEW
The Kick-Off

Project type:

Timeline:

Role:

Tools:

Academic May-July 2021

8 weeks

UX Researcher, Design Strategy, UX/UI Designer 

Figma, Invision, Photoshop, Illustrator

From May 2021-July 2021, I completed a full-time UX Design Bootcamp with BrainStation to obtain a Diploma in UX Design. During the Bootcamp, I was tasked with completing an 8-week capstone project to create a compelling and practical digital experience. This experience was an end-to-end UX design process that took me from idea generation and research to developing a mobile app interface and brand.

mocku.jpg

My Approach to the Challenge

When approaching this design challenge, I leveraged design thinking methodology to ensure my focus throughout the process was on the people I was designing and creating for. I wanted my project to be economically viable and technologically feasible, but most importantly, I needed it to be desirable and address real human needs.

Group 1714.png

EMPATHIZE

DISCOVERY OF
Problem Space

The project is based on my observations within my immediate circle and my own disappointing experiences shopping for cosmetics online. There’s a clear disconnect between what online retailers offer and what consumers expect. Even the best virtual technologies cannot quite compete with seeing and trying the products on your own skin so I saw many opportunities to fill in those gaps. 

But I didn’t design an app to solve my own problems. Being able to empathize with this problem space and people who encounter similar experiences guided this project and its final form.

Group 358 1.png

DISCOVERY
Why is this important?

People are all ethnically diverse with different skin types, which can be difficult to determine a perfect match online without giving the product a try in real life. This can waste money for consumers who struggle to find the right match and can in turn decrease customer satisfaction. 

Group 355 1.png

PROBLEM SPACE
Secondary Research

Over the last 20 years, shopping has taken a dramatic shift from being mainly done in-store to a more digital format.

E-commerce sales reached an all-time high in May 2020, doubling the sales record in May 2019 with a 110% increase. According to The Guardian, more than 40% of beauty sales will be online in 2021. Due to the increasing spike in online sales, the biggest struggle online cosmetics retailers face is consumers still prefer to test cosmetics in person and are more reluctant to commit on the web. The reason being, product pictures are often misleading since products can react differently to one’s body chemistry which can be difficult for consumers to determine how each color will look on their own skin.

30% 

of online shoppers deliberately over purchase and subsequently return unwanted items.

56% 

of online consumers tend to stick with brands or products they’ve purchased before, rather than trying anything new due to the uncertainties with the products.

46% 

of online consumers report wanting to see and try beauty products in person.

45% 

of online consumers said the presence of virtual try-on facilities (using AI/VR to try out a product online) on an eCommerce site would mean they were more likely to buy.

with this data, i saw opportunities in revolutionizing e-commerce for make up, which lead me to my HMW statement.

DESIGN CHALLENGE

How might we deliver support and expert advice for online consumers in order to encourage them to feel more confident shopping for beauty products online?

PRIMARY RESEARCH
Understanding the User

To understand the “why” behind the problem, I conducted five 30-minute interviews with Canadians between the ages of 18-35 who shop for cosmetics online. I wanted to understand their attitudes and feelings towards online shopping and explore how they currently purchase cosmetics.

After completing the interviews, I combed through the interview notes, classified quotes as pain points, motivations, or behaviors, and used empathy mapping to extract three main themes and insights:

Group.png

TIME EFFICIENCY

Individuals demand simple and easy experiences

Finding the right beauty products can be too time-consuming and inconvenient.

Vector.png

POOR COLOR MATCHING

Individuals want to purchase the right products

Products can look different online vs in real life. People often struggle to find their perfect shade online without trying the products on in person.

Group 1715.png

LACK OF SUPPORT

Increased support leads to more confidence in consumers

Knowing what products are recommended for users can help them feel more confident in their purchase decisions.

KEY INSIGHT: POOR COLOR MATCHING

My interviews revealed there is a significant barrier when people are trying to determine their perfect shades online. Therefore, many people opt for trying and buying the products in-store to avoid purchasing the wrong shades online. With this learning, I chose to leverage color matching as the key insight for my solution.

COMPETITIVE ANALYSIS 
Understanding the Market

Before diving in any further, I stopped and ask myself “There has to be digital solutions out there already, right?” because after all, this is not a new problem. Sure enough, through competitive analysis, I discovered four digital products that addressed the issue of virtual try-on.

 

I researched existing companies that offer virtual color matching technologies such as Sephora, Ilmakiage, L’oréal, and Maybelline. My analysis revealed there were gaps and opportunities across the solutions to develop specific functionalities & features. This indicated there was still an opportunity to carve out a solution within this problem space and differentiate MEI from the rest of the pack.

Desktop - 5.png

Based on these findings, MEI will succeed if it has color matching assistance, product personalization, automatic color matching, and virtual try on technologies.

DEFINE

PERSONA & EXPERIENCE MAPPING
Uncovering the Moment of Opportunity

After synthesizing my interviews into insights and pulling out a key insight to focus on, I developed a persona and experience map to ensure my design process was was anchored by my target users goals and needs in mind. These artifacts helped me:

1

Build empathy for the user by exploring their goals, frustrations, and behaviours.

2

Identify opportunities to intervene with my digital solution.

3

Create an optimal user experience that achieves the user’s goals.

I’d like you to meet Nikita.

 

She prefers to shop online because she’s a busybody but she struggles with finding the right shades online without the support of an in-store beauty expert. Considering this, she has to rely on product pictures to determine if the product is right for her, but there’s a lack of inclusivity in online product pictures which makes it difficult for her to find a shade to match her skin tone.

MacBook - 1.png

Using Nikita, I developed an experience map to help visualize the full end-to-end experience of purchasing cosmetics online. This helped outline the typical interactions and touchpoints of the user and gave me a more comprehensive understanding of the full experience, which can lead to a more human-centric, thoughtful design. As such, I identified an opportunity for digital intervention at the point the user starts looking for more information on colour matching, where there appear to be too many options and a lack of support.

MacBook - 2.png

Having a deeper understanding of my persona, her main pain points, and the areas of opportunity highlighted in the experience map, it was important to revisit my "How Might We" statement and make any necessary revisions to ensure that it still best framed the problem at hand:

REVISED DESIGN CHALLENGE

The previous How Might We statement was slightly too solution-focused in the beginning. That’s always tricky when it comes to human-centered design because it sometimes leaves less space for us as designers to let the users drive the problem space, research, and solutions. Keeping users at the centre of my design, I authored a finalized HMW statement:

How might we deliver guidance for online consumers in order to encourage them to feel more confident purchasing beauty products online?

IDEATE

USER STORIES & TASK FLOW
Creating a Stress-Free Experience

n order to begin brainstorming the functionality and features of my solution, I created several user stories under different epics and initiatives that followed the structure:

"As a user I want action so that I benefit"

Using the experience map and keeping Nikita’s needs in mind, I began generating 30-40 different user stories that were organized into 4 epics – personalized product recommendations, try on products, efficiency of purchase, and comparing different products. The epic I chose to pursue was trying on products as it best represented the needs of Nikita and users like her, and what would be helpful and needed for the minimum viable product solution.

Desktop - 4.png

My interviews revealed that it is especially difficult to colour match face products (foundations, concealers, powder, blush, contour, and highlighter) online. I decided to focus my task flow on finding the perfect foundation shade since all of my interviewees struggled with this.

TASK SELECTION

Finding the user's perfect foundation shade and adding the product to their shopping cart.

USER STORY

As a beauty lover, I want to try on makeup virtually so that I can feel confident about my online purchase.

Group 13.png

PROTOTYPE

SKETCHES & WIREFRAMES
Exploring Solutions

Once I established the task flow I sketched out the various layouts and design elements for each screen. Drawing inspiration from other existing UI components on Dribbble and looking at features from competitor apps like Sephora, Makeup365, and Airbrush. I started brainstorming and ran many crazy eight exercises to generate design ideas. Eventually, I landed on an idea that draws inspiration from Instagram and Snapchat filters since they’re all the hype right now. Below are my top sketches that were translated to wireframes.

App Idea: An IOS app that acts as a pocket glam squad, making it simple and easy for users to try on cosmetic products. 

Group 1716.png

Once I felt I had a good hold on design elements I took my paper design into Figma and translated them into my version 1 of mid-fi wireframes.

Group 311_2x.png

TEST

USABILITY TESTING (2 ROUNDS)
Gathering Feedback

During the wireframing process, I conducted usability tests on ten different individuals to obtain practical, real-time feedback that was incorporated to improve the design and deliver a more frictionless user experience. To bring clarity and consistency to my testing I devised a Testing Plan outlining the steps to validate my design assumptions and smoothness of the overall flow. I conducted 2 rounds of user testing with 5 new participants within the target audience (real-life Nikitas) in each round to see if the app’s functions and features helped the user achieve their goals.

USABILITY TEST OBJECTIVES

  • Gather honest feedback in real-time

  • Reveal friction points in the task flow

  • Uncover gaps in the experience

  • Discover actionable findings that can help improve the design

EVALUATION TASKS

​The tasks the testers were asked to complete over the two rounds include, with the core tasks being Task 4 and Task 5:

  • Task 1: Try on makeup filters

  • Task 2: Complete facial analysis

  • Task 3: Search for makeup filters

  • Task 4: Search for products used in the filter

  • Task 5: Find your perfect foundation shade

  • Task 6: Add foundation product to cart

USABILITY TESTING
Round One Insights

Testing with users provided an immense amount of insights into my initial prototype - I saw that 3/5 testers failed one of the core tasks that they were asked to do. I tracked these errors on a table to see exactly which tasks needed to be revised based on their remarks

Task 1: Try on makeup filters

  • No major issues were detected. Users were able to recognize the button right away.

Task 3: Search for makeup filters

  • The line (showing before & after) was confusing, some user testers didn’t know what it was for

  • Some icons were not recognizable to the users

Task 5: Find your perfect foundation shade

  • 3/5 user testers did not know what the preselected shade/color was

Task 2: Complete facial analysis

  • Users had a hard time understanding what the facial analysis was for.

  • There was no clear indication to suggest the completion of the task

Task 4: Search for products used in the filter

  • The text was too small for the reader to read

  • A user tester suggested replacing the price with the shade because that’s what I wanted my app to focus on

Task 6: Add foundation product to cart

  • No major issues were detected

Screen Shot 2021-09-03 at 4.52 1.png

I then used a design prioritization matrix to determine which changes were the highest priority

round 1.png

USABILITY TESTING
Round One Changes

Some of the key things I changed and added to my second prototype version was:

  • Included an accessibility option (similar to Apple’s Face ID) for people with constraints

  • Adding a helpful wizard for the facial analysis

  • Included a progress bar to let the users know when they’re close to completion

  • Included a completion indication letting the user know the scan has been completed

  • Removed and changed some icons

Major Change #1: Facial Analysis Screen

Opening up the app to this screen, testers were not informed of the purpose of the facial analysis scan nor were they informed of the progress.

Group 1719.png

Major Change #2: Makeup Cam Screen

The makeup cam screen was confusing to users for many reasons: 1) testers didn't know what the edit button was for, 2) testers were confused with the some of the icons, 3) the purpose of the "see products" button was not clear

Group 1720.png

The "edit" button and "see products" button now shows up after the user has selected a filter to suggest that the actions apply to the filters selected

I removed the favourites button as it's not an essential component to the task flow

Major Change #3: See Products Screen

On this screen, users were could not read the descriptions of the products 

Group 1721.png

Major Change #4: Product Description Screen

On this screen, users were not immediately clear about their pre-selected shades & colors

Group 1722.png

USABILITY TESTING
Round Two Insights

After testing with 5 new users on my revised prototype, I saw much better results the second time around. All of the tasks were completed successfully by all 5 testers, however, there was still some areas for improvement. I tracked these new user testing findings on a table and sorted them in a design prioritization map once again:

Task 1: Try on makeup filters

  • No major issues were detected.

Task 3: Search for makeup filters

  • Some icons were not recognizable to the users

Task 5: Find your perfect foundation shade

  • User tester knew what the preselected shade/color was

  • Icons were not familiar to the users

Task 2: Complete facial analysis

  • Users needed a clear indication for completion

Task 4: Search for products used in the filter

  • Wording suggestion: from “see products” to “see products used in filter”

  • Include a see recommended products section for personalized shopping

Task 6: Add foundation product to cart

  • No major issues were detected

Screen Shot 2021-09-03 at 4.52 2.png
Group 1723.png

USABILITY TESTING
Round Two Changes

Some of the key things I changed and added to my third prototype version was:

  • Included a "recommended products" category for a more personalized experience

  • Changed some icons that were not familiar to the users

  • Included a checkmark to let the users know they've completed the facial analysis proces 

Major Change #1: Facial Analysis Screen

Testers weren't sure if the facial analysis scanning was complete

Group 1730.png

Major Change #2: Makeup Cam Screen

The icons and wording were confusing the testers

Group 1728.png

Major Change #3: See Products Screen

Users wanted to see recommended products to recieve a more personalized shopping experience

Group 1729.png

Major Change #4: Product Description Screen

The icons were not familiar to the users

Group 1731.png

DESIGN

VISUAL IDENTITY: JOURNEY TO HI-FIDELITY
Injecting Life into Design

After the mid-fi grayscale prototype has been tested twice and gone through 3 iterations, it was time to inject some life into it through user interface design.

To establish my products’ brand, I began writing a list of keywords that embody the brand’s essence and define the personality of the product.

 

power 1.png

EMPOWERED

CONFIDENCE

FREEDOM

noun_Thinking_3482689 1.png

CALMING
PEACEFUL
SOPHISTICATION

noun_hi five_4095342 1.png

FRIENDLY

SIMPLE

CLARITY

Using these keywords, I searched for inspiration and created a visual identity mood board using inVision to find a colour palette, and typography system that evoked a simple, modern, and innovative feeling. 

Screen Shot 2021-06-24 at 5.05 1.png

PRIMARY COLORS

Group 355.png

FUNCTIONAL COLORS

Group 355.png

PRIMARY TYPEFACE

Group 1732.png

Accessibility & WCAG compliance

Accessibility is incredibly important to my brand and to me. To ensure my design visually accommodated a diverse set of users, I made sure that the text colors complied with WCAG triple A standards when they were placed upon background colors other than pure white or black.

Group 1733.png

Wordmark Exploration

When exploring an app name and icon, I wanted to create something unique and memorable to encourage easier word-of-mouth. Using concepts and words surrounding beauty, makeup, and empowerment, I generated a list of potential brand names to test on users: Aphordite, Jolie, Venus, Aura, and Mei. Mei resonated the best with users, evoking a modern feel while also signifying the purpose of the app. After numerous iterations, I landed on the final wordmark you see below.

“MEI” is derived from the Chinese character beautiful, so I wanted to incorporate the character into my icon design to create a distinct wordmark.

MEI.png

Primary wordmark

Group 1707.png

App/social icon

HIGH-FIDELITY PROTOTYPE
Enhancing the User Experience

Injecting my brand’s visual identity into my prototype was a challenge that I didn’t anticipate. Properly balancing out the colour ratios, establishing a type hierarchy that works on mobile and is accessible, and designing a unique identity required many tries and rounds of testing.

After countless hours using the Figma mirror app, screen recording, and getting feedback, I created my final UI prototype and developed an accompanying UI library that uses Brad’s Frost Atomic design system. I began my approach starting with atoms then molecules then started combining those elements to create larger organisms. I made sure to create templates to ease the job of building multiple screens individually and redlined everything when possible.

gif for mei.gif

HIGH-FIDELITY PROTOTYPE
Interactive Design

Looking at the high-fidelity prototype, we can see the four main benefits that MEI offers:

Feature 1:

 

The makeup cam allows users to apply makeup filters and see cosmetic products on their own skin without a store visit. The AI facial analysis will map out the user's facial structure and detect their skin tone to find products that perfectly match them

feature1.gif

Feature 2:

 

Users can choose from multiple categories of filters, from everyday makeup looks to party-themed looks, everyone is guaranteed to find a makeup style for any occasion.

feature 2.gif

Feature 3:

 

When a filter is selected, the user can see the makeup on themselves right away with their perfect shades already preselected for them.

 

Users can view the before and after, edit the filters to customize the makeup or try on different products.

feature 3.gif

Feature 4:

 

Users can view all the products used in the makeup filters and efficiently purchase cosmetic products that perfectly match their skin tone to accommodate their busy schedules

feature 4.gif

EXPANDING THE BRAND

TAKING MEI TO MARKET
Building a Marketing Website

To launch MEI in the market and to communicate the key value proposition of MEI to potential users, I created a responsive marketing website for desktop and mobile. I started out with UI inspiration, created sketches, designed multiple rounds of low to mid-fidelity wireframes, conducted user testing, and then applied my brand’s visual identity to create a high-fidelity interactive site.

 

The marketing site aims to 1) Inform, 2) build trust, and 3) promote the product. Users typically go to a company’s website in the interest and consideration phases of their consumer decision-making process, so MEI’s websites provides users with information that aids their decision-making and pushes them to convert.

mockup.png

Desktop Process

1.  Decide the function area. 

2.  Roughly layout content and image in each functional area. 

3. Create copy in the different hierarchies to balance the screen.

4. Refine the layout and create illustrations with brand color.   

1.

960px+.png

2.

960px+-1.png

3.

MID-FI.png

4.

HI-FI.png

Desktop to Mobile Transition Process

1.  Decide the function area. 

2.  Roughly layout content and image in each functional area. 

3. Create copy in the different hierarchies to balance the screen.

4. Refine the layout and create illustrations with brand color.   

1.

320px+.png

2.

320px+-1.png

3.

HI-FI APP-1.png
HI-FI APP.png
laptop mockup.png
phone mockup.png

4.

EXPANDING ACROSS PLATFORMS
MEI on an iPad

As another means of concept exploration, I envisioned what MEI would look like on a tablet device. For the most part, all the elements are pretty buildable from mobile to tablet, and the user is able to get a larger image of the makeup filters. Tablets generally come with a stand or a case that would allow the user even more ease when using the app.

Group 354.png

NEXT STEPS

LOOKING INTO THE FUTURE
What's Next for MEI

Ideally, MEI, in its completion, will be a pocket glam squad. In the future, I will need to revisit and explore more user stories and epics under different initiatives like virtual assistance to build a more holistic digital solution. When considering the order of rolling out new features and functionality, I will conduct user testing to determine the value-effort trade off and understand priority levels.

KEY PROJECT LEARNINGS
About Me

Group-3.png

Design doesn’t have to be perfect

In the past, I have been notorious for focusing too much on details. The quick-moving nature of this process helped me overcome my fear of showing my work in progress and pushed me to use my time more effectively. Instead of focusing hours on details for them to be scrapped by the first round of testing, I learned that sometimes, it is important to complete what is necessary to move forward and go back after to refine details.

Group 1734.png

I'm not afraid of taking risks

Not knowing much about the cosmetic industry made it a very daunting challenge to face; however, the amount of learning I knew I had to do when approaching the challenge excited me. Stepping out of my comfort zone and using this low-risk opportunity to explore a concept and space that I had no knowledge of was eye-opening, rewarding, and was a unique experience to be learning about the cosmetic indutry in parallel with my users.

KEY PROJECT LEARNINGS
About Design

Group 1735.png

User Testing:

 

During this process, I found that user testing was where I got the most insight into design solutions. The value of getting real-time feedback on a product and being able to observe the full user flow really helps garner a better understanding of the potential users you are looking to help.

Group.png

Always be digging deeper

 

Throughout this process, I learned why “why” holds so much importance in UX. The way I asked and framed questions guided how the interviewees responded. I learned to refine and revise interview questions to be more open-ended and constantly follow up each question with a “why”. By actively listening, reducing my own amount of talking, and avoiding using misleading questions, I was able to get unbiased, authentic, and open answers.

Group-2.png

"Design don't decorate"

 

I found this a very useful moniker when designing this project. This reminded me to justify any design decisions with my research findings. It was often very tempting to add certain elements, but keeping the pain points and motivations of the user in mind helped me maintain a solution-based focus.

Group-1.png

The process is not linear

 

Design is not a linear process. While constraints such as time and resources were pushing me to keep moving forward, I learned to not be afraid to revisit and change work completed earlier in the process. Prior to this experience, I was hesitant to make changes to the work I did early on in the process because I didn’t want to move backward and commit more time to something that was “finished”. By forcing myself to revisit earlier parts of the process and analyze whether they still aligned with the user, I was able to create a more cohesive user narrative and build a better solution.

01.png

PEAKED YOUR INTEREST?
Explore Other Projects

mei mockupppp.png
coppafeel thumbnail.png

AR-focused mobile app for an educational charity to improve their mobile experience and optimize their global reach.

The Self-Checkout tool allows users to learn more about breast awareness in hopes of reducing late state cancer diagnosis.

google mockup.png

Collaborated with data scientists and web developers in a 24-hour hackathon challenge to create an innovative solution that explores data security.

Rookie is an education tool designed to engage in real-time interactions through Google Chrome to improve user privacy through data education.