Crossbrand Design System for Healthcare
2024-2025
Web Design, Design System
Role:
UI Designer, Product Designer
Project overview
Large healthcare organizations managing multiple services often face challenges in maintaining a consistent digital experience across their websites. With over 20 distinct services including hospitals, clinics, and specialized health programs, the client needed a design system that balanced uniformity with flexibility, ensuring brand cohesion while accommodating diverse audience needs.
Challenges
Lack of Branding & User Experience
The original sites were built in SharePoint with minimal UX considerations. Each service operated its own website, leading to inconsistencies in brand identity, content architecture, and page structure.
Scalability & Maintainability
As the number of programs grew, the demand for additional websites increased, making it increasingly difficult to maintain consistency, governance, and long-term scalability across all programs and sub-brands.
Accessibility & Cultural Sensitivity
As a healthcare network, the design system needed to prioritize inclusivity—ensuring compliance with accessibility standards while thoughtfully incorporating Indigenous representation within the province.
Solutions
Universal Component Library
A centralized library of reusable UI components—buttons, forms, navigation elements—ensured a consistent look and feel across all sites while maintaining accessibility and usability standards. By collaborating closely with the development team, the component library stays aligned with Drupal’s CMS, ensuring consistency at all levels—from optional elements within components to built-in spacing in Figma. This streamlined approach makes the UX design process faster and more efficient for all future sub-brand websites.
Customizable Design System with Design Tokens
While core UI components remained standardized, each service could personalize its website with distinct color themes, icon styles, and imagery, maintaining its unique identity without compromising the system’s integrity. By leveraging CSS variables (design tokens) on primitive elements like color, spacing, and border radius, designers could apply flexible theming across multiple brands, allowing for quick adaptations without extensive redesigns for future sites.4o
Living Documentation & Guidelines
A comprehensive style guide ensured that designers, developers, and content editors could effectively implement and maintain the system. Regular updates allowed for continuous improvements.
Accessibility & Cultural Representation
A comprehensive style guide ensured that designers, developers, and content editors could effectively implement and maintain the system. Regular updates allowed for continuous improvements, keeping the design system adaptable to evolving needs.
Results
Improved Brand Cohesion – All healthcare websites now share a unified design language while retaining service-specific customizations.
Enhanced Usability & Accessibility – Standardized components streamline the user experience and ensure WCAG compliance.
Scalable & Maintainable – The system supports long-term scalability, making new website rollouts more efficient.
This project reinforced the power of design systems in creating scalable, accessible, and visually cohesive digital experiences for complex healthcare organizations.
Project Credit
Studio: Evolving Web
Content Strategies: Adrienne Smith
Art Director: Morgan Guegan
Product Designer: Yue Lu, Bryenne Kay
UX Lead: Annika Oeser
Tech Lead: Don Angelo Lalicon
