Back

Back

Creating Harmony: A Scalable Design System

Software Development

Creating Harmony: A Scalable Design System

Unifying teams and streamlining product development through a robust design system.

Project Overview

To foster collaboration and consistency across teams, I led the creation of Harmony, a design system that standardized UI components, guidelines, and tools. It enabled faster delivery, reduced design and development overhead, and laid a scalable foundation for future growth.

Problem Statement

Design and development teams operated with disconnected styles, duplicated components, and inconsistent UI patterns. These inefficiencies slowed down releases, created misalignment, and compromised user experience across platforms.

Industry

Software Development

My Role

Senior Product Designer

Platforms

Web and Mobile

Timeline

October 2020 - March 2021

Visit Company Website

Visit Company Website

Persona

Jane Baker

Product Designer

A product designer working across multiple feature teams in a fast-paced SaaS environment.

Age: 31

Location: Montreal, Canada

Tech Proficiency: High – fluent in Figma

Gender: Non Binary

Goal

Design faster without reinventing components or researching visual guidelines.

Ensure visual and functional consistency across products.

Collaborate efficiently with developers using shared resources.

Frustrations

Duplicate components created confusion in design files.

Handoff delays due to unclear or missing specs.

No centralized source of truth for styles and behaviors.

Process

[01] User Research

Audited existing product UIs and identified inconsistencies and overlaps.

Held workshops with designers and developers to understand key pain points and needs.

Benchmarked design systems from industry leaders to extract best practices.

[01] User Research

Audited existing product UIs and identified inconsistencies and overlaps.

Held workshops with designers and developers to understand key pain points and needs.

Benchmarked design systems from industry leaders to extract best practices.

[01] User Research

Audited existing product UIs and identified inconsistencies and overlaps.

Held workshops with designers and developers to understand key pain points and needs.

Benchmarked design systems from industry leaders to extract best practices.

[02] Insights

Teams needed a centralized, easy-to-navigate system that supported accessibility and scalability.

Overlapping or ambiguous components slowed down design and development.

Clear documentation and rationalized tokens were essential to support adoption.

[02] Insights

Teams needed a centralized, easy-to-navigate system that supported accessibility and scalability.

Overlapping or ambiguous components slowed down design and development.

Clear documentation and rationalized tokens were essential to support adoption.

[02] Insights

Teams needed a centralized, easy-to-navigate system that supported accessibility and scalability.

Overlapping or ambiguous components slowed down design and development.

Clear documentation and rationalized tokens were essential to support adoption.

[03] Design Solution

Standardized foundational elements (typography, spacing, colors, icons) to reduce decision fatigue.

Created clear usage guidelines for components like buttons to prioritize primary actions and limit secondary noise.

Established a layered visual system to track progress and provide visual consistency across themes.

[03] Design Solution

Standardized foundational elements (typography, spacing, colors, icons) to reduce decision fatigue.

Created clear usage guidelines for components like buttons to prioritize primary actions and limit secondary noise.

Established a layered visual system to track progress and provide visual consistency across themes.

[03] Design Solution

Standardized foundational elements (typography, spacing, colors, icons) to reduce decision fatigue.

Created clear usage guidelines for components like buttons to prioritize primary actions and limit secondary noise.

Established a layered visual system to track progress and provide visual consistency across themes.

[04] Testing & Iteration

Conducted accessibility reviews and updated tokens to meet contrast standards.

Gathered feedback through design critiques and updated documentation for clarity.

Partnered with front-end teams to validate implementation efficiency and fidelity in code.

[04] Testing & Iteration

Conducted accessibility reviews and updated tokens to meet contrast standards.

Gathered feedback through design critiques and updated documentation for clarity.

Partnered with front-end teams to validate implementation efficiency and fidelity in code.

[04] Testing & Iteration

Conducted accessibility reviews and updated tokens to meet contrast standards.

Gathered feedback through design critiques and updated documentation for clarity.

Partnered with front-end teams to validate implementation efficiency and fidelity in code.

Outcome

Reduced handoff friction and improved cross-functional collaboration through centralized resources.
Accelerated design velocity by giving teams ready-to-use, well-documented components.
Created a scalable system that grew with team needs and supported future features with minimal redesign.

Key Learnings

Design Systems Are Living Products

They require iteration, feedback loops, and flexibility to scale with the organization.

Design Systems Are Living Products

They require iteration, feedback loops, and flexibility to scale with the organization.

Design Systems Are Living Products

They require iteration, feedback loops, and flexibility to scale with the organization.

Consistency Enables Speed

When components are standardized and well-documented, teams move faster with more confidence.

Consistency Enables Speed

When components are standardized and well-documented, teams move faster with more confidence.

Consistency Enables Speed

When components are standardized and well-documented, teams move faster with more confidence.

Collaboration Starts With Clarity

Design systems succeed when they serve both designers and developers through shared language and ownership

Collaboration Starts With Clarity

Design systems succeed when they serve both designers and developers through shared language and ownership

Collaboration Starts With Clarity

Design systems succeed when they serve both designers and developers through shared language and ownership

Select this text to see the highlight effect