BAT Design System: Unifying global srands through scalable design

British American Tobacco (BAT), with its diverse portfolio of global brands like Vuse, Velo, and Glo, faced significant challenges in maintaining design consistency across numerous countries and markets. This fragmentation led to inconsistent user experiences, inefficient workflows, and accessibility concerns. The need for a unified, scalable design system was critical to harmonise these brands and streamline design and development processes.

As a Senior UI Designer, I contributed to the initial development of independent design systems for Vuse and Velo, starting in 2021. Building upon this foundation, I collaborated with a wider team to evolve these individual systems into a sophisticated, tokenised design system within Figma. This strategic shift, implemented after 2023, leverages tokens to allow designers to seamlessly apply brand-specific styles and components (Vuse, Glo, Velo) to common elements. This ensures unparalleled consistency and significantly accelerates content creation across all brands.

The tokenised system streamlines the handover to developers, provides a comprehensive UI component library (e.g., CTAs, hero banners, country selectors), and proactively addresses accessibility concerns. By enabling a single solution to be applied across multiple brands, the tokenisation significantly sped up the creation of pages like the country selector and other shared elements. This fosters efficiency and design excellence across BAT's entire digital ecosystem.