Color Lab for the FIGS Mobile App
Revisiting the designs of the Color Lab on the mobile app to increase shopability and drive users to act on their color selection with a product purchase.
Role
Lead UI / UX designer
Touchpoints
FIGS Mobile App
Timeline
2 months
The Problem
The current shipped version of Color Lab on the FIGS Mobile App only allowed users to compare colors within a specific color family: Blues against Blues, Reds against Reds, and so on, and had limited shopability throughout the experience, contributing to a dead end. What’s more, as shown, if a color name or badging did not fit within the dropdown container, it would break the container.
Goals
Increase shopability and the CVR influenced via Color Lab, simplify the color selection flow, and allow the user to distinguish what is a Core color versus a Limited Edition one.
Discovery
As a first step of the discovery process, the UX team conducted several usability interviews using the current Color Lab experience to help gauge perception and areas of opportunity.
Areas of Opportunity
Incorporate Previous Colors Purchased
Users expressed frustration around not being able to easily find previously purchased products or colors, especially discontinued ones. Incorporating these into the flow will improve the value and usability of the experience.
Make the Experience Shareable
We found that, while some users did use the Color Lab experience on their own, they also were using the feature with coworkers or classmates to compare recent color drops.
Allow Users to Compare Colors From Different Color Families
The existing experience only allowed users to compare a Blue against another Blue, or a Red against another Red, but users wanted to understand how colors from different families looked against each other.
Competitive Patterning
This type of experience was unique, I found, while conducting competitive patterning. Apparel companies like Nike have customizable product features, but largely only allowed for customization within a single product and not for comparing adjacent items. This proved a challenge in understanding industry norms, and so competitive patterning shifted towards looking at patterns for modules or layouts that inspired my design decisions, rather than an overall feature itself.
An example of this was moving from a vertical split between color selection to a horizontal split, where I received a lot of inspiration from apps that used drawers in interesting ways.
Design Ideation
As the Color Lab was an already existing feature and design within our system, the generative phase of design immediately entered a mid-to-high fidelity approach.
Ideation centered around removing the content being largely displayed vertically, and instead moved to a horizontal solution, inspired by the drawers shown in competitive patterning. Shown here, I moved through different layout ideas to get an understanding of how best to display the content we were delivering to the user, where certain components should exist, how does one filter, and so on.
Final Designs
Main Flow
Comprising a main, linear flow, shown below, that allows the user to search for, filter by, and change colors, as well as branches that look at the user’s color order history that can be applied to the main flow, a shop the color flow for optimizing shopability within the Color Lab feature, as well as a share flow.
My Colors Flow
A branch of the main flow that enables the user to view color purchase history and add that color to the main color selection flow. For colors the user has purchased, clicking the “VIEW” CTA next to a color name would populate the color within the main flow. For options like the Oranges & Yellow example where a user has not purchased, they can see offered colors in stock for the color they selected.
Shop Colors Flow
After selecting both their first and second colors, the user can either change one or both colors, or shop these colors as well. For in-stock color collections, clicking the Shop This Color CTA would direct you to that color’s respective product list page, and for out-of-stock color collections, the Shop Similar Colors CTA would open a drawer offering colors similar to your choice, and would either populate the respective color collection list page, or filter the All Scrubs list page to your color choice if there is no collection.
Share Flow
Lastly, when users are satisfied with their color selections, they may share their comparison, highlighting the use case we found for users most likely to use Color Lab to share the differences between our new and old colors with coworkers, friends, or fellow students.
Rollout & Project Challenges
As of Q3 2024, this project is slated to be built and shipped in Q4 2024, where upon its completion, we hope to conduct further user testing to improve upon the experience and make the feature overall more useful and valuable for our user.
Adjacently, this speaks heavily to what we felt was the biggest challenge this project faced: how can we make this feature useful, valuable, and not a dead end? Its previous iterations were rolled out without any usability testing or user feedback, leaving it feeling like a piece of the puzzle was missing. Ideating off of previous iterations continued to feel like a cyclical process without much improvement. By incorporating usability testing and user feedback into the flow, however, we were able to understand what was missing with its improvements around shopability, order history, and shareability, and lead to a much more clean, minimal, and useable feature and experience.