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
COMPANY
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
450+ Interactive & connected components
1500+ Component variables
150+ High-fi screens
20+ Interactive prototypes
Impacts
Higher level of consistency for designs.
Increase velocity and quality for the Design team.
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".
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.