Read icon10 mins read

Background

The decision to create a unified design system stemmed from the need to improve design consistency and reduce the burden of maintaining multiple, fragmented design approaches across different teams. The goal was to create a system that could scale across various platforms, particularly in medical applications and other high-complexity environments, while maintaining a seamless user experience.

Design System cover

Tools

  • Figma
  • JIRA Suite

Role

  • Lead redesign efforts
  • Manage team resources
  • Stakeholder Management

Team

  • 8 Designers
  • 3 Product Managers
  • 4 Developers

Design System Requirements Planning

We worked closely with the Product Team to gather the necessary requirements, referencing the product roadmap. Our system needed to accommodate both existing products and future features, ensuring flexibility while following consistent design language for various medical platforms.

Requirements planning

Designers Involved

A design system requires a lot of resource to build and maintain on a day to day basis. Meet the team involved.

Org chart

Areas contributed

Gather product requirements

Conduct research and interviews with users of affected products

Translate requirements and feedback into consistent designs

Align, manage and iterate design and code for consistency

Maintain and manage the team responsible for various design system roles

Internal Design Pipeline

Create pipeline within the design team to create process that will help build the design system and work on projects at the same time.

Design pipeline

Design System implementation outcome

Implementing a design system accelerates the design process by reducing time from requirements to execution. This results in lower design and technical debt, ensuring more efficient and scalable product development.

Outcome 1
Outcome 2
Outcome 3
Outcome 4

Considerations to implement

Existing Challenges we have laid out as a team and long term challenges were proposed to the management.

Challenges

Approach

Approach

App & Platform Design Audit

The first step was to conduct a thorough audit of our existing products and components.

Visual Research

Visual research

Defining Foundations

Foundations

Implementing Tokens

Defining core design properties as reusable tokens and aligning with development variables.

Tokens

Basic Components

Basic components

App Building Blocks

App components

Platform Building Blocks

Platform components

Bringing everything together

Using the building blocks from the design system, explore how the components might come together in a cohesive way.

App 1
App 2
App 3

Theme Change

Tokens and naming convention properly setup in place for it to work seamlessly.

Design System Governance

We utilized tools like JIRA, Notion, and Sheets to manage our design system's development and ongoing updates.

Governance

Project Retrospective

What Went Well

  • Scalable Foundations
  • Reusability of Components
  • Alignment and Collaboration

What Could Be Improved

  • Documentation Consistency
  • Resource Allocation
  • Design System Adoption

What We Learned

  • Frequent Cross Department Involvement is Key
  • Iterative Updates are Necessary
  • Balancing Flexibility vs. Consistency