Contact Deacon

HealthTech

Building the Wello Design System: A Unified Approach

Led the development of the Wello Design System for the MRP project. Adopted a component-based approach with React, utilizing an 8pt grid and Figma variants.

Industry

HealthTech

Headquarters

Calgary

Founded

2011

Company size

50-101

Go to Design System

Challenge

Wello, a telemedicine platform catering to both patients and healthcare professionals, required a unified design system that could efficiently support multiple platforms (web and mobile) for distinct user groups: patients and staff. The main challenges included:

Inconsistency Across Platforms: With different teams designing the patient and staff portals, maintaining a consistent visual language was difficult. There was a need to unify colors, typography, icons, and UI components across all interfaces.
Scalability and Flexibility: Wello’s product team needed a system that could easily scale as new features were added or existing ones were updated. Existing designs were becoming increasingly difficult to maintain, leading to design debt and inefficiencies.
Accessibility Compliance: As a healthcare platform, Wello needed to meet WCAG 2.1 Level AA standards to ensure inclusivity for all users, including those with visual impairments.
Design-Development Alignment: A seamless handoff between design and development was crucial. Prior methods resulted in frequent misalignments and inconsistent implementations, leading to more rework and longer development cycles.

Inconsistency Across Platforms: With different teams designing the patient and staff portals, maintaining a consistent visual language was difficult. There was a need to unify colors, typography, icons, and UI components across all interfaces.
Scalability and Flexibility: Wello’s product team needed a system that could easily scale as new features were added or existing ones were updated. Existing designs were becoming increasingly difficult to maintain, leading to design debt and inefficiencies.
Accessibility Compliance: As a healthcare platform, Wello needed to meet WCAG 2.1 Level AA standards to ensure inclusivity for all users, including those with visual impairments.
Design-Development Alignment: A seamless handoff between design and development was crucial. Prior methods resulted in frequent misalignments and inconsistent implementations, leading to more rework and longer development cycles.

Goal

The primary goal of the Wello Design System (Wello DS) was to create a unified, scalable framework that:

Ensured visual and functional consistency across both the Patient and Staff Portals.
Implemented a tokenization system to enable quick adjustments and maintain consistency in UI elements.
Provided a 1-1 sync between design (Figma) and development (Storybook) to facilitate smooth handoffs and reduce rework.
Integrated accessibility best practices into every component to ensure compliance with WCAG standards.
Supported flexibility for the design team to iterate and expand on the system as Wello's needs evolved.

The primary goal of the Wello Design System (Wello DS) was to create a unified, scalable framework that:

Ensured visual and functional consistency across both the Patient and Staff Portals.
Implemented a tokenization system to enable quick adjustments and maintain consistency in UI elements.
Provided a 1-1 sync between design (Figma) and development (Storybook) to facilitate smooth handoffs and reduce rework.
Integrated accessibility best practices into every component to ensure compliance with WCAG standards.
Supported flexibility for the design team to iterate and expand on the system as Wello's needs evolved.

95%

Improved UI Components Consistency

25%

Increased in Project Completion

84%

Increased Components Scalability

Image Description: Wello Design System Components

Image Description:

Wello Design System Components

Brainstorming

Research & Analysis

Conducted thorough research on existing design systems and gathered requirements from cross-functional teams. Analyzed pain points and needs to create a foundation for the design system.

Component-Based Approach

Adopted the Atomic Design methodology, using React for its component-based architecture. This approach ensured reusability and consistency across the platform.

Implementation of 8pt Grid System

Established an 8pt grid system to achieve a cohesive design across web and mobile. Defined guidelines for appropriate spacing and layout, ensuring visual harmony.

Figma Component Variants

Utilized Figma's component variants to streamline the design process. This allowed for the creation of flexible and scalable UI components, making it easier to manage variations and maintain consistency.

Visual Design & Style Guide

Fostered collaboration between design and development teams through regular workshops and feedback sessions. Maintained the design system on Storybook, enabling UI components to be tested and validated collaboratively.

Research & Analysis

Conducted thorough research on existing design systems and gathered requirements from cross-functional teams. Analyzed pain points and needs to create a foundation for the design system.

Component-Based Approach

Adopted the Atomic Design methodology, using React for its component-based architecture. This approach ensured reusability and consistency across the platform.

Implementation of 8pt Grid System

Established an 8pt grid system to achieve a cohesive design across web and mobile. Defined guidelines for appropriate spacing and layout, ensuring visual harmony.

Figma Component Variants

Visual Design & Style Guide

Research & Analysis

Conducted thorough research on existing design systems and gathered requirements from cross-functional teams. Analyzed pain points and needs to create a foundation for the design system.

Component-Based Approach

Adopted the Atomic Design methodology, using React for its component-based architecture. This approach ensured reusability and consistency across the platform.

Implementation of 8pt Grid System

