UI elements.png

Building a white-label design system to scale across branded web and mobile apps

As a Saas product in the digital healthcare industry, LifePlan addresses patient success in various therapeutic areas, such as chronic kidney disease, multiple sclerosis, and maternal health.

When I joined Ayogo in January 2021, one of the biggest challenges was to create a white-label product that appeals to a broad demographic and can adapt to any brand's style guide.

Overview

MY ROLE
  • Planning & implementation

  • UX & UI Design

  • Accessibility & Usability

  • Documentation

TIMELINE
  • January - March 2021
    First launch

  • Mar 2021 - present
    Maintenance and updates

TOOLS

Figma

Notion

 

Outcomes

Components.png

450+ Interactive & connected components

1500+ Component variables

Screens.png

150+ High-fi screens

20+ Interactive prototypes

Impacts

consistency.png

Higher level of consistency for designs.

velocity.png

Increase velocity and quality for the Design team.

overhead.png

Minimized design and development overhead.

CONTEXT

What is a white-label healthcare product?

Usually, a digital healthcare product focuses on the end-users -- patients and healthcare professionals in a specific therapeutic area. But a white-label healthcare product must consider two groups of users, the end-users and the company buying the product. 

Ayogo works with healthcare companies that are experts in various therapeutic areas. Each client's product shares the LifePlan design components but is developed with unique branding, content, and feature set. LifePlan is designed to be re-branded that each product speaks to the client's distinct end-user groups.

In order to be re-brandable without compromising the client brand's identity, LifePlan needs a flexible design system that can adapt to different "skins".

3 Apps Mockup.png

This is how an education page looks in different client apps.

White-Labeled ➡️ Renal ➡️ Maternal

 
GOAL

Implement a design system with scalable UI libraries.

To quickly prototype and produce consistent designs, the design team needed reusable and standardized UI components. In addition, we need to efficiently launch, update and maintain the UI library as we scale up with rebranded UI components for new clients.

Challenge
Is Figma the right tool?

The design team had just moved from Sketch to Figma, so I started by investigating the relevant Figma functionalities. Figma's published library and interactive components are great for creating reusable components and reflecting library updates instantly. It also offers ample space for annotation & documentation.

Challenge
How to manage conflicting priorities?

I was one of the 3 designers, 2 researchers, and 10 developers working on the LifePlan product team. The deadlines were tight and I had to work on the design system alongside product feature designs.

To deliver on time, I prioritized an essential set of components to create, test, and implement. As new feature designs took place, additional components were tested and added to the design system.

 

I use Notion to track and plan priorities.

RESEARCH 

What is a good design system for LifePlan?

Gather requirements

"Component updates or additions should be simple so that designers and developers get the latest without much wait."

"Easy-to-use for designers."

"A source of truth for designers and developers."

Establish guiding principles

Scalability

Support different structures across mobile and desktop; customization with minimum configuration and code change.

Accessibility

Inclusivity

Comply with WCAG AAA standards.

Usable for diverse user groups.

 
PLANNING

Set hierarchy using the Atomic Design System

Where it succeeded: happy designers

The Atomic Design Methodology was very helpful when I initially started thinking about the framework -- it offers a way to group components, creating a clean separation between structure and content. 

I structured the system into 6 levels: Atoms, Molecules, Organisms, Templates, Pages, and Snowflakes ❄️. This sets the foundation for a scalable and robust white-label design system.

This is what the library looked like initially:

Where it failed: confused developers

When I showed the initial layout to developers, I found out that designers and developers have different ideas about what could be a molecule and what could be an organism. Simply grouping them following Atomic Design can lead to confusing communication and hinder implementation.

Instead, I grouped the white-label components by design patterns in one Figma file. Each page is named to reflect the components and the pages are sorted alphabetically.

If you are interested in reading the complete case study, please contact me.