Building the Zus Health Design System from the Ground Up

Building the Zus Health Design System from the Ground Up

Zus Health is building a powerful platform to accelerate digital health innovation by aggregating patient data and enabling interoperability. I led the creation of Zus's first comprehensive design system to support a modular, scalable UI across teams and use cases.

Zus Health is building a powerful platform to accelerate digital health innovation by aggregating patient data and enabling interoperability. I led the creation of Zus's first comprehensive design system to support a modular, scalable UI across teams and use cases.

Overview

Zus Health is building a powerful platform to accelerate digital health innovation by aggregating patient data and enabling interoperability. I led the creation of Zus's first comprehensive design system to support a modular, scalable UI across teams and use cases.

Also checkout Zus project

Checkout Zus project

Also checkout Zus project

My goal in creating a robust design system for Zus Health was to establish consistency and coherence across the entire platform, which serves two distinct user groups: Builders and Care Givers.

Through a unified visual language and user experience, I aimed to create a robust, scalable, and reusable design system that enhances usability, strengthens the platform’s brand identity, and simplifies the design-to-development workflow.

Product

Web

My Role

Lead Product Designer

Timeline

Q2 2021 - Q1 2022

🖌️ Branding and creating a style guide

As Zus Health's lead product designer, I developed a design system integrating the brand identity to ensure consistency and usability across the platform.

"A strong brand can help healthcare organizations differentiate themselves from competitors and attract and retain patients"

To build a trustworthy brand, ensure design consistency, and improve coordination among designers and team members, I created a Style guide based on material guidelines. Here's how I translated the Zus branding -

To build a trustworthy brand, ensure design consistency, and improve coordination among designers and team members, I created a Style guide based on material guidelines. Here's how I translated the Zus branding -

To build a trustworthy brand, ensure design consistency, and improve coordination among designers and team members, I created a Style guide based on material guidelines. Here's how I translated the Zus branding -

Not a linear process but it worked :)

Even though we started with MVP, and have our research & wireframes established along the golden path, we've identified a crucial challenge in maintaining design consistency.

Having multiple designers working independently could lead to inconsistent component variations across screens, highlighting the need for a standardized design system. Since this platform was being built from scratch, it didn't make sense to create every single component from scratch too.

I've utilized the Pareto Library concept, inspired by the Pareto Principle—where 80% of components come pre-made with variants, colors, and grids, requiring only 20% effort to align them with our brand.

I've utilized the Pareto Library concept, inspired by the Pareto Principle—where 80% of components come pre-made with variants, colors, and grids, requiring only 20% effort to align them with our brand.

What is Pareto library?

The primary goal was to find a Healthcare UI Kit that already contained basic components. This allowed me to start designing without having to create every single component from scratch. However, this approach was only intended for the screens in minimum viable product (MVP).

Identifying the components find & use

Drew an example table to understand what parts we might need in designing the mocks.

→

→

Documentation

Documented all states with detailed information to guide future designers and developers

Challenges

Designing a comprehensive design system came with significant challenges.

The primary hurdle was maintaining consistency across the platform while adapting to different user needs. I aimed to a framework with create strict guidelines while leaving room for creative solutions to balance the flexibility and uniformity.

To ensure compliance with HIPAA regulations and healthcare web accessibility standards, I implemented several key design considerations:

  • Color Contrast and Typography: Maintained WCAG 2.1 AA standards for text contrast ratios and selected fonts for maximum readability.

  • Color Contrast and Typography: Maintained WCAG 2.1 AA standards for text contrast ratios and selected fonts for maximum readability

  • Keyboard Navigation: Designed clear focus states and logical tab ordering for users who cannot use a mouse.

Keyboard Navigation: Designed clear focus states and logical tab ordering for users who cannot use a mouse

  • Screen Reader Compatibility: Incorporated proper heading hierarchy and ARIA labels for essential elements.

  • Screen Reader Compatibility: Incorporated proper heading hierarchy and ARIA labels for essential elements

  • Form Design: Created accessible form controls with clear error states and helpful instructions.

  • Form Design: Created accessible form controls with clear error states and helpful instructions

  • Data Privacy: Implemented visual cues and warnings for sensitive information handling in compliance with HIPAA.

  • Data Privacy: Implemented visual cues and warnings for sensitive information handling in compliance with HIPAA

  • Documentation: Provided comprehensive guidelines for developers to maintain accessibility standards during implementation

Outcomes

Although I started with a basic design system, cleaning it up and retaining only essential components was a significant challenge. Since the engineering team needed working specifications clearly communicated actively developing the system, clear communication was crucial to ensure they knew which version to reference and what changes were in progress.

Despite these challenges, the process was very rewarding as I developed a comprehensive framework that improved user experience while streamlining the design process for our entire team.