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!
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.
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.
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.
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.
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:
TIME EFFICIENCY
Individuals demand simple and easy experiences
Finding the right beauty products can be too time-consuming and inconvenient.
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.
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.
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.
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.
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.
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.
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.
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.
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
I then used a design prioritization matrix to determine which changes were the highest priority
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.
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
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
Major Change #4: Product Description Screen
On this screen, users were not immediately clear about their pre-selected shades & colors
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
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
Major Change #2: Makeup Cam Screen
The icons and wording were confusing the testers
Major Change #3: See Products Screen
Users wanted to see recommended products to recieve a more personalized shopping experience
Major Change #4: Product Description Screen
The icons were not familiar to the users
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.
EMPOWERED
CONFIDENCE
FREEDOM
CALMING
PEACEFUL
SOPHISTICATION
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.
PRIMARY COLORS
FUNCTIONAL COLORS
PRIMARY TYPEFACE
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.
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.
Primary wordmark
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.
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
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 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 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
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.
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.
2.
3.
4.
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.
2.
3.
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.
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
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.
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
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.
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.
"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.
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.
PEAKED YOUR INTEREST?
Explore Other Projects
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.
