DNA Design System

Latest iteration of DNA

Context

Babylon Health was a digital health provider that leveraged AI and telemedicine to deliver healthcare services via an app. Founded in London, it expanded globally, serving over 24 million people across 16 countries.

The software is still used today by EMed Healthcare, a US-based telehealth company that acquired Babylon Health assets.

Challenge

In 2019, Jane Austin, Director of Product and Design, hired me to setup the Design Operations team. When I joined, I was assigned two objectives:

  1. Drive the strategy and adoption of their design system
  2. Enable innovation and collaboration across design disciplines and product teams

I built and led the Design System team, developed the strategy, secured funding, and integrated it into the product development process, driving its adoption across all products.

Selling the value of the design system

For Babylon's design and product leadership, the design system represented a strategic asset to accelerate value delivery to patients. After auditing the current system and working with tech and brand outlining a strategy, I presented the pitch to the CEO:

"By adopting unified component libraries, we can reduce the time from idea to code by 20%."

This was in alignment with the company focus on operational efficiency, rapid market responsiveness and desire to provide a fully accessible digital experience.

Due to decentralised nature of product and tech teams at the time, our biggest challenge was to integrate new ways of working in the established product development cycle.

Approach

  1. Pilot adoption across all consumer-facing apps and websites
  2. Position the Design System as a product and Design Operations as the product owner
  3. Build a cross-functional team to support development and adoption

Critical Factors

  1. Engineering and Product Management support to ensure proper resource allocation in the daily work
  2. Continuous updates to component libraries aligned with the development of new features
  3. Buy-in from Product Leadership at roadmap level with one single shared OKR's.

Milestones

Brand Audit - Aligning existing brand language with accessibility standards was the first step. I partnered with brand and marketing teams to assess and evolve the brand guidelines and how they were applied in digital properties

Stack Simplification - There was a complex workflow across multiple design tools (Sketch/Zeplin/Abstract), multiple UI and code libraries. We started consolidating all UI kits and we migrated to Figma for streamlined collaboration

Visual Language evolution - After the initial audit, we were still lacking cohesion. We invested in a custom typeface, illustration guidelines, icon libraries, and redesigning core components (forms, cards, buttons, lists) across all touchpoints

Reviews and contribution - In order to drive contribution to components in weekly BAU work, we redesigned the product and design reviews, including engineers in the contribution process.

Reviews approach Amy Hupe, former Product Manager, shares how teams contributed to DNA in this post

Code Refactoring - To improve usability and accessibility issues, we refactored existing components, adopted design tokens and new QA practices

Documentation - While Zeroheight was helpful for our initial documentation, we developed a custom documentation website with PWA, SSR, and CI/CD integration. This helped us to test our components in production environments (breaking changes)

Scalability - To support internal products, clinician systems and partner requirements (NHS, Bupa and Mount Sinai) we implemented theming capabilities.

Results and Impact

  • Achieved the targeted 20% reduction in lead time from idea to code in 6 months
  • Improved product quality, consistency and accessibility across the platform.
  • Played a crucial role in Babylon's rapid COVID-19 response capabilities

The Babylon DNA design system was instrumental in allowing us to put our new COVID flows in production quickly and easily, to experiment and iterate — focusing on nailing the content only, while relying on a robust design library. It’s also allowed us to prototype concepts really fast, for the next phase of COVID Care Assistant.” Catarina Afonso, Design Manager

Lessons Learned

  1. Integrating user research into the design system development process enhanced the adoption - this was particularly important with engineers.
  2. Community building is essential for widespread acceptance and utilisation of the design system. And for that, quality documentation and content is pivotal.
  3. Close collaboration with product management and engineering teams during planning activities ensures the design system remains aligned with business objectives and technical feasibility over time

Recognition

I hired Daniel to help me scale and operationalise the design and research teams at Babylon, and to build an amazing culture - all of which he achieved with great success. He took our nascent design system and turned it into a power house, putting all the structures and processes in place and using it to finish the rebrand we had been struggling to complete. And he programme managed the whole process. He put tools and structures in place to help us as a team to deliver at speed and at scale. \ Jane Austin, Product and Design Director

Team

Elliot (Engineer), Jack Roles (Lead Designer), Tom (Design Manager), Lindsey (Content Designer), Gisele (Brand) Fred Warburton (Accessibility Specialist), Amy Hupe (Product Manager), Filipe (Illustrator), Paulo (Product Designer). We were lucky to have support from Tetralogical (Accessibility) and Dex01 (Design)