MacBlair
- Web
- B2B
- B2C
- E-commerce
- Design systems
- Magento
A supplier serving both trade and DIY customers.
A site redesign delivered alongside a move to Magento. Leading designs and creation of the design system. Producing high impact designs across the user journey, most notably the mega menu, product landing page and product detail page.
Defining the problem
- 01A large trade catalogue needed one consistent set of components for the new build.
- 02Navigation had to take customers through a deep category tree quickly.
- 03Product pages had to serve trade and DIY customers, who read price and detail differently.
Trade customers know what they want and buy on price, stock and speed. DIY customers need more guidance. One product page had to answer both without becoming cluttered.
Shaping the approach
System before pages. Layout and grid, typography, colour, shadows and icons were defined first, with colour accessibility documented beside the palette.
Price the way each customer reads it. An inc and ex VAT switch sits in the header, and product pages prompt trade account holders to sign in for their own pricing.
Availability up front. Delivery and collection status sit beside the add-to-basket button, tied to the customer's chosen branch.
What we shipped
- 01
Design system
Foundations and components, owned end to end.
- 02
Pattern library
Documented patterns for the build team to work from.
- 03
Mega menu
Navigation for the full category structure.
- 04
Product page
Pricing, stock, delivery and product information on one template.
Proof of the craft
Design system
Foundations, components and a pattern library, with accessibility built into the framework, owned end to end on the Magento replatform.
Navigation that works
A mega menu that takes trade and DIY customers through the full range.
One page, two audiences
Trade and DIY customers each see the price and detail they need.
- Year
- 2024
- Role
- UX/UI designer at Space48, design system owner
- Sectors
- Trade and DIY retail
- Platform
- Web
- Magento