top of page


Problem Statement

It’s hard for shoppers to find lipsticks by color while shopping for makeup online.


A lipstick search engine to help people who are looking for a fun and effective way to find their desired lipsticks by color from a wide range of brands.

Project type

5 members' team project

4 months


My Role

UX Researcher & UX Designer

Three ways of searching for lipsticks by color


Select a color family


Try on - AR filter


Search with a photo



Our first phase of research was to support the designers in transitioning from the annotated wireframes to designing the wireframes that would become our mid-fi prototype. The goal of our initial research plan was to support the designers in finding a place to start.

Who are our competitors and how do they meet people’s search needs for lipstick?

we conducted a Competitive Analysis of 22 apps and websites to learn about how our competitors executed core functions of our app.

Search Results & Product Page

Search Filtering & Sorting

Color Picker

Filter / Try On

We were especially inspired by YouCam Makeup, Chanel, Sephora, MakeupPlus, aspects of Google Shopping and aspects of Pinterest. This process created a survey of the landscape of design patterns, features, and a working understanding of how our competitors were similar and different from each other.


What sort of behaviors do our target users engage in with these existing products to meet their needs while shopping for lipstick?

We created a Survey and distributed it via personal social media.


Dig into people’s habits when it comes to buying makeup online and consumer priorities or pain points when shopping for lipstick.


We had 85 respondents to our survey. 95% of qualified respondents identified as women, 2.5% identified as men, 2.5% identified as transgender or nonbinary. 47% identified as Asian or Pacific Islander, 35% as white, 14% as Hispanic or Latino, 4% as African American or Black.

R1. How do you usually shop for lipsticks?

Preferring purchase lipsticks In-store because

"Want to actually see what the product looks like before buying"

"Can try on makeup in-person"

"No need to wait for delivery"

R2. To purchase lipsticks, are there any barriers or problems you currently experience searching by color?


Uncertainty whether the color would work on the person

"Hard to tell if it’s good on my skin tone."

"A shade can look completely different from person to person, skin shade to skin shade, a greater variety of models would help me decide on, purchase, and search for specific colors better."


Difficulty telling the true color of the lipstick

"I can't really see how the color looks until I buy it and use it."

"Sometimes photos online can't show what the color actually looks like in reality."


Uncertainty whether the texture/finish would work on the person

"Not sure if the color or texture fits me well."

"Lipsticks have so many different “finishes.” It’s sometimes hard to tell how matte, opaque, or sheer a lipstick will be, which can drastically change how the color appears on someone’s lips."

Q3. What do you like and dislike bout buying lipsticks online?





Cheaper price – e.g., promotions, discounts

"There are always discounts compared to shopping in person."

A wider selection of brands and colors

"Being able to see all the color options."

"I’ll purchase it online if it’s a brand that can’t be found in stores near me."


"It is convenient to ship directly to home."

"Credits, time saving, don’t have to go to the store."





Uncertainty whether the color would work on the person

"You have no idea what it will look or feel like on your own lips."

"I’m worried that it wouldn't match my skin tone."

Inability to try it on the person’s own skin

"I can't do a color test on my skin."

"I can't see the color or test it against my skin tone."

Difficulty telling the true color of the lipstick

"Sometimes the swatches aren't true to color."

"Color might be different in real life."


What can we observe from user behavior on competitor products that can help us to build our product?

We conducted a Usability Test on both’s search results page and product page and a mainstream brand-specific website (Mac Cosmetics) for our User Interview Sessions. For the AR try-on features in our app, we chose makeup Plus and YouCam makeup app according to the competitive analysis results to test how users would use these makeup apps to try on lipsticks virtually.


We conducted 10 user sessions with qualified users.


We asked users to finish two tasks based on any criteria and take as long as they needed. Asking them to think aloud when doing the tasks.

Find a lipstick on Mac and Sephora that appealed to them, based on any criteria.

Task 1

Use one of two makeup try on apps (makeup Plus and YouCam makeup) and reflect on their impressions.

Task 2


Searching for products on website - Mac and Sephora

  1. Users had a slight preference for Sephora’s approach over Mac’s approach, but 3 out of 10 said there was no difference.

  2. Photos: Users were most focused on lip swatches and arm swatches - photos that integrate the lip color with a skin tone to contextualize it. The number of photos available also played a role.

  3. Extended Product Information: All users opened up the extended product information before they selected the lip color they wanted. Photos - specifically lip swatches - were the most referenced part of the extended product information.

  4. Reviews were polarizing UI features, with some people discounting negative or positive reviews due to skin tone, the personal nature of makeup, preferred aesthetic or style of makeup.

AR makeup try-on filter - YouCam Makeup and Makeup Plus apps

