Coogle
Problem Statement
It’s hard for shoppers to find lipsticks by color while shopping for makeup online.
Concept
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
Duration
My Role
UX Researcher & UX Designer
Three ways of searching for lipsticks by color
1
Select a color family
2
Try on - AR filter
3
Search with a photo
USER RESEARCH
Q1
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.
Q2
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.
GOAL
Dig into people’s habits when it comes to buying makeup online and consumer priorities or pain points when shopping for lipstick.
RESULT
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?
27%
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."
20%
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."
6%
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?
LIKE
31%
22%
18%
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."
Convenience
"It is convenient to ship directly to home."
"Credits, time saving, don’t have to go to the store."
DISLIKE
30%
27%
24%
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."
Q3
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 Sephora.com’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.
PARTICIPANTS
We conducted 10 user sessions with qualified users.
PROCESS
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
RESULT
Searching for products on website - Mac and Sephora
-
Users had a slight preference for Sephora’s approach over Mac’s approach, but 3 out of 10 said there was no difference.
-
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.
-
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.
-
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?
-
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.
-
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
-
-
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?
-
Having something is better than having nothing.
-
Allow users to imagine how the look will be after applying the lipsticks quickly and easily.
Concerns while trying on lipsticks
-
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.
-
Default skin-beautifying filter: It may make their skin tone presented in the app different from their natural skin.
-
Privacy concerns: These apps asked them to authorize photo accessing and camera use.
-
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
-
The icons are hard to recognize
-
Don't like it uses a default skin-beautifying filter when trying on lipstick
-
Inconsistency on features between selfie and upload
-
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
CORE FEATURE 2
CORE FEATURE 3
CORE FEATURE 1
A few of them also used
Before and After
CAN HAVE FEATURE 1
View Product Detail
CAN HAVE FEATURE 2
Adjust Position
CAN HAVE FEATURE 3
IDEATE
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
HOME
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
TRY-ON
Users should be able to:
1. Select colors
2. Adjust color intensity
3. Select finishes
Insights from User Interviews
Annotated Wireframe
Important to provide:
1. product details
2. after-use information (help users feel more confident with purchasing products)
SEARCH RESULT
Search behavior varies by people;
important to support all search behaviors:
1. Browsing
2. Filtering
3. Sorting
Insights from User Interviews
Annotated Wireframe
PRODUCT DETAILS
Photos are important:
1. Lip swatch & arm swatch on different skin tones
2. Lip swatch > Arm swatch
Insights from User Interviews
Annotated Wireframe
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
RESULT FILTER
Good-to-have options:
● Coverage
● Benefits
● Ratings
Insights from User Interviews
Annotated Wireframe
Most important filter options:
● Color family
● Formulation
● Brand
● Finish
● Price
DESIGN
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
EVALUATION
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
TASK 1
Our global search from the search bar was usable for our participants, with all 5 rating the task as ‘easy’.
TASK 2
Search by color was ranked easy by 4 out of 5 users, and in-between by 1 user
SOLUTION
Change the behavior of selection to just one click
PROBLEM
One of the clicks was unnecessary (between selecting the color family and the search results page)
SOLUTION
-
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
PROBLEM
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’
PROBLEM
Controversial filters included: ‘texture’, and ‘coverage’
SOLUTION
-
Cut Texture filter - people don’t know the difference between texture and finish
-
Cut Coverage filter
SOLUTION
Add reviews from our own user base
PROBLEM
All participants said that reviews were important. People wanted reviews with photos, ratings, and text
TASK 3
Try on feature was ranked easy by 4 out of 5 users, and hard by 1 user.
SOLUTION
Rearranged the information architecture and decided to move the product brief information below the color selection.
PROBLEM
Users didn’t know the using sequence is "brand > color" or "color > brand"
TASK 4
Pick color from image and camera was ranked easy by 5 out of 5 users.
SOLUTION
Replace color family with the text “We found them!”
PROBLEM
Users expected to find an exact match for the color, not color family
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).
A
B
C
REASON
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 UserTesting.com - 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
Strengths
-
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
PROBLEM
People unclear if they can use the search bar to search for color
SOLUTION
Change help text to “Type lipsticks name / brand / color”
PROBLEM
Some people didn’t notice when the lip color was changing because the photo was zoomed out too much
SOLUTION
Because zoom-in gesture cannot be set in figma, we zoom in the image for now
PROBLEM
Cannot pick another color on the same photo after she clicks the back button on the search result
SOLUTION
Revise the back button flow to pick color page, not directly back to home page
Final Design
