Design System

As the UX/UI Lead at the British Heart Foundation (BHF), I’m currently spearheading a comprehensive overhaul of our design system. This ambitious project aims to address long-standing issues and implement innovative solutions to enhance efficiency and collaboration across our digital platforms.

The Challenge

Our Figma-based design system, in use since 2018, has been facing several challenges. Over time, it has grown to an unwieldy size of over 400 components, suffered from a lack of governance, and fallen out of alignment with our codebase. We’ve also identified that we’re not fully leveraging Figma’s advanced features, such as tokens and local styles.

Our Approach

We’re in the process of rebuilding our entire design system from the ground up. After careful consideration, we’ve opted for a bespoke structure that aligns with our specific needs, rather than adopting an existing framework.

A key focus of our new system is the implementation of dual-purpose documentation. We’re developing detailed build instructions for developers alongside comprehensive usage guidelines for content designers. This approach ensures that both groups have the information they need to work effectively within the system.

Innovations in Progress

One of the most significant improvements we’re currently implementing is a comprehensive design token library. While it’s proving time-consuming to set up, it will allow us to update fundamental elements system-wide and streamline updates to the codebase via JSON files. This approach should significantly reduce our dependency on developer intervention for style changes.

Looking Ahead

As we continue to develop our new design system, we’re already planning for future enhancements. We’re exploring ways to manage design token changes via GitHub, which we believe will further minimise the need for developer involvement in style updates.

We’re also in the process of establishing a robust change management system. This includes creating integrated changelogs for each component and template, linked to Confluence pages for tracking requests and approved changes. We’re developing contribution models to guide change requests and set expectations for timelines and impact.

Ongoing Work and Future Goals

While we’ve made significant progress, there’s still much work to be done. We’re aiming to complete documentation for all components and templates by the end of 2024. In the meantime, we continue to refine and optimise the design system based on feedback and evolving needs.

Our ultimate goal is to create a more manageable and adaptable system that’s well-positioned for future growth. We anticipate that this revamped design system will yield improved efficiency for both developers and content designers, enhance consistency between design and code, and optimise our resources.

This ongoing project demonstrates our commitment to addressing legacy issues, improving cross-functional collaboration, and setting the stage for long-term efficiency and scalability at the British Heart Foundation. By reimagining our design system, we’re not only tackling current challenges but also positioning ourselves for future success in the ever-evolving digital landscape.