Setting up a Design System for a Cross-Platform Healthcare Product

Dr-Link-Banner-Image Banner-Image-Not-Cropped

Setting up a Design System for a Cross-Platform Healthcare Product

Project Description

YLD partnered with a bespoke healthcare technology company* to help redesign the user interface and improve upon the UX framework of their cross-platform product. This eventually evolved into the creation of a Design System and the introduction of DesignOps, resulting in a cultural shift in their entire organisation.

Project Description

Our Approach

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.

Seamless.

Empowering.

Universal.

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.

Visual-language

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.

notosans

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.

Visual-language-colour

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.

Visual-language-illustration-1
Visual-language-illustration-2
Visual-language-illustration-3
Visual-language-illustration-4

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.

Prototyping-fast-iteration

New design methodology

Baseline grid

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.

Baseline-grid

Base unit

The base unit of 6px helped us tie in all of the UI components with typography and make the process of deciding on the sizing and spacing of components faster by eliminating any guess work.

Base-unit

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.

Automated-design

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.

Documentation

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.

Extensive-documentation

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.

Alligning-design-and-engineering-button

Properties
Height: 54px
Minimum width: 150px
Top margin: 18px
Bottom margin: 18px
Corner radius: 27px
Border: 1px

Text style: NotoSans Bold
Text size: 16px
Text line height: 24px
Text top: 15px
Text bottom: padding 15px
Text left padding: 24px
Text right padding: 24px

Tokens
$height-button
$width-button-minimum
$margin-button
$corner-radius-button
Border: 1px

$text-size-body
$text-lineheight-body
$padding-text-button

Reaping the immediate rewards

Having the Design System in place began to reap rewards instantaneously. The first immediate improvement was in the communication between the design and engineering teams. Ambiguity between the two teams was successfully reduced, leading to a much quicker and more accurate turnaround, substantially improving the clarity of content, brand recognition and user trust.

Reaping-the-immediate-rewards

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.

Documented content layout

Product-blueprint-1

Product implementation

Product-blueprint-2

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.

Our Impact

By utilising user-focused, evidence-based data to guide the logic and reasoning behind a polished and engaging interface, we enhanced and expanded the core features of the product. We concluded our work by establishing a solid foundation from which the healthcare technology company could build on, adapt to, and thrive.

*Disclaimer: This brand is inactive as a result of being acquired by a different company.


Featured work


Central Working case study preview image

Central Working

Central Working: Changing how you work

Central Working

Central Working: Changing how you work

We dug deep into Central Working’s core values to rebrand and redesign their digital and printed marketing materials in a way that personified the company character.


Joyent case study preview image

Joyent

Application awareness for Joyent

Joyent

Application awareness for Joyent

We created an application management platform that incorporates Joyent’s cloud infrastructure service and application orchestration software, ContainerPilot.


Canon case study preview image

Canon

Canon: giving stories a new form

Canon

Canon: giving stories a new form

We built a three-dimensional VR product, that created a new way to experience photographs, and the memories connected to them.

Find us

London - HQ

9 Dallington Street

London

EC1V 0LN

+44(0) 203 514 4678

hello@yld.io

Lisbon

Rua Ramalho Ortigão 8

3º Esquerdo

1070-230

Lisboa

Porto

Rua Sá da Bandeira 819

2º Esquerdo

4000-438

Porto