BT Arc Design System

Project overview

Creating the Arc design system to increase alignment and scale across a large ecosystem of products. A token-driven system powering themes, accessibility and a unified component library.

My role

Led tokens, component structure, documentation and contribution flows. Partnered with design, engineering and content. Shipped accessible, documented components with Storybook + Figma parity. The design system storybook link can be found here:
https://ui.digital-ent-int.bt.com/latest/docs/intro

Statistics

66,000

Weekly inserts

6400%

Increase in usage

Figma = Github

1-to-1 Design tokens

Unified library

Merged 80 libraries

Establish why it was under-designed and under-utilised

The design system had been around for over 2 years, but it was hardly utilised, with less than 100 daily inserts. The first thing we did was to conduct user research and identify the key pain points for designers and developers.

Pain points

Figma components were unusable – The initial Figma library was built by an external development team with no collaboration with designers or developers. Since then Figma has had drastic feature updates but these were not reflected in the Figma components, meaning they were not purpose built and restricted their usage.

Lack of use case and structure for the components – The initial design system was purely built by a development team with no design input. This meant that no discovery work was carried out and use cases were not identified. For example, the CTA button only had an indigo fill, meaning that it was unusable when placed on top of an indigo background, and a lot of brand provided content is indigo.

No instruction on usage – The Figma library was simply a bundle of components dumped on a page in Figma. There was no guideline or instructions on purpose, usage, dos and don’ts for each component.

Step 1 – File structure

Figure out the structure of the design system files. The solution was to split up the Figma design system file...

Step 2 – 1:1 relationship for design tokens

Next we had to establish the 1-to-1 relationship for the design tokens between GitHub and Figma Foundation...

Here’s the same flow but cleaned up. Feel free to get in touch for an explanation.

Next, I worked with the development team to match the JSON file containing all the tokens into Token Studio and Figma...

Step 3 – Component research and creation

With the tokens in place, we swiftly moved onto the research phase...

Next we’d move onto the Figma build for the components...

Step 4 – Documentation and testing

With the tokens in place, we moved onto the research phase of each component...

Final result

A token-driven system with over 1000 component and variations, adopted by global product teams with measurable gains: faster delivery, consistent UX and accessibility by default.