All Work
Nugent Filters: Website Redesign & E-Commerce
Mood Technology Consultancy
2025
UX Designer
Domain
E-commerce
Year
2025
IA
Discovery
The Short Version
An industrial filtration supplier needed a full website redesign with e-commerce. I led discovery: competitive research, visual direction, and lo-fi wireframes across five page types. The site went to production.
The Problem & My Role
Nugent Filters had a large industrial product catalog and no way for customers to browse or buy online. The ask was a full redesign: modernized visual experience plus e-commerce functionality built to support thousands of SKUs across multiple product families. Contracted through MOOD Technology Consultancy, I led the discovery phase (competitive research, visual direction via moodboard, and lo-fi wireframes across five core page types) before handing off to another designer for high-fidelity execution.
Moodboard & Competitive Research
The core design challenge was making an industrial product catalog feel as easy to navigate as a consumer storefront. To get there, I looked in two directions: direct competitors to understand category conventions, and leading B2C e-commerce brands (including Allbirds, Gymshark, and Kylie Cosmetics) to identify checkout and browsing patterns worth bringing into a B2B context. That cross-domain research informed a visual system built around two typographic styles (Open Sans for body, Oswald for headings) paired with a navy and orange palette that balances industrial authority with approachability. Button styles and color tokens were defined explicitly to give the next designer a complete foundation to build from without guessing.
Visual moodboard
Competitive research: consumer checkout flows
Wireframes
With the visual direction established, I mapped out the key page types needed to support both the marketing and e-commerce goals of the site. The structure prioritized product discoverability, with a persistent catalog sidebar, robust filtering on product pages, and application-based browsing to help industrial buyers find the right solution quickly. Five core page types were defined before handoff: Homepage (hero + featured product grid), About (company story), Product Family (application-based browsing across 7 industries), Product Details (filterable specs table with pricing), and Support (self-service order management + FAQ accordion).
Homepage
About page
Product details page
Support page
Product family. Scroll to view the full page.
Reflections
The most interesting design problem on this project wasn't visual; it was information architecture. How do you help an industrial buyer find the right filter out of thousands of options, quickly, without knowing exactly what they're looking for? The application-based browsing pattern (organizing products by industry first, then by spec) was the answer, and it came directly from studying how B2C platforms handle large catalog navigation. If I were taking this project further, I'd want to validate that IA pattern with real Nugent Filters customers before moving to high fidelity.
What I Learned
The site went to production. My engagement ended at handoff; the high-fidelity execution and development were handled by the broader MOOD team. The foundation I delivered: a competitive research synthesis, a complete visual system, and five wireframed page types with clear IA rationale that the next designer could build from directly.