The challenge
A new marketplace calls for a cohesive brand experience.
Colorsmith wanted to expand into the box hair color market through Amazon, but entering a crowded marketplace meant more than simply listing products. Customers needed a clear way to navigate 25 products, understand their options, and find the right solution for their hair color goals, all within Amazon's existing platform constraints.
The challenge was to create a fresh, branded storefront that made product discovery intuitive while establishing Colorsmith in a new ecommerce channel.
My approach
Design for product discovery.
Colorsmith was entering a crowded marketplace where customers needed to understand the product range, choose their coverage goals, and find the right shade. The challenge was to make that journey intuitive while introducing an unfamiliar brand.
I audited direct competitors and adjacent men's grooming brands to identify opportunities in navigation, product categorization, visual merchandising, and product education.
Key findings and summary cards for each competitor and comparator's Amazon store.
The research highlighted three opportunities:
Make the choice between blending grays and full coverage clear.
Use relatable imagery and visual product cues to support shade selection.
Organize the catalog around recognizable product types and shopping goals.
To validate the store's structure, I facilitated two open card-sorting activities with eight industry experts from eSalon's product marketing and development teams.
-
![]()
Participant A categorized products by type, then sorted them alphabetically.
-
![]()
Participant B used a mix of type or function for categories and subcategories, and arranged hair color shades from darkest to lightest.
-
![]()
Participant C grouped products by type (category), then by function (subcategory), also sorting hair color shades from darkest to lightest.
The resulting information architecture grouped products into three main categories: Hair & Beard Color, Hair Care, and Styling. Hair & Beard Color was further divided into Blend Grays and Full Coverage, giving customers a more direct path to relevant products.
Final information architecture derived from data collected during the card sorting study.
Build a reusable visual system.
I created a new Colorsmith design system for use within Amazon Seller Central, drawing on material design principles to create a consistent foundation for the storefront.
The visual system included color palettes, typography, buttons, grids, spacing, sizing, and reusable Figma assets. I refined the brand palette with more muted colors and introduced rounded corners to create a visual language more suited to the new shopping environment.
The system helped me apply consistent patterns across desktop and mobile layouts while adapting the brand to Amazon's platform constraints.
Examples from the new design system created for Colorsmith's Amazon store.
Design the shopping journey.
With the information architecture established, I created mid-fidelity wireframes for the Amazon storefront, mapping how customers would navigate the product catalog and find the right solution for their hair color goals.
The experience centered on two key decisions: whether to blend grays or achieve full coverage, and then which shade to choose. I carried these decision points across the homepage, main navigation, and product category pages to create a consistent path from initial discovery to product selection.
-
![]()
Home
-
![]()
Hair & Beard Color
-
![]()
Demi-permanent Color
-
![]()
Permanent Color
-
![]()
Hair Care
-
![]()
Hair Styling
-
![]()
Shop All
Mid-fidelity wireframes for each page of the new Amazon storefront.
Move from design to launch.
After wireframing each page, I worked with our copywriter to align messaging and visual assets with the brand. I created iconography as needed and selected consistent photography, typography, and color blocking, which were crucial to preserving the brand’s integrity while meeting Amazon's constraints.
I carried the experience from Figma designs into Amazon Seller Central, building the storefront pages and connecting them to the corresponding product detail pages.
Without a dedicated engineer, product manager, or UX researcher, I owned the project from discovery through information architecture, design, stakeholder collaboration, and page creation. This hands-on approach allowed me to carry the work from early research through a live storefront while balancing branding and usability.
-
![]()
Home
-
![]()
Hair & Beard Color
-
![]()
Demi-permanent Color
-
![]()
Permanent Color
-
![]()
Hair Care
-
![]()
Hair Styling
-
![]()
Shop All
Final designs for each page of the new Amazon storefront.
Outcome
A cohesive storefront brings the brand to a new audience.
The Colorsmith Amazon storefront launched, establishing a new online presence to support the brand's expansion into the box hair color market.
The project delivered an organized product architecture, a consistent visual system, and a responsive storefront experience designed to help customers navigate the product range and find relevant products.
More of my work
-
![GoodRx app login flow for a recycled phone number, showing account matching via birthdate and SMS verification.]()
Recycled Mobile Number Verification
GoodRx | Senior Product Designer
-
![GoodRx Rewards experience showing how members can redeem points for prescription savings across desktop and mobile.]()
Point-of-Sale Rewards Redemption
GoodRx | Senior Product Designer
-
![Personalized eSalon haircare routine generated from a customer’s quiz responses, shown across desktop and mobile.]()
Personalized Hair Care Quiz
eSalon | Lead UX Designer
-
![GoodRx prescription savings card enrollment experience, helping members request a card and provide mailing information across desktop and mobile.]()
Prescription Savings Card
GoodRx | Senior Product Designer
