Designing accessible web components for Babylon Health

Babylon Health wants to put an accessible and affordable health service in the hands of every person on earth. However, our web components were failing us in this mission. This post will talk through what Babylon’s DNA design system team did to fix this as of March 2020.

What was wrong with the existing web components?

Homer Simpson reading a message before standing up and screaming in anger
Homer Simpson reading a message before standing up and screaming in anger
My reaction to finding out we had no existing web UI libraries

Luckily, our engineers were organised.

We needed a plan of action

First, Foundations.

3 key components followed: Buttons, Links and Inputs

Design principles and process

Design principles

Researching what was already out there

Share regularly, review often

An image of the team that included Amy Hupe, Jack Roles, Elliott Greaves, Linsey Fryatt, Fred Warburton, Ian Pouncey, Daniel Souza and Tom Palmer
An image of the team that included Amy Hupe, Jack Roles, Elliott Greaves, Linsey Fryatt, Fred Warburton, Ian Pouncey, Daniel Souza and Tom Palmer
The usual suspects in our design reviews. Amy Hupe, Jack Roles, Elliott Greaves, Linsey Fryatt, Fred Warburton, Ian Pouncey, Daniel Souza and Tom Palmer.

Atomic Thursdays

A screenshot of an interactive design review happening in the design tool Figma
The early stages of our card audit

Our base set of components

Button

An image of all the different button types we designed for our web platform
An image of all the different button types we designed for our web platform
Example of all our button types and states

Links

An image of all the different link types we designed for our web platform
An image of all the different link types we designed for our web platform
Example of our text links and it’s varying states

Text fields

An image of all the different text input types we designed for our web platform
An image of all the different text input types we designed for our web platform
Example of our text input and it’s varying states

Checkbox and radio controls

An image of the checkbox we designed for our web platform
An image of the checkbox we designed for our web platform
Examples of our checkbox controls
An image of the radio button we designed for our web platform
An image of the radio button we designed for our web platform
Examples of our radio controls, including an example to conditionally reveal content

Error placement

An image of how our error message works for different input types, including text input, check boxes and radio buttons.
An image of how our error message works for different input types, including text input, check boxes and radio buttons.
Examples of error placement on our input controls

Components in context

An example of all the input components put together on the sign up page
An example of all the input components put together on the sign up page
Sign up screen using the newly designed inputs

Theming

A screenshot of our storybook library, medkit
Experimenting with theming in our Storybook library, medkit

Documenting our components

A screen shot of the light weight documentation used in our Figma library
An example of the light weight documentation we included in our Figma library

Conclusion

Senior UI designer currently working on design systems and Babylon health. Previously designed things for Tesco.