[showcase]
Project
As products mature and evolve, their design systems often struggle to keep up—leading to inconsistencies, inefficiencies, and a slower pace of innovation. With our company transitioning to Figma, the product team faced a key opportunity: to not only migrate existing designs but also build a robust, reusable design system from the ground up.
In this project, I led the effort to redefine the design system for a well-established product with a growing user base and legacy UI components. My goal was to create a scalable, modern foundation that not only improved design consistency and usability but also empowered cross-functional teams to build faster with greater confidence. This case study details the challenges we faced, the principles that guided our work, and the outcomes that helped rejuvenate the product experience—without disrupting what users already trusted.
My role
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, Media pages and Live Events pages. Additionally, I established a clear system that enables the team to efficiently reuse and contribute to future components.
Time
03/2023 to present, continuous UX hygiene side project
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.
[Case studies & Audit]
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.
To understand the scope of the work and determine the best approach, I also initiated an audit to gather examples of components from the World Service sites.
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.
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.
[Multi languages approach]
Working in the World Service context requires me to ensure that we test components with key languages during the design process.
After building key components (Molecules and Organisms), I invited my team to test and experiment with them. We gathered valuable feedback by applying these components to real-world use cases (Pages).
Developed guidelines for future use by designers, engineers, and journalists.
As I gained more experience and became familiar with our product, I reflected on how we used the components, assessing their flexibility and responsiveness for other users.
I hosted several Figma sharing sessions, inviting my team to explore and provide feedback. Additionally, I created a wireframe version, drawing inspiration from other product teams within the company.
Making iterative improvements for scalability and adaptability
Created templates and a sample page for the team, accommodating multiple languages.
Impact to the team
The foundational components library significantly improved the team's efficiency in creating quick demos and wireframes, enabling us to share ideas more effectively with the wider product team.
I hosted several Figma sharing sessions, inviting my team to explore and provide feedback. Additionally, I created a wireframe version, drawing inspiration from other product teams within the company.
Next