How did this experience make users feel like they were trying on real lipsticks?

  1. Preferred the Selfie Try-On path to the photo-uploading path because the latter was more like a photo editing app than a try-on app.

  2. The reasons participants didn’t feel like they were trying on real lipsticks are:

    • ​Feel doubtful about the effect

    • The default "skin-beautifying" filter

    • Need more information about after use

    • Need a slider to adjust the intensity of color

  3. The average rating of willingness to use this tool before buying was 4.45 of 5.

Does a makeup try-on app make them feel more confident in buying that lipstick?

  1. Having something is better than having nothing.

  2. Allow users to imagine how the look will be after applying the lipsticks quickly and easily.

Concerns while trying on lipsticks

  1. AR filter effect: Wondered how the effect mimicked the look when applying physical lipsticks in person and were doubtful whether trying on the environment and device would influence the filter effect.

  2. Default skin-beautifying filter: It may make their skin tone presented in the app different from their natural skin.

  3. Privacy concerns: These apps asked them to authorize photo accessing and camera use.

  4. Lipstick product details: For example, the longevity of lipstick or if it is waterproof, was also a necessary process to go through.

Comments or suggestions about how that went for users

  1. The icons are hard to recognize

  2. Don't like it uses a default skin-beautifying filter when trying on lipstick

  3. Inconsistency on features between selfie and upload

  4. Does not well-represent the finish of lipsticks

Behavior with AR makeup try-on filter

Actions with order

Selected the Lipstick Finish Style

Adjusted the Color Intensity

Selected the Lipstick Color




A few of them also used

Before and After


View Product Detail


Adjust Position


Competitive Analysis
User Research
User Session


Based on our findings from our user survey, competitive analyses, and user interviews, we decided to move forward with our initial concept of a lipstick search engine. In our product, we decided to include Three Main Features which allow users to:

Search Lipsticks by

Color Families

Most common and useful features for searching lipsticks. By showing color families, users don't need to recognize the color name but categorize color with visuals.

Try lipsticks on with

AR Try-on Filter

Users were highly likely to use a try-on feature so that they could feel more confident purchasing lip products online.

Search Lipsticks by Colors Picked from a User-provided Photo.

We wanted to serve the needs that are yet to be fulfilled in the current market and were hoping to provide our users with access to a wider range of brands in our product.

Site Navigation

The detailed site navigation defines the main pages/key components/general component/ important but outside scope. It showed the whole scope without too many details, while the detailed site navigation shows every step and also the connections of each page/process.

First Wireframe


Organized three search paths from the most familiar to the least:

1.Search by Color

2.Try On

3.Pick Color

Insights from User Interviews

Annotated Wireframe


Users should be able to:

1. Select colors

2. Adjust color intensity

3. Select finishes

Insights from User Interviews

Annotated Wireframe

Try On-Camera.jpg

Important to provide:

1. product details

2. after-use information (help users feel more confident with purchasing products)


Search behavior varies by people;

important to support all search behaviors:

1. Browsing

2. Filtering

3. Sorting

Insights from User Interviews

Search Result.jpg

Annotated Wireframe


Photos are important:

1. Lip swatch & arm swatch on different skin tones

2. Lip swatch > Arm swatch

Insights from User Interviews

Annotated Wireframe

Search Result_Product details.jpg

People are concerned how the lipstick color would look on their own skin; important to see the product on a similar skin tone to theirs


Good-to-have options:

● Coverage

● Benefits

● Ratings

Insights from User Interviews

Search Result_Filter.jpg

Annotated Wireframe

Most important filter options:

● Color family

● Formulation

● Brand

● Finish

● Price

Site Navi
First wireframe


We discussed our style tile based on Mood Board. Our decision to employ beige as our brand color was mainly due to that the color can evoke a mood and aesthetics that is luxury and elegant, yet simple and neutral. We believe that the color’s unimposing nature will work well for our product where its majority of space will be dedicated to images such as lip product photos and color swatches, which can be quite colorful.

Through our visual design, we want our product to convey the image of being polished, inclusive, and expensive. We are aiming to achieve this goal by applying the beige-based color scheme, which suggests a sense of luxury and elegance as described in the previous section, along with the employment of the Playfair Display typeface.

Mid-Fidelity Prototype for Testing 

Screen Shot 2022-09-05 at
Mood Board
Style Tile


After our initial round of testing in the exploratory phase, we then shifted to usability testing our own design.
We did this in 2 waves: 

Moderated Usability Testing &
A/B Testing

Mid-Fidelity Prototype

Moderated Usability Testing &
Unmoderated Usability Testing

High-Fidelity Prototype

Prototype Version: Mid-Fidelity

1. Moderated Usability Testing & A/B Testing


