MACYS.COM | UX UI
Findation Integration
Overview
Findation is a crowd-sourced solution that helps customers find a recommended shade for a foundation/ concealer they are interested in based on the foundation the customer is familiar with. In this project, I lead the design efforts with the integration of the feature on foundation and concealer product detail pages on Macys.com and Macys mobile app.
Prototyping Tools: Adobe XD
Role
As the lead product designer for the lab, I worked closely with the Product Manager and provided all design documentations. I worked closely with our UX Content Writer & Brand Creative Partner, provided prototypes for research, wrote use cases with my Product Manager, provided specs to developers, and was also highly involved with quality assessment processes.
Problem
Desktop & mobile views of Product Detail Pages for foundation
How can we help our customers in finding the foundation shade that best matches them?
Shopping for a new foundation or concealer online can be very difficult. Make up sales (80% of total makes up business) are highly penetrated in stores given the overwhelming number of choices and the uncertainty of finding the shade that best matches the customers' skin tone.
Hypothesis
If we test a 3rd party foundation picker that leverages crowd sourced data to predict a user shade match
then the customers can receive a recommended foundation shade for a new brand they're interested in trying
Resulting in an increased add-to-bag rate and reduced returns.
User Research: Entry Point UI
I worked with our UX Content writer, & Brand Creative Designer to explore options for copy and design. After diverging on solutions, I worked with our UX Researcher to launch a preference study on all options. It was an unmoderated study on Usertesting.com with 20 females.
Design Preference
12 out of 20 of the customers preferred the option 1: abstract schmear.
Customers said that the schmear looks like foundation, it's easier to read, and stands out.
Option 1: Abstract Schmear
Winner
Option 2: Icon
Option 3: Pill
Option 4: Real Schmear
Copy Preference
14 out of 20 customers preferred "Find your color match" as opposed to "Shade Finder".
However, "Shade Finder" scored higher with a total of 8.0 on usefulness of copy and a score of 8.7 on likelihood to use.
With this feedback, our UX writer & Product Manager agreed on a hybrid of both sentiments: "Find My Shade"
Design Iterations
Feedback Adjustment Problem
A big issue we encountered was the lack of visual feedback after Findation provides the recommended shade. We discovered that once the user starts interacting with other color swatches, there is no visual indicator to remind the user of the recommended shade.
Without clear visual feedback, the user has to click on "Find My Shade" again to recall the recommended shade.😕
UI Inclusivity
During the review process, our UX writers called out that the entry point was not representing all skin tone. With this feedback, I readily started creating iterations of the entry point to include all skin tones while also taking into consideration color contrast on the call to action background for accessibility.
Iterations made to update the entry point
Results
We a/b tested product detail pages for foundation and concealer with control & treatment for a 30 day trial and saw positive results in ATB & order conversion on the treatment arm.
Next Steps
A. Scaling feature to all foundation & concealer pages at macys.com
B. Findation integration on Macy's app (ios & android)
Key Learnings
1. 3rd Party Integration Process
2. Working Group & UX Reviews
3. Inclusivity Matters
Throughout this process, my product manager and I were in communication with the Findation team from Australia. It was a learning curve for all of us and is a beneficial process to learn in dealing with future 3rd party integrations.
Looping in all stake holders in this project helped our working group poke holes & address things i didn't catch at first. Many of the ideas on solutioning also came from UX design reviews.
The call to action was initially designed with a focus on color contrast for accessibility and unintentionally, excluded other skin tones. This is another reminder that diversity in teams & having these voices in working groups is important.
Additional Credits
Company: macys.com
Year: 2019—2020
Product Manager: Allison Burns & Audrey Caldwell
UX Researcher: Gargi Godbole
UX Content: Tracy Reppert
Creative: Mark Parra