Setting up a Design System for a cross-platform healthcare product

Finding common ground

We conducted a series of interviews with different stakeholders to capture a wide spectrum of beliefs, motives, intentions and expectations regarding both the company and the product.

By finding common ideas and resolving differences together, we came up with a set of principles that guided everyone in the company, not just the design or engineering teams, by outlining criteria for value, quality, and success.

The product principles

These broad principles ensured that the product was seamless, empowering and universal to all users.

We were able to benchmark all subsequent design decisions against these principles.

A new visual language

We assessed the existing UI components and patterns from a usability and aesthetic perspective to improve upon them. Using our principles and feedback from users, we completely redesigned the UI and visuals to establish a consistent look that matched the new principles.

During this process, we found differences between the design files and the actual code, and fixing these helped bring design and engineering closer together.

Typography

‍The original typeface was replaced with the open-source Noto Sans - a highly supported typeface characterised by a sound balance between form and function, which offered the global versatility of including over 800 languages.

Colour

‍We saw the blank canvas as a chance to revitalise the client's colour palette, honouring the legacy of the original brand's emphasis on its connection to the UK's NHS. The new colour offered a stronger, modern and confident identity to the visuals and also helped the product gain the highest degree of visual accessibility.

Illustrations

‍YLD enriched the product with a variety of custom illustrations to further lift the brand’s character by offering visual delight and conveying abstract concepts succinctly.

Protoyping and fast iteration

While developing the initial UI elements, we engaged with users for feedback through testing, identifying effective components and patterns. Simultaneously, we evaluated the product's alignment with user needs, expectations, and business goals by analysing feedback gathered from usability testing and customer surveys. As a result, we consolidated the patterns that worked into the flourishing Design System.

The detailed method allowed us to gather a range of effective layouts and composites, confident of their performance. We continued this practice as the product grew, constantly adapting to test larger considerations, such as user flows and journeys

New design methodology

By implementing a baseline grid we were able to implement an invisible structure that helped us organise graphic components vertically and contributed to consistency of the layout. We made a grid by choosing a value that works well with the line spacing in typical text elements. Since the most common text sizes are 24px for body text and 42px for titles, we decided on a baseline grid of 6px. This lets us divide the space vertically without making it too complicated.

‍

Automated design

We added standard padding to our design elements and used Sketch's scaling features to automate much of the production process. This turned components into easily stackable blocks. The standard padding not only boosted the quality and consistency of our design work, but also made the process faster, freeing up time to focus more on refining user flows and behaviours.

‍

Documentation

As the Design System expanded, the process of creating visual components was standardised by writing a small set of clear design rules that could be understood and applied not only by designers, but also engineers, regardless of their level of expertise.

Extensive documentation

We further detailed and backed up these guidelines with thorough documentation for each component in the Design System. This helped avoid unintentional design choices and maintained consistency in the product. It also ensured that these guidelines could be accessed and referred to even after we completed the project. This approach gave every design team member a true sense of co-authorship, ensuring all expertise was considered and leveraged.

Aligning design and engineering

As we had identified early on in the process, improving the collaboration with the client’s engineers was imperative to the product’s success. They enthusiastically backed the Design System allowing us to create a shared language with consistent naming conventions and design tokens across both design and development. To ensure a smooth transition, YLD initiated a handover process and set up a Q&A forum.

The product blueprint

Documentation was the cornerstone for these substantial leaps forward, which helped form the blueprint of the Design System and thus the product. The aforementioned need for the Design System to resonate with users from different disciplines and levels of expertise was realised when we were able to easily onboard numerous new joiners within both design and engineering without issue.

Improving our process

Several things can disrupt a Design System, such as wrong or unapproved components being added, to neglecting documentation. To avoid this, we consistently strengthened and improved our processes.

An internal design team review was established to highlight new components and ensure visual continuity. Regular design and engineering reviews increased the transparency of work and ensured that both disciplines were aligned.

While Design Systems enable the creation of consistent, scalable products, they require a team, constant maintenance and the correct processes to support them. It was an important takeaway, but ultimately, Design Systems can be fallible because we can be fallible.