06 Months
UI/UX Designer - Team of 03
Figma, Zeppelin
This is a representation of the work I did for the client. The original design system may differ in structure, content, or visuals due to confidentiality and project-specific requirements.
HDS (Hospital Design System) is a comprehensive design system built using the atomic design methodology. It consists of three core Figma libraries: Foundations, Iconography, and Components—housing over 50 scalable and reusable components. The system is WCAG 2.1 AA compliant, ensuring accessibility across all user interactions.
It was created for a leading U.S. healthcare network as part of their transition from a Power BI-based system to a fully web-based platform.
The client, a large network of hospitals across the USA, was transitioning from a Power BI-based dashboard to a scalable web-based system. This shift required a robust and consistent design foundation to ensure seamless user experience, visual consistency, and development efficiency across multiple hospital dashboards. Without a unified design system in place, maintaining consistency, accessibility, and scalability across products would be a major challenge.
Files
Components
Increase in handoffs
Primitive colors are the core foundational colors in a design system, serving as the base tokens from which all other color variations and themes are built for consistent and scalable UI design.
Semantic colors are purpose-driven colors in a design system, representing specific meanings like success, error, warning, or info, ensuring clear communication of status and actions across the UI.
Lato was chosen for its clean, modern, and versatile appearance. Its balanced letterforms enhance readability across various screen sizes, while its wide range of weights offers flexibility for creating clear visual hierarchy, making it ideal for both UI elements and content-heavy designs.
Material Icons along with some in house icons for their clean, minimalistic design and extensive library, which aligns well with modern UI aesthetics. They are highly versatile, scalable, and come with predefined guidelines, ensuring consistency and accessibility across different platforms and devices.
72 button variables were created for this system to ensure every button looks consistent, works well in all situations, and makes it easier for designers and developers to reuse them without reinventing styles each time.
Input fields were created with all states like default, focus, filled, and disabled, along with success, error, and helper messages to guide users and keep the experience consistent.
Apart from the core components like buttons and input fields, 50+ other components were created to bring this design system to life.
