Intro
Our company started switching to Figma last year. As part of the product team, we needed to move our designs into Figma and gradually build a design system and components library to make creating designs and demos more efficient.
At the start of the project, I collaborated with our senior designers, Emily and Eva, to define the project scope and establish the Definition of Done. Following that, I took the lead in organising and taking actions on the project tasks.
As a result, I developed a foundational Figma components library and page templates for key spaces such as Articles and Live Events pages. Additionally, I established a clear system that enables the team to efficiently reuse and contribute to future components.
Project type and timeline
Design system, 03/2023 to present
Product
BBC World Service
My role
UX designer, Project lead
ToolsFigma
Skills
Design system, Components design, Cross-functional collaboration, Problem solving
Learning and discovery phase
Transitioning from one tool to another is never easy, especially for a large organisation like the BBC.
Even within just one product team, there are numerous elements that must be documented, recorded, and archived. After sorting through and downloading our old files from Sketch, the World Service UX team began to identify the best starting point to achieve our ultimate goal: establishing an organised Figma design library.
As a team, we collectively decided to adopt the Atomic Design structure, which consists of several distinct levels: Atoms (the foundational elements), Molecules (small, functional components), and Organisms (larger components that may include other components), among others.
Audit
To understand the scope of the work and determine the best approach, I initiated an audit to gather examples of components from the World Service sites.
Case studies
Additionally, I looked at some existing design systems such as Adobe, Material Design, and Atlassian. This research helped me identify the functions of our components and categorise them into appropriate groups within our system, such as Status, Input, and Feedback. This process provided me with valuable insights and inspiration for developing our own design framework.
Practice and Working phase
Designing, building, and iterating on the initial components
To be honest, we are not starting from scratch, as the BBC World Service is an established product with existing experience design guidelines that we have been following. However, While BBC UK and World Service share the same guidelines, our different audiences mean that we cannot use the same components directly.
My tasks are two main parts: first, to create components for the existing World Service interface; and second, to explore how we can align with the BBC UK design system team and adapt their components for our use.
Audit for colour update
Following the BBC's 2022 rebrand, I noticed that some of the colours on the website were outdated.
For this, I worked closely with our engineer, Dario, to conduct a colour audit, which we then shared with the UX team to make a collective decision on necessary updates. We agreed to start by replacing the action colours, such as those for errors and alerts.
Working with multiple languages
It wasn’t easy to start, but I learned by doing.
To ensure I was using the most up-to-date specifications, I compared the design files, our live website, and Storybook details by inspecting them in the browser. Through this process, I gradually finalised the correct specs for each component and progressively built more and more Molecule components in Figma.