Simplifying complex motoring journeys by improving core shopping experiences and contributing to Halfords' design system

Car Servicing Product Listing Page
____

Problem

Customers found it difficult to understand which service (Interim, Full, or Major) was right for their vehicle as well as uncertainty around pricing and bundle service products.

Solution

• Designed a modular Service PLP driven by VRN and postcode inputs to personalise prices and eligibility.
• Introduced a guided sell drawer (“Help me choose”) to recommend services based on vehicle data and mileage.
• Added a comparison table to clearly show what’s included in each service type.
• Simplified hierarchy and improved scannability on mobile.

Outcome

• Average user confidence in choosing the correct service: 4.5/5
• Average ease of finding information: 4.7/5
• Reduced user confusion around bundles and dynamic pricing.

‍

Retail Product Cards
____

Problem

Retail product cards across Halfords.com lacked consistency, with varying layouts and content hierarchies depending on category. This made it difficult for users to scan and compare items and created extra work for teams maintaining multiple card versions.

Solution

We designed a unified retail product card in Figma with a clear, consistent structure: image, title, rating, price, and tags. Supported by two configurable call out panels for optional content such as offers or payment options. Cards maintain a consistent height on desktop for alignment within grids, while becoming flexible on mobile to support stacked layouts.

‍

Design System
____

Problem

Multiple product teams were designing independently, leading to inconsistency in typography, colours, and component use.

Solution

• Defined the UI token structure: Surface, Surface-Dim, Surface-Dimmest, On-Surface, Container, etc.
• Created reusable organisms and templates for PLPs, headers, footers, and modals.
• Introduced accessibility documentation (contrast ratios, aria label guidance, tabbing order best practice).
• Ran weekly “Incubator Sessions” with product teams to review new components and ensure design system alignment.

Outcome

• Established a scalable and consistent visual foundation adopted across multiple product squads.
• Improved accessibility compliance and collaboration between design and devleopment.

Homepage & Bento Box Content System
____

Problem

Marketing needed more flexibility to surface promotions and seasonal content while maintaining consistent layout and hierarchy.

Solution

• Designed a Bento Box component with three modular content sizes: small, medium and large.
  • Small: short term promotions or sale items.
  • Medium: editorial or campaign features.
  • Large: major promotional hero content.
• Built a responsive layout that adapts to mobile while keeping performance lightweight.

Outcome

• Created a flexible, brand aligned content structure for marketing campaigns.
• Improved visual engagement and reduced reliance on dev intervention.