Design System
Revolve - a halfords Design system
Revolve - a halfords Design system
I led the work on a comprehensive collection of guidelines, components and resources for Halfords.com. With such a well recognised brand the main challenge was to strike a balance between using the existing brand elements and introducing a refreshed web-first identity. Oh and we had T-Shirts made.
CLIENT
Halfords
ROLE
UI UX Strategy manager
RESPONSIBILITIES
create a system and train peers
create a system
and train peers
YEAR
2023
what?
Started out as a UI Kit, how did it end up like this? It was only a Kit, it was only a Kit…
Started out as a UI Kit, how did it end up like this? It was only a Kit, it was only a Kit…
WHY?
By creating and maintaining the design system our teams can streamline their workflows, improve collaboration, and maintain brand identity and visual coherence across different platforms and applications.
By creating and maintaining the design system our teams can streamline their workflows, improve collaboration, and maintain brand identity and visual coherence across different platforms and applications.
It also promotes reusability, scalability, and maintenance of design assets, making it easier to create and iterate on products while reducing inconsistencies and duplication of effort.
It also promotes reusability, scalability, and maintenance of design assets, making it easier to create and iterate on products while reducing inconsistencies and duplication of effort.
The entire Halfords.com site design has been comprehensively updated, incorporating input from the Brand Team to ensure all elements are on-brand. The redesign focused on accessibility, making all elements more understandable, concise, and user-friendly.
The entire Halfords.com site design has been comprehensively updated, incorporating input from the Brand Team to ensure all elements are on-brand. The redesign focused on accessibility, making all elements more understandable, concise, and user-friendly.
How?
Collaboration, Iteration, a Single Chunky Figma file, Maintenance, Maintenance and Maintenance.
Collaboration, Iteration, a Single Chunky Figma file, Maintenance, Maintenance and Maintenance.
Moving the UI Kit and its documentation into a common online space using Storybooks or Zeroheight would've further enhanced communication between design and development teams. The future of Halfords holds more streamlined workflows and a more organised and collaborative product development lifecycle.
Moving the UI Kit and its documentation into a common online space using Storybooks or Zeroheight would've further enhanced communication between design and development teams. The future of Halfords holds more streamlined workflows and a more organised and collaborative product development lifecycle.
"
The system Marcell developed not only enhances our user experience but also streamlines our processes, driving efficiency and consistency across the board.
Daniel Gibbons - Head of UX-UI at Halfords
"
"
The system Marcell developed not only enhances our user experience but also streamlines our processes, driving efficiency and consistency across the board.
Daniel Gibbons - Head of UX-UI at Halfords
"
It would be great to showcase various metrics demonstrating the success of this Design System within the business, but such detailed research was never conducted. However, a few things are certain: the team became significantly more effective in producing quality screens, we eliminated multiple meetings about aligning UI elements across different parts of the website, and we stopped wireframing altogether. While controversial, it became so easy to assemble screens after launching the UI kit that the team transitioned directly from user flows to high-fidelity screens.
It would be great to showcase various metrics demonstrating the success of this Design System within the business, but such detailed research was never conducted. However, a few things are certain: the team became significantly more effective in producing quality screens, we eliminated multiple meetings about aligning UI elements across different parts of the website, and we stopped wireframing altogether. While controversial, it became so easy to assemble screens after launching the UI kit that the team transitioned directly from user flows to high-fidelity screens.
Our Figma handover file included the names and origins of our components, enabling engineers to track and reuse elements consistently. The UI kits in Figma came with ready-to-use code snippets and stylesheets, facilitating seamless integration into projects, enhancing development efficiency, and minimizing errors associated with the manual coding of UI elements.
Our Figma handover file included the names and origins of our components, enabling engineers to track and reuse elements consistently. The UI kits in Figma came with ready-to-use code snippets and stylesheets, facilitating seamless integration into projects, enhancing development efficiency, and minimizing errors associated with the manual coding of UI elements.