Building the Zus Health Design System from the Ground Up
Zus Health | 0 → 1 Design System | Shipped 2022
A friendly note!
INTRODUCTION
Zus health - Design System
Zus Health is a shared health data platform that unifies patient records from sources like labs, EHRs, and pharmacies into a single, trusted profile for clinicians and developers.
Which means this product deals with complex healthcare data, timelines, conditions, encounters, care plans and each module was starting to develop its own look and feel. A design system ensured consistency across all surfaces.
I led the creation of Zus's first comprehensive design system to support a modular, scalable UI across teams and use cases.
PRODUCT
Web platform | Saas Application
SKILLS
UX Strategy & Product Thinking, Product & Interaction Design, Collaboration & Leadership, Validation & Impact
TIMELINE
2021 - 2022
TEAM
Bharat Pothula & Bhanu Kalyan (UXDs), Naveen Chevuru (PM), Ada Glover (Zus - CPO)
IMPACT
Helped secure $34M in funding
Product adopted by 60+ healthcare organizations. Source
Full length case study (See separate case study)
CONTEXT
How It All Started: From Proof of Concept to MVP
This project began with one clear goal: build a working prototype fast enough to test with real users and help the team secure funding. We had just four weeks to prove the value.
Instead of designing everything from scratch, I took a smart shortcut: I used the Pareto Library concept based on the Pareto Principle which allowed me to work with a pre-built set of UI components covering about 80% of what we needed. That meant I only had to spend effort on the remaining 20% to align everything with our brand and product needs.
Identified the key components needed for the kit during sketching sessions in our design sprint.
🙄
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).
FOUNDATION
Luckily, Zus had already established a basic branding direction…
like colors, typography, and general visual tone. It wasn’t a full system, but it was enough for me to create a simple, usable style guide that kept the team aligned.
I used those brand elements to define consistent patterns for:
Typography hierarchy
Color system and layout structure
Basic components like buttons, cards, and form fields
This foundation helped me scale quickly without sacrificing quality.
🙄
INITIAL SUCCESS
We delivered the Proof of concept! They got investors & we got the project!
It wasn't perfect, but it was clean, clickable, and clear enough to show what the product could become. That was the exciting part… but honestly, it’s where the real work began.
Healthcare design isn’t as simple as it looks. Once we moved past concepts and into actual product work, everything needed to scale. These weren’t just ideas anymore this was the foundation of a real platform.
THE ACTUAL DESIGN SYSTEM
So, Zus needed a Design System!
All the components we made earlier were kind of all over the place and to be honest, they weren’t fully thought through, but honestly.. they were just concepts back then!
But once we started building the real product, it was clear we couldn’t keep going like that. The project was growing fast, and we needed a proper design system to keep things consistent, scalable, and easier to manage.
As a lead designer, my goal in building the design system for Zus Health was to bring consistency and clarity across a platform that serves two distinct audiences Builders and Caregivers. With a unified visual language and interaction model, I set out to create a scalable, reusable system that not only enhances usability and supports accessibility but also strengthens brand trust in a clinical setting.
Ultimately, the system was designed to streamline the design-to-dev workflow, accelerate delivery, and support future customization for partner needs.
PROCESS
How I built the system?
Because most components were created ad hoc, we had multiple versions of the same UI elements cards, widget headers, chips, and navs. I audited and consolidated them into a unified system with clear variants, making the design more consistent, scalable, and developer-friendly.
Step 1 : Audit & Clean-Up
I started by auditing everything we had built for the MVP:
Defined consistent type, color, and spacing to unify components & a visual foundation for Zus’s brand direction
I cleaned up nearly 5 unused styles & this became our go-to color system.
🥰
Compared duplicated components across screens
Identified what was truly reusable vs. what needed to be retired
Mapped the most common UI patterns we were repeating
Before
🙄
After
🥰
Step 2: Consolidate & Rebuild
Next, I began consolidating components into one scalable system. For example;
Merged all card styles into a single Card component with clear variants (e.g. with/without icon, clickable, with footer)
Before - Don't judge me & my team now!
🙄
After - See we are good people!
🥰
Created unified components (for eg; Widget Header) with variants instead of scattered one-offs
After - See we are good people!
🥰
Standardized components like left navigation, tables, pagination, chips, and tags into atomic elements that could be reused everywhere
Before
🙄
After - See we are good people!
🥰
Step 3: Document & Systematize
To ensure it was scalable and usable by other designers and developers, we:
Named components and variants using a consistent, atomic system naming convention
Again I made this for the case study! Don't judge me!
🥰
Focused on keeping colors, spacing, and text styles consistent across the library so everything felt cohesive and was easier to build from.
Not just me but all designers(3) in the team wrote mini-usage guidelines in Figma so future teams wouldn’t need to guess.
Look at our detailing! I'm proud of my team
🥰
SCALING
Figuring out what to build (and how to scale it)!
Once we started building actual modules, it became clear that we'd need new components but also that we'd want to reuse a lot of what we'd already created.
This phase was all about being intentional: we approached each screen with an iterative mindset, reusing where it made sense, and renaming or restructuring components to better fit their context and make the system more scalable.
For example, in some new modules, we needed the form fields to be laid out horizontally instead of the usual vertical pattern so we adapted the component to support both layouts.
Reused wherever possible, rebuilt only when necessary
🥰
A NEW PROCESS
Changes like these came fast! So we need a smarter process…
We started adapting to a smarter intentional process for building new components one that balanced user needs, developer efficiency, and system consistency.
WHY - We need to speed up, reduce redundancy, make dev implementation faster, and ensure every component was grounded in real user needs not assumptions & guess what! IT WORKED!
Engineering is involved during the creation state as well
🥰
ACCESSIBILITY
Healthcare design = trust, clarity, and inclusivity.
From the start, I & our designers made sure accessibility wasn’t an afterthought, it was just part of the process.
I followed basic accessibility best practices across all components, focusing on:
Color contrast: Making sure text, icons, and UI elements met WCAG 2.1 AA standards
Text hierarchy: Using clear, readable typography with consistent sizing and spacing
Interactive states: Designing distinct hover, focus, and disabled states to support both mouse and keyboard users
Component structure: Ensuring layouts were clean and navigable, especially for screen readers and assistive tech
Form elements: Using proper labels, error states, and instructions to reduce confusion and improve task completion
IMPACT
No Longer on the Team, but the Impact Remains
because as the lead designer, I made sure what I left behind continued to create impact by
Building a scalable design system that supported product growth across multiple modules
Simplifying the design-to-dev workflow, reducing back-and-forth and speeding up implementation
Creating a clean, reusable components that brought consistency to a complex healthcare platform
Collaborating closely with other designers and engineers to ensure the system was easy to adopt
Leaving behind a fully functional, documented system that continued to ship even after my handoff
CHALLENGES
Challenges <> Clarity
Designing a system while building the product in parallel came with its share of messy realities. From cleaning up what was inherited, to ensuring handoff readiness under tight timelines, this project pushed me to prioritize clarity, collaboration, and scalability at every step.
Inheriting inconsistency: The proof of concept phase left behind many one-off components that weren’t scalable, making cleanup the first big hurdle.
Designing for two user groups: Balancing the needs of both Builders (internal users) and Caregivers (clinical teams) meant designing components that were flexible but not overwhelming.
Moving fast with limited structure: With no formal design system in place initially, I had to build structure while also designing features in parallel.
Documentation with velocity: Creating usable documentation while moving quickly required close collaboration and prioritizing clarity over perfection.
TAKEAWAYS
Takeaways
Start small, scale smart - Don’t aim for perfect just build what’s needed and grow from there.
Clear naming builds trust : Because I documented everything well, I could actually write this case study 😄 Good documentation helps your work hold up, even when you're not around.
Design systems are never done: They're living tools that evolve with the product and team.
Collaboration saves time - If engineers don’t build it, users never see it so involving them early and often made everything smoother and more efficient.
Design with foresight, but stay practical : I included variants and properties when components are likely to scale but stayed mindful of dev effort. If it’s reusable, I built it to flex. If it’s a one-off, I kept it simple.
