Zus health - Design System
A complex healthcare can be easy when it's customisable :)
"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 -
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.
So tried utilising a concept known as the Pareto Library, inspired by the Pareto Principle.
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).
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
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
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
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.
