Turning inconsistent product data into a scalable catalog experience for building professionals.
Services
Information Architecture
UX Design
UI Design
Design System
Team
Design
Dev
Sales
Role
Lead UX/UI Designer
Client
Industrial Manufacturer
Client name and product imagery withheld under NDA. Screens shown are redacted or recreated to illustrate structure.
Two Branches,
One Catalog.
The catalog grew without a shared structure. Internal product lines and buyer search paths didn't match. Rather than force one hierarchy, I split the sitemap like ductwork feeding two rooms: one branch for browsing, one for internal organization. More structure to maintain. But neither audience has to bend around the other.
No two products match.
Line up any two products and their spec sheets shared no fields. One listed a dozen attributes, another a handful, with nothing connecting them. I mapped and standardized attributes across the catalog before any visual work began. As a result, the redesign could sit on one template.
Everything weighed the same.
Nothing on the old homepage told a visitor what mattered first. Specs, calls to action, and imagery competed for the same attention, so none won. My strategy started with deciding what deserved priority. Every screen and component had to justify its visual weight.
Hidden behind a hover.
Third-level items existed only inside a hover state. No signal they were there unless a cursor landed right — and on touch, that state doesn't exist. That ruled out any pattern relying on hover to reveal content. The cost is a denser first view. Everything that hid now has to show.
Columns instead of corners.
Categories that hid behind a hover now sit in full columns, by category and by space, visible the moment the menu opens. Best sellers get their own column instead of staying buried in the taxonomy. That costs screen space and one more decision point. No more guesswork on where to hover.
Results before the page loads.
Search used to mean leaving the page, waiting, then landing somewhere new to learn whether the query worked. I replaced it with inline live search that filters as you type to make the gap between typing and knowing gone.
Not all specs are equal.
The old listing gave every attribute equal weight, so the ones driving a decision looked no different from the ones that rarely apply. I elevated a smaller set into the filters and display, and pushed the rest one click deeper as buyers narrow by what usually matters, not by everything.
A swatch doesn't need a sentence.
The old picker leaned on hover and full text names, and a long name could break the layout on a small screen. I moved it to swatch-first, with names handled by CSS instead of fixed labels. The name carries less weight now. The layout holds whether a name is short or long.
