B
B
For anyone
Recruiters
Designers
Engineers
Hello, I'm a designer who builds the systems that turn ideas into real experiences.
I care about how products work — and how they make people feel
For anyone
Recruiters
Designers
Engineers
Hello, I'm a designer who builds the systems that turn ideas into real experiences.
I care about how products work — and how they make people feel
For anyone
Recruiters
Designers
Engineers
Hello, I'm a designer who builds the systems that turn ideas into real experiences.
I care about how products work — and how they make people feel
Halfords: Designing Systems for Scale and Simplicity
Halfords: Designing Systems for Scale and Simplicity
When I joined Halfords, the digital product experience was fragmented.
There was no working design system — only a Figma file where sprint outputs were loosely collected without structure or governance. Across a vast product range covering both cycling and motoring, this inconsistency was causing friction for users and inefficiency for teams.
At the same time, Halfords was beginning a major shift toward a headless CMS and React-based frontend. There was a rare opportunity to rebuild the foundations of the digital experience properly.
I recognised that opportunity early, took ownership of the design system challenge, and began driving the work forward — even before the company formally invested resources into it.
When I joined Halfords, the digital product experience was fragmented.
There was no working design system — only a Figma file where sprint outputs were loosely collected without structure or governance. Across a vast product range covering both cycling and motoring, this inconsistency was causing friction for users and inefficiency for teams.
At the same time, Halfords was beginning a major shift toward a headless CMS and React-based frontend. There was a rare opportunity to rebuild the foundations of the digital experience properly.
I recognised that opportunity early, took ownership of the design system challenge, and began driving the work forward — even before the company formally invested resources into it.
My role extended far beyond asset creation.
I developed the design system strategy, structure, and build — defining the architecture, educating peers, setting up processes, and connecting design decisions to technical realities. This is a process that is still ongoing.
Alongside this, I contributed to the redesign of Halfords’ core ecommerce journey, identifying major UX challenges and leading the proposal, validation, and iteration of new flows that simplified complex fulfilment journeys for users.
My role extended far beyond asset creation.
I developed the design system strategy, structure, and build — defining the architecture, educating peers, setting up processes, and connecting design decisions to technical realities. This is a process that is still ongoing.
Alongside this, I contributed to the redesign of Halfords’ core ecommerce journey, identifying major UX challenges and leading the proposal, validation, and iteration of new flows that simplified complex fulfilment journeys for users.
Building the Foundations
Building the Foundations
Research and Strategy
Recognising that Halfords’ success depended on both consistency and scalability, I began by researching mature design systems — Material, Atlassian, Decathlon, Apple HIG, Uber — studying not just their components, but how they structured information, defined tokens, and governed change over time.
I wasn’t aiming to replicate these systems directly. Instead, I analysed how their technical underpinnings — naming conventions, token hierarchies, accessibility principles, publishing models — allowed them to scale across teams and products.
From this, I designed a strategy tailored for Halfords: one that would be lean, adaptable, and capable of maturing alongside the business.
Research and Strategy
Recognising that Halfords’ success depended on both consistency and scalability, I began by researching mature design systems — Material, Atlassian, Decathlon, Apple HIG, Uber — studying not just their components, but how they structured information, defined tokens, and governed change over time.
I wasn’t aiming to replicate these systems directly. Instead, I analysed how their technical underpinnings — naming conventions, token hierarchies, accessibility principles, publishing models — allowed them to scale across teams and products.
From this, I designed a strategy tailored for Halfords: one that would be lean, adaptable, and capable of maturing alongside the business.
Technical Foundations: Structuring the System
Token Architecture
To future-proof the system, I built a three-layer token architecture for colour: raw values (HEX/pixel codes), primitives (structured families like Neutral 500), and semantic aliases (role-based names like Surface Default or Error Background).
Raw Values: Base HEX codes and pixel values
Primitives: Organised colour families (e.g., Neutral 500, Green 600, Blue 700)
Semantic Aliases: Role-based tokens (e.g., Surface Default, On Surface High, Error Background)
This separation allowed the system to be flexible and future-proof — enabling us to change raw values without disrupting design consistency at the semantic level.
Technical Foundations: Structuring the System
Token Architecture
To future-proof the system, I built a three-layer token architecture for colour: raw values (HEX/pixel codes), primitives (structured families like Neutral 500), and semantic aliases (role-based names like Surface Default or Error Background).
Raw Values: Base HEX codes and pixel values
Primitives: Organised colour families (e.g., Neutral 500, Green 600, Blue 700)
Semantic Aliases: Role-based tokens (e.g., Surface Default, On Surface High, Error Background)
This separation allowed the system to be flexible and future-proof — enabling us to change raw values without disrupting design consistency at the semantic level.
#FF9718
#FF9718
colors-orange-500
colors-orange-500
#FF9718
#FF9718
Button-Brand-Secondary
Button-Brand-Secondary
#FF9718
#FF9718
{colors.orange.500}
{colors.orange.500}
token name
token name
value
(resolved)
value
(resolved)
value
(raw)
value
(raw)
Colour Roles
Rather than relying on visual categories alone, I defined a colour role system inspired by accessibility principles:
Surface colours, text roles, interaction states (hover, pressed, disabled), success, error, warning, and information states were all tokenised and documented for both designers and developers.
Colour Roles
Rather than relying on visual categories alone, I defined a colour role system inspired by accessibility principles:
Surface colours, text roles, interaction states (hover, pressed, disabled), success, error, warning, and information states were all tokenised and documented for both designers and developers.
Typography System
Halfords’ previous typography was fragmented — separate sets for desktop, tablet, and mobile.
I condensed this into a single semantic typography scale, using proportional styles that allowed one scale to adapt and keep hierarchy depending on context, emphasis and screen size.
This approach allowed typography to scale responsively while maintaining clear hierarchy and rhythm across devices.
Typography System
Halfords’ previous typography was fragmented — separate sets for desktop, tablet, and mobile.
I condensed this into a single semantic typography scale, using proportional styles that allowed one scale to adapt and keep hierarchy depending on context, emphasis and screen size.
This approach allowed typography to scale responsively while maintaining clear hierarchy and rhythm across devices.
Font Size Scale (Major Second Scale 1.125)
Display
Weight 900 - Black
Heading
Weight 700 - Bold
Label/Body
Weight 600 - Semi Bold
Weight 400 - Regular
96
52
44
40
36
32
28
24
20
18
16
14
12
Large
Medium
Small
XXLarge
XLarge
Large
Medium
Small
Extra Small
Large
Medium
Small
Extra Small
Spacing and Grids
I developed a base-4 spacing system tokenised into Small, Medium, and Large values — pairing spacing tokens logically with element relationships (e.g., Small spacing for label-input pairs, Medium for related content blocks, Large for page sections).
The grid system was built around four breakpoints — mobile, tablet, desktop, and widescreen — with consistent gutter and margin rules aligned with responsive best practices and accessibility reflow standards.
Spacing and Grids
I developed a base-4 spacing system tokenised into Small, Medium, and Large values — pairing spacing tokens logically with element relationships (e.g., Small spacing for label-input pairs, Medium for related content blocks, Large for page sections).
The grid system was built around four breakpoints — mobile, tablet, desktop, and widescreen — with consistent gutter and margin rules aligned with responsive best practices and accessibility reflow standards.
Iconography System
I audited Halfords’ custom brand icons, rebuilt them as Figma components, and structured their use across four key size categories (20px, 24px, 40px, 44px).
I also integrated Material Icons as a utility layer — maintaining consistency between brand-specific and functional icons — and documented usage rules (e.g., when to use outline vs filled icons, sizing guidelines, and accessibility colour pairings).
Iconography System
I audited Halfords’ custom brand icons, rebuilt them as Figma components, and structured their use across four key size categories (20px, 24px, 40px, 44px).
I also integrated Material Icons as a utility layer — maintaining consistency between brand-specific and functional icons — and documented usage rules (e.g., when to use outline vs filled icons, sizing guidelines, and accessibility colour pairings).
Try Me!
Try Me!
Early button patterns shaped atomic consistency across the system.
Building Interactive Components: A Living System
At this stage, the system was evolving in parallel with a major redesign of the website itself. Time pressures and stakeholder needs meant that some components, like buttons and inputs, were intentionally kept flexible — allowing real product design work to help validate and refine the component library.
Despite this, we established early principles for molecules — ensuring they referenced the core design tokens and met accessibility standards across key states like hover, pressed, and focus.
Building the system in tandem with the product redesign allowed us to stay pragmatic: balancing consistency with the need for speed, while setting strong foundations for future refinement and scalability.
Building Interactive Components: A Living System
At this stage, the system was evolving in parallel with a major redesign of the website itself. Time pressures and stakeholder needs meant that some components, like buttons and inputs, were intentionally kept flexible — allowing real product design work to help validate and refine the component library.
Despite this, we established early principles for molecules — ensuring they referenced the core design tokens and met accessibility standards across key states like hover, pressed, and focus.
Building the system in tandem with the product redesign allowed us to stay pragmatic: balancing consistency with the need for speed, while setting strong foundations for future refinement and scalability.
Building Organisms: Composing Meaningful Structures
With atoms and molecules established, I moved on to building organisms: larger, reusable design structures composed of multiple molecules and atomic elements.
Organisms needed to be flexible enough to support Halfords’ diverse product and service propositions, while remaining modular for scalability.
Building Organisms: Composing Meaningful Structures
With atoms and molecules established, I moved on to building organisms: larger, reusable design structures composed of multiple molecules and atomic elements.
Organisms needed to be flexible enough to support Halfords’ diverse product and service propositions, while remaining modular for scalability.
Footer Toggle
This toggles the footer on and off.
Header Controls
Toggle title.
Toggle progress bar.
Toggle wish-list version of header (this will toggle off the progress bar and title).
Toggle back (Left Icon).
Toggle close (Right Icon).
Footer Controls
Options for 1-2 buttons.
Orientation stacks the buttons vertically or horizontally (only applicable if there are two buttons).
Button Controls
Kind (Primary, Secondary, Tertiary etc.).
Icon toggles selects a left, right or no icon.
State (Active, Disabled, Hover etc.).
(Component Controls)
(Prototype Settings)
Title goes here
Add to Basket
308 (Hug Contents)
375
20
20
16
16
Implementation Challenges and Solutions
Naming Consistency
Creating a semantic structure that made sense for designers but was also developer-friendly was a major challenge. I led working sessions to align terminology across teams, ensuring that Figma tokens matched coded variables wherever possible.
Library Governance
To avoid fragmentation as the design system scaled, I implemented a Figma library structure with strict publishing workflows. Incubation files allowed experimentation without risking the core library’s integrity.
Accessibility by Default
Rather than retrofitting accessibility, I embedded it into every atom and molecule:
Contrast ratios validated for every colour pairing
Minimum tap targets enforced (44px minimum for touch elements)
Focus states designed and documented at atomic levels
Implementation Challenges and Solutions
Naming Consistency
Creating a semantic structure that made sense for designers but was also developer-friendly was a major challenge. I led working sessions to align terminology across teams, ensuring that Figma tokens matched coded variables wherever possible.
Library Governance
To avoid fragmentation as the design system scaled, I implemented a Figma library structure with strict publishing workflows. Incubation files allowed experimentation without risking the core library’s integrity.
Accessibility by Default
Rather than retrofitting accessibility, I embedded it into every atom and molecule:
Contrast ratios validated for every colour pairing
Minimum tap targets enforced (44px minimum for touch elements)
Focus states designed and documented at atomic levels
Outcomes of the Foundations Work
Halfords’ first structured, token-driven design system, integrated across design and development workflows
Accelerated component building and prototyping processes
Enabled responsive, accessible design practices by default
Created a platform that could scale across Halfords’ expanding proposition and headless architecture plans
Outcomes of the Foundations Work
Halfords’ first structured, token-driven design system, integrated across design and development workflows
Accelerated component building and prototyping processes
Enabled responsive, accessible design practices by default
Created a platform that could scale across Halfords’ expanding proposition and headless architecture plans
Evolving from Systems to Solutions
With the atomic design foundations in place, I turned my focus to one of Halfords’ biggest customer experience challenges: the ecommerce purchasing journey.
The complexity of Halfords’ product and service range — from cycling accessories to garage servicing and mobile repairs — created friction points across the purchasing flow.
Products came with different fulfilment methods, different rules, and different expectations — making it difficult for users to understand how to buy what they needed quickly and confidently.
Recognising this, I lead the redefinition of the purchasing journey: mapping the problems, proposing a simpler fulfilment structure, and leading the design and testing of a redesigned flow that better matched user behaviours.
Evolving from Systems to Solutions
With the atomic design foundations in place, I turned my focus to one of Halfords’ biggest customer experience challenges: the ecommerce purchasing journey.
The complexity of Halfords’ product and service range — from cycling accessories to garage servicing and mobile repairs — created friction points across the purchasing flow.
Products came with different fulfilment methods, different rules, and different expectations — making it difficult for users to understand how to buy what they needed quickly and confidently.
Recognising this, I lead the redefinition of the purchasing journey: mapping the problems, proposing a simpler fulfilment structure, and leading the design and testing of a redesigned flow that better matched user behaviours.
Redefining the Purchasing Journey
Redefining the Purchasing Journey
Discovering the Problem
We began by auditing Halfords’ existing site journeys across five critical touch points: the Product Listing Page (PLP), Product Description Page (PDP), Basket, Checkout, and Order Confirmation.
Using FigJam, I mapped end-to-end user flows and bucketed patterns across different propositions — motoring retail, motoring services, cycling retail, and cycling services.
The biggest friction point became clear quickly: fulfilment complexity.
Halfords offers multiple fulfilment options:
Home Delivery
Click and Collect
Garage Services
Mobile Expert Servicing
Service add-ons at point of sale (e.g., oil top-ups, bike builds)
The live site forced users to select fulfilment types at the product page level — often before they were ready to commit.
Each fulfilment type had slightly different rules, stock-checking behaviours, and flow variants — leading to fragmented baskets, user confusion, and increased abandonment risks.
Discovering the Problem
We began by auditing Halfords’ existing site journeys across five critical touch points: the Product Listing Page (PLP), Product Description Page (PDP), Basket, Checkout, and Order Confirmation.
Using FigJam, I mapped end-to-end user flows and bucketed patterns across different propositions — motoring retail, motoring services, cycling retail, and cycling services.
The biggest friction point became clear quickly: fulfilment complexity.
Halfords offers multiple fulfilment options:
Home Delivery
Click and Collect
Garage Services
Mobile Expert Servicing
Service add-ons at point of sale (e.g., oil top-ups, bike builds)
The live site forced users to select fulfilment types at the product page level — often before they were ready to commit.
Each fulfilment type had slightly different rules, stock-checking behaviours, and flow variants — leading to fragmented baskets, user confusion, and increased abandonment risks.
Previous flow
New suggested flow
Leading the Solution
Understanding that fulfilment complexity was overwhelming users, I proposed a fundamental shift in the purchasing journey: defer fulfilment selection until after the basket review, instead of forcing users to choose at the product page stage.
This new model aligned with natural shopping behaviour.
Users don’t decide on fulfilment methods the moment they browse — they explore products, compare options, and commit to buying first.
Shifting fulfilment selection later allowed the user journey to feel more intuitive, flexible, and focused.
Leading the Solution
Understanding that fulfilment complexity was overwhelming users, I proposed a fundamental shift in the purchasing journey: defer fulfilment selection until after the basket review, instead of forcing users to choose at the product page stage.
This new model aligned with natural shopping behaviour.
Users don’t decide on fulfilment methods the moment they browse — they explore products, compare options, and commit to buying first.
Shifting fulfilment selection later allowed the user journey to feel more intuitive, flexible, and focused.
Before advocating for this shift internally, I validated the decision against real data.
Analysis showed that the average Halfords basket contained just 1.7 items, and less than 1% of users ever attempted to mix fulfilment types within a single transaction. The data confirmed what the UX logic suggested: users weren’t asking for the complexity we were forcing them to navigate.
Because the change touched multiple parts of the business — product, engineering, retail, and service propositions — communication was critical.
I built detailed flow diagrams mapping the old and new journeys, designed click-through prototypes of the simplified basket and fulfilment flow, and led stakeholder presentations to secure buy-in.
Throughout, I proactively surfaced potential edge cases — such as mixed stock availability or service restrictions — and proposed ways to handle them cleanly inside the redesigned structure.
Leading this solution wasn’t just about creating better UX — it was about designing a system that could scale operationally, simplify codebases, and create a clearer, more confident purchase experience for users across Halfords’ complex product landscape.
Before advocating for this shift internally, I validated the decision against real data.
Analysis showed that the average Halfords basket contained just 1.7 items, and less than 1% of users ever attempted to mix fulfilment types within a single transaction. The data confirmed what the UX logic suggested: users weren’t asking for the complexity we were forcing them to navigate.
Because the change touched multiple parts of the business — product, engineering, retail, and service propositions — communication was critical.
I built detailed flow diagrams mapping the old and new journeys, designed click-through prototypes of the simplified basket and fulfilment flow, and led stakeholder presentations to secure buy-in.
Throughout, I proactively surfaced potential edge cases — such as mixed stock availability or service restrictions — and proposed ways to handle them cleanly inside the redesigned structure.
Leading this solution wasn’t just about creating better UX — it was about designing a system that could scale operationally, simplify codebases, and create a clearer, more confident purchase experience for users across Halfords’ complex product landscape.
This redesign led to the introduction of a new fulfilment stage after basket, streamlining how users selected their delivery or service options.
Instead of forcing fulfilment choices at the product page level, users could now review all basket items together and choose the most convenient fulfilment method — creating a more natural flow that matched real-world shopping behaviours.
This redesign led to the introduction of a new fulfilment stage after basket, streamlining how users selected their delivery or service options.
Instead of forcing fulfilment choices at the product page level, users could now review all basket items together and choose the most convenient fulfilment method — creating a more natural flow that matched real-world shopping behaviours.
Basket
Basket
£
£
303.29
303.29
Pick a fulfilment option
Pick a fulfilment option
Collect at store
Earliest pickup 10th March
Free
Halfords
Bromsgrove Store
Redditch Ringway, Redditch B98 8DU
Tuesday, 11th Mar 2025
Collect from 09:00 am
Some items are available earlier.
Split dates
SOONEST
Standard delivery
Delivered in 3-5 working days
Free
Delivery to HA14 F0D
Between 08:00 and 16:00
Next day delivery
Delivered tomorrow. Order before 6pm.
+£4.95
Delivery to HA14 F0D
Between 08:00 and 16:00
Nominated day delivery
Choose your delivery day
+£10
Collect at store
Earliest pickup 10th March
Free
Halfords
Bromsgrove Store
Redditch Ringway, Redditch B98 8DU
Tuesday, 11th Mar 2025
Collect from 09:00 am
Some items are available earlier.
Split dates
SOONEST
Standard delivery
Delivered in 3-5 working days
Free
Delivery to HA14 F0D
Between 08:00 and 16:00
Next day delivery
Delivered tomorrow. Order before 6pm.
+£4.95
Delivery to HA14 F0D
Between 08:00 and 16:00
Nominated day delivery
Choose your delivery day
+£10
Continue to checkout
Continue to checkout
Introducing a dedicated Fulfilment stage post-basket — simplifying complex product delivery choices into a clear, user-led flow. I built this interaction in Framer so its not EXACTLY representative.
This new structure not only reduced cognitive load during browsing and product selection, but also simplified the basket experience — allowing users to make clear, consolidated fulfilment decisions before proceeding to checkout.
This new structure not only reduced cognitive load during browsing and product selection, but also simplified the basket experience — allowing users to make clear, consolidated fulfilment decisions before proceeding to checkout.
Testing and Iteration
With the redesigned checkout flow proposed and prototyped, it was essential to validate the experience through structured user testing.
Rather than relying solely on internal feedback or assumptions, I designed a two-phase remote usability study to gather direct user insights and measure the effectiveness of the new purchasing journey.
Testing and Iteration
With the redesigned checkout flow proposed and prototyped, it was essential to validate the experience through structured user testing.
Rather than relying solely on internal feedback or assumptions, I designed a two-phase remote usability study to gather direct user insights and measure the effectiveness of the new purchasing journey.
Final Wireframe used for testing
The first phase focused on evaluating the structural changes introduced by the new fulfilment model:
Participants were asked to complete key tasks — adding products to the basket, reviewing fulfilment options, and proceeding through the updated checkout flow — using high-fidelity wireframes that reflected the restructured journey. Initial testing surfaced a number of improvements: participants responded positively to the deferred fulfilment structure and found the journey more intuitive compared to the live Halfords experience.
However, feedback also highlighted areas for refinement, particularly around the clarity of fulfilment choices and the prominence of key call-to-action buttons.
Lower scoring users
Couldn’t tell the difference between fulfilment types - wanted to change home delivery to click and collect
Quickly realised that that would be a decision at basket instead
Same user thought “home delivery” and “we’ll come to you” is the same thing - annoyed what the difference was
This should be fixed with more context.
Question 5
Was it clear which items were for home delivery and which items were for click and collect?
Was it clear which items were for home delivery and which items were for click and collect?
Question 5
Was it clear which items were for home delivery and which items were for click and collect?
Was it clear which items were for home delivery and which items were for click and collect?
Taking these insights, I worked with the team to refine the design further — strengthening the grouping of fulfilment options, improving action hierarchy, and simplifying supporting copy where necessary.
The second phase of testing validated these updates.
Task success rates increased, user confusion around fulfilment decisions decreased significantly, and participants consistently described the updated flow as faster, easier, and more aligned with their expectations.
Taking these insights, I worked with the team to refine the design further — strengthening the grouping of fulfilment options, improving action hierarchy, and simplifying supporting copy where necessary.
The second phase of testing validated these updates.
Task success rates increased, user confusion around fulfilment decisions decreased significantly, and participants consistently described the updated flow as faster, easier, and more aligned with their expectations.
The high-fidelity wireframes used in testing focused on validating interaction models and flow logic before full UI visual polish — ensuring that the core purchasing journey was structurally sound before advancing to final design stages.
Through structured testing, user-driven iteration, and a focus on validating real behavioural improvements, we were able to move from a complex, fragmented journey toward a simpler, more scalable ecommerce experience for Halfords customers.
The high-fidelity wireframes used in testing focused on validating interaction models and flow logic before full UI visual polish — ensuring that the core purchasing journey was structurally sound before advancing to final design stages.
Through structured testing, user-driven iteration, and a focus on validating real behavioural improvements, we were able to move from a complex, fragmented journey toward a simpler, more scalable ecommerce experience for Halfords customers.
Experience the Redesign Journey
And now — you can experience the redesigned journey yourself.
The interactive prototype below simulates the full flow from product discovery to order confirmation — complete with dynamic pricing, location selection, and service add-ons.
Experience the Redesign Journey
And now — you can experience the redesigned journey yourself.
The interactive prototype below simulates the full flow from product discovery to order confirmation — complete with dynamic pricing, location selection, and service add-ons.
Task
You already have a bike in your basket.
Now, add some Halfords Microfibre Cloths (5-pack) to your basket, then checkout everything together.
Collect all items from the Redditch store.
Choose collection date: Tuesday, 11th March 2025.
Ensure all items are collected at the same time (no split dates).
After adding the cloths to your basket, you’ll be offered optional services for your bike in the basket:
Optionally add CycleCare or Puncture Prevention.
Optionally choose to have your bike professionally built before collection.
Proceed through checkout:
Confirm your basket and any selected services.
Enter your billing address:
78 Summer Lane, Stratford, Warwickshire.
Choose to pay by credit or debit card.
Place your order and reach the Order Confirmation screen.
Task
You already have a bike in your basket.
Now, add some Halfords Microfibre Cloths (5-pack) to your basket, then checkout everything together.
Collect all items from the Redditch store.
Choose collection date: Tuesday, 11th March 2025.
Ensure all items are collected at the same time (no split dates).
After adding the cloths to your basket, you’ll be offered optional services for your bike in the basket:
Optionally add CycleCare or Puncture Prevention.
Optionally choose to have your bike professionally built before collection.
Proceed through checkout:
Confirm your basket and any selected services.
Enter your billing address:
78 Summer Lane, Stratford, Warwickshire.
Choose to pay by credit or debit card.
Place your order and reach the Order Confirmation screen.
Project Outcomes and Reflection
Project Outcomes and Reflection
Anticipated Efficiency Gains
Although the redesigned checkout flow has not yet been fully deployed to Halfords’ live website, early user testing and benchmarking against comparable ecommerce models (such as IKEA and Currys) suggest that the new structure will meaningfully reduce friction across the purchasing journey.
By deferring fulfilment decisions until after users have chosen their products and reviewed their basket, the journey respects the natural flow of user intent — allowing decisions to be made at the right time, not prematurely.
This is expected to reduce cognitive load, speed up progression to checkout, and align Halfords’ ecommerce journey more closely with intuitive shopping behaviours seen across the industry.
Internally, the introduction of a structured design system immediately improved the team’s efficiency. The process of producing high-fidelity wireframes became faster and more consistent, enabled by clearly defined colour roles, spacing scales, typography systems, and atomic components. Rather than reinventing foundations for each project, the team could focus on crafting better user experiences and optimising flows — saving significant design and development time.
Anticipated Efficiency Gains
Although the redesigned checkout flow has not yet been fully deployed to Halfords’ live website, early user testing and benchmarking against comparable ecommerce models (such as IKEA and Currys) suggest that the new structure will meaningfully reduce friction across the purchasing journey.
By deferring fulfilment decisions until after users have chosen their products and reviewed their basket, the journey respects the natural flow of user intent — allowing decisions to be made at the right time, not prematurely.
This is expected to reduce cognitive load, speed up progression to checkout, and align Halfords’ ecommerce journey more closely with intuitive shopping behaviours seen across the industry.
Internally, the introduction of a structured design system immediately improved the team’s efficiency. The process of producing high-fidelity wireframes became faster and more consistent, enabled by clearly defined colour roles, spacing scales, typography systems, and atomic components. Rather than reinventing foundations for each project, the team could focus on crafting better user experiences and optimising flows — saving significant design and development time.
Anticipated User Experience Improvements
Second-round usability testing demonstrated clear improvements in task success rates, user understanding, and journey clarity. Participants reported finding the deferred fulfilment structure intuitive, with fewer moments of uncertainty and faster task completion compared to the legacy Halfords journey.
While full validation with live customers is pending final implementation, early indications show strong alignment between user needs and the new journey architecture.
Anticipated User Experience Improvements
Second-round usability testing demonstrated clear improvements in task success rates, user understanding, and journey clarity. Participants reported finding the deferred fulfilment structure intuitive, with fewer moments of uncertainty and faster task completion compared to the legacy Halfords journey.
While full validation with live customers is pending final implementation, early indications show strong alignment between user needs and the new journey architecture.
Scalability and Future-Proofing
The purchasing journey redesign also laid critical groundwork for better scalability. By consolidating complex fulfilment options into a single structured stage, Halfords will be able to more easily support new services, propositions, and fulfilment models without fracturing the user experience.
Similarly, the introduction of an atomic design system has dramatically improved design consistency across touch points, reducing technical debt and creating a more maintainable, adaptable digital product architecture.
Scalability and Future-Proofing
The purchasing journey redesign also laid critical groundwork for better scalability. By consolidating complex fulfilment options into a single structured stage, Halfords will be able to more easily support new services, propositions, and fulfilment models without fracturing the user experience.
Similarly, the introduction of an atomic design system has dramatically improved design consistency across touch points, reducing technical debt and creating a more maintainable, adaptable digital product architecture.
Cultural Improvements
The rollout of a structured design system shifted the team’s operating model. Clear token definitions, scalable components, and shared documentation enabled greater cross-team alignment — allowing designers and developers to work faster, collaborate more effectively, and maintain a higher standard of consistency across projects.
By introducing foundational systems thinking into Halfords’ digital design practice, this work helped seed a stronger culture of craft, efficiency, and user-centred decision-making across the organisation.
Cultural Improvements
The rollout of a structured design system shifted the team’s operating model. Clear token definitions, scalable components, and shared documentation enabled greater cross-team alignment — allowing designers and developers to work faster, collaborate more effectively, and maintain a higher standard of consistency across projects.
By introducing foundational systems thinking into Halfords’ digital design practice, this work helped seed a stronger culture of craft, efficiency, and user-centred decision-making across the organisation.
Collaboration Growth
Working collaboratively was a major learning curve and a major unlock.
Building a design system meant shifting focus away from consumers alone, towards designers and developers as users too — understanding their needs, preferences, and workflows.
It became clear that great systems are not just technically robust; they are built through human understanding and collaboration.
Frequent feedback loops with other designers strengthened the work enormously — enabling faster iteration, sharper ideas, and deeper alignment.
Beyond design, learning to absorb input from developers, stakeholders, and even subtle cues from day-to-day conversations, was key to shaping a system that felt natural to the team, not imposed upon it.
This experience underscored how vital it is to design not just for the product, but for the people who will build and extend that product every day.
Collaboration Growth
Working collaboratively was a major learning curve and a major unlock.
Building a design system meant shifting focus away from consumers alone, towards designers and developers as users too — understanding their needs, preferences, and workflows.
It became clear that great systems are not just technically robust; they are built through human understanding and collaboration.
Frequent feedback loops with other designers strengthened the work enormously — enabling faster iteration, sharper ideas, and deeper alignment.
Beyond design, learning to absorb input from developers, stakeholders, and even subtle cues from day-to-day conversations, was key to shaping a system that felt natural to the team, not imposed upon it.
This experience underscored how vital it is to design not just for the product, but for the people who will build and extend that product every day.
Personal Growth and Self-Realisation
This project fundamentally reshaped how I see myself — and my future — as a designer.
Building the design system from scratch revealed that my passion runs far deeper than visual design alone. I found myself driven by technical precision, systems thinking, and the challenge of structuring complexity at scale.
Researching mature systems from Uber, Atlassian, and Apple — and then translating those principles into something lean and specific to Halfords — reignited my excitement for craft. It confirmed that what motivates me is not just improving experiences, but pushing for best-in-class outcomes.
I realised that I thrive when stepping back to look at the bigger picture — reimagining not just “what’s next” but “what’s possible”. I have the technical proficiency, strategic thinking, and leadership mindset to drive change, not just follow it.
This project confirmed that I want to keep building systems, shaping products, and raising the bar — crafting experiences that aren’t just functional, but truly engaging, delightful, and meaningful.
True craft, I learned, lies in the details — and in the courage to push beyond what’s expected.
Personal Growth and Self-Realisation
This project fundamentally reshaped how I see myself — and my future — as a designer.
Building the design system from scratch revealed that my passion runs far deeper than visual design alone. I found myself driven by technical precision, systems thinking, and the challenge of structuring complexity at scale.
Researching mature systems from Uber, Atlassian, and Apple — and then translating those principles into something lean and specific to Halfords — reignited my excitement for craft. It confirmed that what motivates me is not just improving experiences, but pushing for best-in-class outcomes.
I realised that I thrive when stepping back to look at the bigger picture — reimagining not just “what’s next” but “what’s possible”. I have the technical proficiency, strategic thinking, and leadership mindset to drive change, not just follow it.
This project confirmed that I want to keep building systems, shaping products, and raising the bar — crafting experiences that aren’t just functional, but truly engaging, delightful, and meaningful.
True craft, I learned, lies in the details — and in the courage to push beyond what’s expected.