The new design framework had to work across 34+ markets and 50+ suppliers in their global network, as a single source of truth for all design and development teams. Each market had their own specific design needs, and the design system needed to create consistency at the same time as allowing flexibility for regional variations. A brand agnostic logic to the design system was required that exposed visual properties dynamically by applying specific colours, typography, spacing, and iconography to each theme.
/ Activities to meet these challenges
Scoped, defined and built the new Design Tokens structure to power all 3 brands through common reusable semantic data.
Applied the new tokenisation structure to a comprehensive and scalable component library.
Conducted training sessions for eCommerce heads and designers across the 34+ markets to ensure they understood and could effectively use the Design System.
Created a detailed onboarding document and training materials to guide markets on how to use the new design system.
A branded CTA system was introduced through tokenisation that defined Primary, Secondary and Tertiary variants and interactives states, for clear navigation across components and pages.
Tokenised themes for each brand facilitated a seamless transition of design through common patterns and reusable core components.
(Drag left to right below to see the transition in the brand theming)
A comprehensive library of brand agnostic core components (1,355) was created to allow all product owners to build engaging user journeys that could adapt to diverse use cases while maintaining design integrity across product sites. The extensible core components enabled the develop teams to efficiently deliver consistent experiences across multiple brand platforms by separating structure from styling through design tokens and theming layers.
Once the design system was delivered and onboarded we began the process of defining a governance model for all teams to manage, maintain and evolve the design system going forward.
We also then delivered a training program for global suppliers.
*Calculations are based on 1 month of stress testing production on time-recorded tasks
The new tokenised design system has now been introduced to the wider BAT global network and as a result created a substantially more efficient, rigorous and consistent workflow and delivery across the different markets, brands and their suppliers.
Ensuring greater consistency across all digital platforms for BAT globally.
Next projects.
(2016-25©)
