AkzoNobel required a full scale design system for their B2B eCommerce platform, a tool used by business clients to browse products, purchase stock, and manage orders.
Agency
VML
My role
Web designer, UI design
Location & year
UK, 2024
AkzoNobel required a full scale design system for their B2B eCommerce platform, a tool used by business clients to browse products, purchase stock, and manage orders.
Agency
VML
My role
Web designer, UI design
Location & year
UK, 2024
AkzoNobel required a full scale design system for their B2B eCommerce platform, a tool used by business clients to browse products, purchase stock, and manage orders.
Agency
VML
My role
Web designer, UI design
Location & year
UK, 2024
My primary responsibility was to build a fully tokenised design system that could support the platform’s vast interface needs while remaining scalable, accessible, and brand-consistent.
My primary responsibility was to build a fully tokenised design system that could support the platform’s vast interface needs while remaining scalable, accessible, and brand-consistent.
My primary responsibility was to build a fully tokenised design system that could support the platform’s vast interface needs while remaining scalable, accessible, and brand-consistent.
Design Process
My responsibilities included end-to-end design, from early concept routes to final delivery, as well as the development of a clean, modular component system and light-themed UI.
Design System Foundation
I started by building a modular and tokenised design system in Figma. Every element, from buttons and forms to navigation, tables, and product tiles, was created with scalability in mind. The system supported light/dark variants and responsiveness across desktop and mobile.
UI Tokens
Core UI tokens were developed for spacing, typography, colours, and component states. This allowed for consistent global application and easier updates across the design library.
Component Library & Behaviour
Interactive and stateful components were designed to handle the various stages of the B2B platform, including account management, stock browsing, basket/checkout flows, and invoice tracking.
Design Process
My responsibilities included end-to-end design, from early concept routes to final delivery, as well as the development of a clean, modular component system and light-themed UI.
Design System Foundation
I started by building a modular and tokenised design system in Figma. Every element, from buttons and forms to navigation, tables, and product tiles, was created with scalability in mind. The system supported light/dark variants and responsiveness across desktop and mobile.
UI Tokens
Core UI tokens were developed for spacing, typography, colours, and component states. This allowed for consistent global application and easier updates across the design library.
Component Library & Behaviour
Interactive and stateful components were designed to handle the various stages of the B2B platform, including account management, stock browsing, basket/checkout flows, and invoice tracking.
Design Process
My responsibilities included end-to-end design, from early concept routes to final delivery, as well as the development of a clean, modular component system and light-themed UI.
Design System Foundation
I started by building a modular and tokenised design system in Figma. Every element, from buttons and forms to navigation, tables, and product tiles, was created with scalability in mind. The system supported light/dark variants and responsiveness across desktop and mobile.
UI Tokens
Core UI tokens were developed for spacing, typography, colours, and component states. This allowed for consistent global application and easier updates across the design library.
Component Library & Behaviour
Interactive and stateful components were designed to handle the various stages of the B2B platform, including account management, stock browsing, basket/checkout flows, and invoice tracking.
Once the design system was established, I built out a series of indicative pages to test and validate the system across different business user journeys. These included homepage, category views, product details, account dashboard, and order summary pages.
Once the design system was established, I built out a series of indicative pages to test and validate the system across different business user journeys. These included homepage, category views, product details, account dashboard, and order summary pages.
Once the design system was established, I built out a series of indicative pages to test and validate the system across different business user journeys. These included homepage, category views, product details, account dashboard, and order summary pages.
Challenges & Solutions
A future-proofed component and token library that allowed internal teams to scale and evolve the platform with ease.
Complex User Needs
The B2B platform had to support diverse user tasks, from bulk ordering and repeat purchasing to invoice management. I tackled this by stress-testing the system across multiple user scenarios, ensuring that components worked together in different configurations.
Consistency Across Teams
The project involved collaboration with multiple design and development teams. The tokenised system helped ensure that all contributors worked from the same structured foundation, reducing design drift.
Legacy UX Modernisation
A key part of the challenge was modernising a previously outdated interface. By introducing a clean visual language and flexible components, we delivered a vastly improved user experience that was still intuitive to existing customers.
Challenges & Solutions
A future-proofed component and token library that allowed internal teams to scale and evolve the platform with ease.
Complex User Needs
The B2B platform had to support diverse user tasks, from bulk ordering and repeat purchasing to invoice management. I tackled this by stress-testing the system across multiple user scenarios, ensuring that components worked together in different configurations.
Consistency Across Teams
The project involved collaboration with multiple design and development teams. The tokenised system helped ensure that all contributors worked from the same structured foundation, reducing design drift.
Legacy UX Modernisation
A key part of the challenge was modernising a previously outdated interface. By introducing a clean visual language and flexible components, we delivered a vastly improved user experience that was still intuitive to existing customers.
Challenges & Solutions
A future-proofed component and token library that allowed internal teams to scale and evolve the platform with ease.
Complex User Needs
The B2B platform had to support diverse user tasks, from bulk ordering and repeat purchasing to invoice management. I tackled this by stress-testing the system across multiple user scenarios, ensuring that components worked together in different configurations.
Consistency Across Teams
The project involved collaboration with multiple design and development teams. The tokenised system helped ensure that all contributors worked from the same structured foundation, reducing design drift.
Legacy UX Modernisation
A key part of the challenge was modernising a previously outdated interface. By introducing a clean visual language and flexible components, we delivered a vastly improved user experience that was still intuitive to existing customers.
This project demonstrated how a strong foundation in design systems can power complex B2B platforms, enabling flexibility, speed, and long-term design integrity.
This project demonstrated how a strong foundation in design systems can power complex B2B platforms, enabling flexibility, speed, and long-term design integrity.
This project demonstrated how a strong foundation in design systems can power complex B2B platforms, enabling flexibility, speed, and long-term design integrity.
More projects
More projects
More projects
Let’s work
together
Email me
Let’s work
together
Email me
Let’s work
together
Email me