Established an 8pt grid system to achieve a cohesive design across web and mobile. Defined guidelines for appropriate spacing and layout, ensuring visual harmony.

Figma Component Variants

Visual Design & Style Guide

Process

Adopting an Atomic Design Framework:
The Wello DS was structured using atomic design principles:

Atoms: Defined basic building blocks (e.g., buttons, inputs, avatars) in Figma with a focus on tokenization to handle properties like colors, typography, and spacing.
Molecules: Combined atoms into functional units, such as form fields with labels and tooltips.
Organisms: Created complex components (e.g., headers, navigation, panels) to ensure consistency in large interface sections.
Patterns and Templates: Defined templates for different user flows in both the Patient and Staff Portals, incorporating flexibility for layout changes and content variations.

Tokenization with Figma and Tailwind:
- Implemented a brand-to-alias tokenization paradigm in Figma, where brand tokens (e.g., red-100: #FEE4E2) were mapped to semantic alias tokens (color-bg-success) in the design files.
- Utilized Tailwind CSS for default utility classes, ensuring the token names in Figma aligned with Tailwind's classes (bg-blue-500, text-sm). This made it easier for developers to implement designs accurately.
- Built custom tokens for branding needs within the Tailwind framework, such as color-primary, color-success, font-family-primary, to maintain a coherent visual identity throughout the platform.
Syncing with Storybook:
- Established a 1-1 sync between Figma and Storybook to bridge the gap between design and development. The integration used plugins like Anima for component synchronization and @storybook/addon-designs for embedding Figma canvases directly into Storybook.
- This setup allowed developers to see and interact with the latest design versions directly in Storybook, ensuring component updates were implemented correctly.
Building Accessibility into the System:
- Integrated Stark and other accessibility tools within Figma to test and ensure color contrast and text legibility met WCAG 2.1 standards.
- Developed components in Storybook with accessibility attributes (aria-labels, roles) baked in, simplifying the process for developers to create accessible UI elements.
Documentation and Collaboration:
- Created thorough documentation for each component and pattern, including usage guidelines, accessibility standards, and design rationale.
- Maintained open communication with cross-functional teams to gather feedback and iterate on components, ensuring the design system remained flexible and adaptable to Wello's evolving needs.

Result

Consistent User Experience:
The implementation of the Wello Design System resulted in a cohesive and consistent user interface across the Patient and Staff Portals. The tokenization strategy enabled a unified color palette, typography, and spacing throughout the platform, significantly reducing UI inconsistencies.

Scalability and Efficiency:
By using atomic design principles and tokenization, the Wello DS streamlined the creation of new components and features. The 1-1 sync with Storybook ensured that new components could be tested and scaled efficiently, cutting down development time by approximately 30%.
Improved Accessibility:
With built-in accessibility considerations in every component, Wello was able to meet WCAG 2.1 Level AA standards, ensuring an inclusive user experience for all.
Enhanced Collaboration and Reduced Rework:
The seamless integration of Figma and Storybook facilitated better communication between designers and developers, leading to more accurate implementations and reduced rework. Design updates could be synchronized in real-time, ensuring all team members were working with the latest components.
Flexible and Future-Proof System:
The Wello DS's use of tokenization and atomic design principles provided the flexibility needed to adapt to future product changes. The system could easily accommodate new branding elements, features, or accessibility requirements, making it a future-proof foundation for Wello’s ongoing development.

Scalability and Efficiency:
By using atomic design principles and tokenization, the Wello DS streamlined the creation of new components and features. The 1-1 sync with Storybook ensured that new components could be tested and scaled efficiently, cutting down development time by approximately 30%.
Improved Accessibility:
With built-in accessibility considerations in every component, Wello was able to meet WCAG 2.1 Level AA standards, ensuring an inclusive user experience for all.
Enhanced Collaboration and Reduced Rework:
The seamless integration of Figma and Storybook facilitated better communication between designers and developers, leading to more accurate implementations and reduced rework. Design updates could be synchronized in real-time, ensuring all team members were working with the latest components.
Flexible and Future-Proof System:
The Wello DS's use of tokenization and atomic design principles provided the flexibility needed to adapt to future product changes. The system could easily accommodate new branding elements, features, or accessibility requirements, making it a future-proof foundation for Wello’s ongoing development.

Let's Get in Touch

Whether you have a project in mind, a question, or just want to connect, I'd love to hear from you. Let's create something amazing together!

Contact Deacon

Github

Cadencia

Behance

Let's Get in Touch

Whether you have a project in mind, a question, or just want to connect, I'd love to hear from you. Let's create something amazing together!

Contact Deacon

Github

Cadencia

Behance

Let's Get in Touch

Whether you have a project in mind, a question, or just want to connect, I'd love to hear from you.

Let's create something amazing together!

Contact Deacon

Github

Cadencia

Behance