Colorsmith | Lead Product Designer
Navigation & Product Discovery
Organizing a growing product line around how customers actually shop.
The challenge
A flat catalog works, until it doesn’t.
All 12 products lived together without meaningful categorization. Adding seven new products exposed a larger problem: the site’s information architecture hadn’t grown with the business.
I needed to establish a taxonomy that could organize the expanding catalog, then carry that logic consistently through mobile navigation, product listing pages, and the global footer.
The scope came with constraints. Primary desktop navigation was out of scope, as were several PLP optimizations including product imagery, pricing hierarchy, breadcrumbs, and add-to-cart functionality. That meant focusing the work where it could have the greatest impact: structure and product discovery.
My approach
Before redesigning the screens, I had to figure out how the products fit together.
Give the catalog a structure that can grow.
I facilitated an open card sort with Product Marketing and R&D to explore how the expanded assortment could be grouped.
Given the project timeline, we couldn't recruit customers for the exercise, so I paired those findings with an audit of ecommerce patterns and Baymard research.
The resulting taxonomy organized the catalog into three primary categories:
Hair Color · Hair Care · Hair Styling with Shop All providing access to the complete assortment.
This became the organizing principle for every experience that followed.
Existing Catalog Taxonomy
Updated Catalog Taxonomy
Explain the store via navigation before someone starts shopping.
The existing navigation treated products as a list. The new architecture turned that list into a browsable catalog.
On mobile, I brought product categories to the first level of navigation, added paths to browse all products within each category, and separated shopping links from account and customer-service actions.
Desktop navigation was more constrained, so I applied the same hierarchy within the existing Shop menu rather than redesigning the global navigation.
The result was one information architecture expressed appropriately across two different navigation systems.
Existing Mobile Navigation
Updated Mobile Navigation
Existing Desktop Navigation
Updated Desktop Navigation
Help shoppers narrow the aisle.
Creating categories solved one part of discovery. Customers still needed a way to make sense of the products within them.
I translated the taxonomy into dedicated Hair Color, Hair Care, and Hair Styling product listing pages (PLP) and introduced filtering around customers’ hair needs and goals.
The PLP itself had significant scope constraints, so rather than redesigning every element, I concentrated on the decisions that could improve findability: category structure, filtering, hierarchy, and orientation.
Make the system consistent all the way down.
The existing navigation treated products as a list. The new architecture turned that list into a browsable catalog.
Once the taxonomy changed, the footer needed to change with it.
I reorganized product links beneath the same Shop hierarchy used throughout the navigation and PLPs, replacing inconsistent links with a predictable structure.
It was a small piece of the interface, but an important systems decision: customers shouldn't have to relearn how a store is organized depending on where they enter it.
Existing Mobile Footer
Updated Mobile Footer
Existing Desktop Footer
Updated Desktop Footer
Outcome
Growth has a way of exposing the systems that weren't designed for it.
The project transformed Colorsmith’s shop from a flat collection of products into a scalable ecommerce architecture built around Hair Color, Hair Care, and Hair Styling.
The new taxonomy created a consistent foundation across navigation, product listing pages, and the global footer, making a growing catalog easier to browse while giving future products a place to live.
Because post-launch performance data wasn't available during my time on the project, I wouldn't claim improvements to conversion or engagement. Instead, the value of the work was establishing a more coherent system for product discovery and a structure that could grow alongside the business.