MACYS.COM  | UX UI

Findation Integration

findation_01.jpg

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_current.jpg
app_current.jpg

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.

 

View Findation Entry Point Preference Study — June 2019



 

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.

Design Option 1@2x.jpg
Design Option 4@2x.jpg
Design Option 2@2x.jpg
Design Option 3@2x.jpg

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.  

flow@2x.png

 Without clear visual feedback, the user has to click on "Find My Shade" again  to recall the recommended shade.😕

Screen Shot 2020-07-22 at 12.17.15 AM.pn
Screen Shot 2020-07-22 at 12.17.31 AM.pn
Screen Shot 2020-07-22 at 12.17.24 AM.pn
Phone.jpg

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.

Inclusivity.png

Iterations made to update the entry point

findation_final.jpg

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