Our global search from the search bar was usable for our participants, with all 5 rating the task as ‘easy’.


Search by color was ranked easy by 4 out of 5 users, and in-between by 1 user

Color Family.jpg


Change the behavior of selection to just one click


One of the clicks was unnecessary (between selecting the color family and the search results page)

Color Family.jpg
Search Result_Sort.jpg
Search Result_Filter.jpg
Search Result_Product details.jpg


  • Replace sorting by ‘recommended’ with sorting by ‘relevance’

  • Following standard patterns, change default sort from ‘new’ to ‘relevance’. Add ‘best selling’ as a sort item


Most participants didn’t understand what ‘recommended’ was, and were curious as to who was recommending this product order. Participants preferred to sort by ‘relevance’

Search Result - SORT.jpg


Controversial filters included: ‘texture’, and ‘coverage’


  • Cut Texture filter - people don’t know the difference between texture and finish

  • Cut Coverage filter

Search Result - FILTER.jpg


Add reviews from our own user base


All participants said that reviews were important. People wanted reviews with photos, ratings, and text

Search Result_Product details_+ Reviews.jpg


Try on feature was ranked easy by 4 out of 5 users, and hard by 1 user.

Try On-Camera.jpg


Rearranged the information architecture and decided to move the product brief information below the color selection.


Users didn’t know the using sequence is "brand > color" or "color > brand"

Try On-Camera_cream1.jpg


Pick color from image and camera was ranked easy by 5 out of 5 users.

Search Result.jpg


Replace color family with the text “We found them!”


Users expected to find an exact match for the color, not color family

Search Result- color picker.jpg

A/B Test  - Purchase Option

This A/B/C test showed an option to buy from Sephora, an option to buy from the brand’s website, and an option to price compare from multiple retailers. All users preferred to compare from multiple retailers (C).








Users enjoyed the option to go with their favorite retailer, find the deepest discount, membership, free shipping.

Prototype Version: High-Fidelity

2. Moderated Usability Testing & Unmoderated Usability Testing

Purpose of Moderated Usability Testing

  • Getting feedback on our prototype as a believable, stand alone product

  • Identifying flow problems

    • Mixed reactions on color family pop up

    • Designing for better error recover: People are sometimes confused by what happens when they hit the ‘back’ button in various places

  • Getting feedback on review content

  • Tracking how people access reviews

  • Reviewing a flow for account creation

Purpose of Unmoderated Usability Testing

  • Unmoderated Usability Test with Hi-Fi on - getting feedback from strangers!

  • Checking time on task

  • Figuring out problems with flow and error recovery

  • Getting feedback on expectations and delighters

  • Feature discoverability

  • Net Promoter Score of 50% - 3 passives, 3 promoters


  • Domain is FUN!

  • Extended product page: reviews are good.

  • Aesthetic: multiple users loved our color palette/font choice (described as: calming, chic, fun, professional, basic, clean).

  • All in all, users understood what the features were and why someone would use it ; they "get" our app

  • Users tried to click on 'pinks' and 'nudes' and 'dare to wear' (they thought our app really worked and were choosing color families they were interested in.).

Problem Area

Try On-image_cream1-1.jpg


People unclear if they can use the search bar to search for color


Change help text to “Type lipsticks name / brand / color”



Some people didn’t notice when the lip color was changing because the photo was zoomed out too much


Because zoom-in gesture cannot be set in figma, we zoom in the image for now

Try On-image_cream1.jpg
Search Result- color picker.jpg


Cannot pick another color on the same photo after she clicks the back button on the search result


Revise the back button flow to pick color page, not directly back to home page

Color Picker-SelectPhoto_3.jpg

Final Design

Test I
Test II
Final Design
Pink Cream


Consideration for Innovative Application
For all of us, this is our first time designing a product with an AR filter camera. It pushed us to think deeply about how the new feature will apply to the user flows, interactions, and even the logic behind them. Also, it’s challenging for us to make wireframe or Hi-fi design on camera pages since there are not many existing examples.
Besides, because of the large user group, for the interactions inside the new functionality, we still made more conservative choices to choose those that fit better with users' existing mental models.

Learning from user interviews & team members
Since we really did a lot of work: An user survey ( it’s also our screening survey), previous user interviews for user behaviors on APPs, 3 rounds of moderated user interviews(one of the interviews included an A/B testing), 2 rounds or unmoderated user interviews. We obtained so many insights and ideas from each round of testing. Since there is no existing similar APP as ours, we sometimes had lots of discussions or arguments in order to just come up with a solution to one specific problem. Although meetings always drain our brains, we can always see and learn different perspectives from others. The memories we discussed together are really precious for all of us. And, the feeling of collaboration in our team is amazing.

More Projects 

bottom of page