UX Case Study: Risant Design System for KP
Project Scope:
The Risant Design System was developed for healthcare vendors, including hospitals and healthcare systems, to provide a comprehensive, ADA-compliant, and A11y-aligned design system. The goal was to create a scalable, accessible design that addressed healthcare-specific needs while adhering to WCAG AA and AAA standards. The system needed to be flexible and customizable, enabling healthcare vendors to white-label and adapt it for their own unique use cases, while ensuring responsive design across mobile, tablet, and desktop platforms.
Role: Senior Product Designer
Team: 2 Designers (myself and one other), collaborating closely with developers, product managers, and stakeholders
Duration: March 2024 – Present
Problem Statement:
Healthcare vendors required a scalable, customizable design system that prioritized:
Accessibility compliance: Adhering to WCAG AA and AAA standards to ensure access for patients with disabilities.
Customization: Allowing healthcare vendors to white-label the design system, adapting it to their branding and functional needs.
Responsive design: Seamless performance across mobile, tablet, and desktop devices.
Complex healthcare requirements: Compliance with HIPAA, security standards, and usability in high-stress environments.
Research and Discovery:
Design Audit
We began with a comprehensive design audit of existing design systems in healthcare and other industries. The audit included:
ShadCn
Kaiser Permanente’s Vessel Design System (KP’s native design system)
Adobe Aria (Adobe’s Design System)
This audit helped us analyze how these systems handled accessibility, customizability, and scalability. While each system had its strengths, none fully met the healthcare-specific requirements needed for Risant Health’s design system, particularly in terms of accessibility and customization.
Key Insights:
Accessibility gaps: While some systems adhered to basic accessibility standards, many did not fully comply with WCAG AA and AAA standards, which are critical in healthcare.
Customization limitations: Few systems provided the level of white-labeling flexibility required by healthcare vendors to adapt the system to their unique branding and functional needs.
Mobile responsiveness: Many systems lacked the seamless transition needed for mobile and tablet devices, which is essential for healthcare professionals working in varied environments.
The Vessel Design System stood out as meeting the majority of use cases specific to the healthcare industry, particularly in terms of scalability, component flexibility, and regulatory alignment.
Component Structuring and Foundational Design
Laying the Foundations: Component Structuring
Building on the insights from the design audit and user research, we established the foundational structure of the design system. The core components—color palette, typography, and grid systems—were designed to ensure consistency, scalability, and adaptability across all platforms.
Color Palette
We designed the color palette with accessibility at its core. Using tools such as Stark, Contrast Ratio Calculators, and other accessibility-focused design tools, we ensured compliance with WCAG AA and AAA standards. These tools allowed us to measure and validate the color contrast ratios throughout the design process, making sure the palette provided sufficient contrast for users with visual impairments.
We chose muted blues, greens, and neutral grays. These colors were specifically selected to reduce cognitive load for healthcare users, aligning with the industry’s focus on trust and clarity. Additionally, the high-contrast combinations were essential for ensuring readability for users with visual impairments. The use of accessibility tools helped us to continually verify that the color choices met the required contrast ratios to enhance user experience, especially for those with vision difficulties.
Laying the foundation of the color pallette to be used in the Risant Design System
Typography
We selected Gotham as the primary typeface for its clarity and versatility. Its clean, geometric shapes provide excellent readability across all screen sizes, making it suitable for both quick scanning of data and long-form medical text.
Why Gotham?
Gotham balances professionalism and approachability, which is crucial in healthcare. Its thickness and spacing allow it to remain legible even in smaller sizes, ensuring accessibility for all users, including those with visual impairments.
Grid Systems
We worked with front-end developers to establish grid systems and breakpoints for the Risant Design System. The grid system ensures consistency across platforms while allowing flexibility for modular components.
Why This Grid?
The 12-column grid for desktop and tablet, and a 4-column grid for mobile, provide a scalable structure that ensures content is well-organized and legible across devices.
Screenshots of grid systems and responsive layouts can be placed here.
Reusable Components
With the foundational elements in place, we developed reusable components such as buttons, form fields, and navigation elements. These components were designed to be modular and customizable, adhering to WCAG AA and AAA standards while remaining flexible enough for healthcare vendors to adapt to their needs.
Examples of Components:
Buttons: Designed with high-contrast color options and clear labels for accessibility, with light and dark mode options.
Form Fields: Optimized for usability, ensuring ease of use for patients filling out medical forms, with large hit areas and clear error messaging.
Navigation Elements: Streamlined to reduce cognitive load and ensure quick access to critical information for healthcare providers.
These components ensured that the system was both scalable and adaptable, allowing healthcare vendors to customize the platform while maintaining high accessibility standards.
Once the foundational components were established, we created wireframes and high-fidelity prototypes using Figma. These prototypes helped ensure that the design system functioned seamlessly across all devices and use cases.
Key Features:
Modular design: Reusable components, including buttons, form fields, and navigation menus, which could be customized by healthcare vendors.
Prototypes for multiple devices: Responsive prototypes for mobile, tablet, and desktop to ensure consistent user experience across all platforms.
Color Palette: High-contrast color palette designed using accessibility tools to meet WCAG AA and AAA standards.
We also implemented light and dark themes for buttons, full foreground and background light/dark modes were identified as areas for future improvement.
Collaboration with Front-End Teams for Hand- Off
As the Risant Design System was being created for Risant Health, a startup within Kaiser Permanente, it required close collaboration with front-end developers to ensure scalability and ease of implementation.
Detailed component documentation: We provided developers with high-fidelity prototypes and detailed component documentation to streamline the handoff process.
Governance documents: We developed governance documents to guide the long-term management and scalability of the system, ensuring it could evolve as vendors’ needs grew.
Continuous feedback loops: Developers provided real-time feedback during implementation, allowing for iterative adjustments to component functionality. This collaborative process was crucial to ensuring that the design adhered to both healthcare industry standards and accessibility guidelines.
Screenshots of governance documents, Figma prototypes, and collaboration workflows can be inserted here.
Iterations and Feedback
Throughout the project, we gathered feedback from both internal teams and healthcare vendors, leading to continuous iterations of the design system. One key area identified for improvement was the expansion of light and dark themes beyond buttons, to include the entire system's foreground and background elements.
Usability testing with patients with disabilities validated the accessibility features, allowing us to refine the system further based on real-world usage.
Screenshots of iterative improvements and planned enhancements (e.g., light and dark modes) can be inserted here.
Final Outcome
The Risant Design System was successfully launched and adopted by several healthcare vendors. Key results included:
30% improvement in accessibility compliance, validated through internal and vendor audits.
15% reduction in user drop-offs for users with disabilities, particularly on mobile devices
Future Improvements
While we successfully implemented light and dark themes for buttons, we identified full foreground and background light/dark modes as an area for future enhancement. Expanding these modes across the entire system will improve readability and usability in various lighting environments, particularly for users with visual impairments or those working in high-stress medical settings.