Back

Back

[Case 02]

Design System

IT

Design System

Scalable & reusable conponents.

[Project Overview]

I designed a comprehensive design system to support a digital product being scaled across Web and Apple Watch platforms. The system focused on creating consistent, reusable components, improving cross-functional collaboration, and reducing design debt across teams.

[System Architecture]

The design system followed atomic design principles and included:

  • Foundations:

    • Color palette based on accessibility and brand flexibility

    • Scalable typography system for readability on both large and small screens

    • Grid and spacing system aligned to an 8pt baseline

    • Icon set optimized for clarity and minimalism

  • Components:

    • Buttons (text, icon, ghost, etc.)

    • Input fields and form controls

    • Cards, alerts, status indicators

    • Tab bars, sliders, toggle switches

  • Patterns:

    • Data display layouts

    • Navigation structures for different screen sizes

    • Form structures and error handling patterns

  • Design Tokens:

    • Centralized values for spacing, color, radius, etc., synced to code via Tokens Studio

[Industry]

IT

[My Role]

UX/UI Designer

[Platforms]

Dekstop, Android & iOS

[Timeline]

January 2025 - May 2025

[Persona]

Scalable UI

Cross Platform Design

Component Library

UI

Visual Language

Design System


  • Colors: Accessible primary and secondary colors with variations for states (hover, active, disabled)

  • Typography: Modular font scale applied consistently across all components

  • Iconography: Line-based icons with uniform stroke widths and alignment

  • Tone: Minimal, clean, and flexible to work across various digital products

Process

Tools & Frameworks

Figma: For building and maintaining the component library

Foundation: A plugin to name the color tokens.

Tabler Icons: A plugin used to get material design icons.

Tools & Frameworks

Figma: For building and maintaining the component library

Foundation: A plugin to name the color tokens.

Tabler Icons: A plugin used to get material design icons.

Tools & Frameworks

Figma: For building and maintaining the component library

Foundation: A plugin to name the color tokens.

Tabler Icons: A plugin used to get material design icons.

Collaboration & Workflow

Co-created naming conventions with developers for components and tokens

Hosted onboarding sessions for product and design teams

Created checklists and guides to ensure consistent usage

Collaboration & Workflow

Co-created naming conventions with developers for components and tokens

Hosted onboarding sessions for product and design teams

Created checklists and guides to ensure consistent usage

Collaboration & Workflow

Co-created naming conventions with developers for components and tokens

Hosted onboarding sessions for product and design teams

Created checklists and guides to ensure consistent usage

Testing & Feedback

Internal designers prototyped screens using only library components

Developers tested token integration in staging environments

Reviewed adoption with stakeholders and gathered iterative feedback

Testing & Feedback

Internal designers prototyped screens using only library components

Developers tested token integration in staging environments

Reviewed adoption with stakeholders and gathered iterative feedback

Testing & Feedback

Internal designers prototyped screens using only library components

Developers tested token integration in staging environments

Reviewed adoption with stakeholders and gathered iterative feedback

[Outcome]

Reduced design time for new screens by 35%

Reduced design time for new screens by 35%

Improved developer handoff consistency by 60%

Improved developer handoff consistency by 60%

Achieved 100% adoption of the component library within the design team

Achieved 100% adoption of the component library within the design team

Key Learinings

A design system is a product, not a project

It needs regular updates, stakeholder involvement, and lifecycle planning to remain useful.

A design system is a product, not a project

It needs regular updates, stakeholder involvement, and lifecycle planning to remain useful.

A design system is a product, not a project

It needs regular updates, stakeholder involvement, and lifecycle planning to remain useful.

Platform constraints drive modular thinking

Designing for both small and large screens revealed how core components need to adapt without becoming redundant.

Platform constraints drive modular thinking

Designing for both small and large screens revealed how core components need to adapt without becoming redundant.

Platform constraints drive modular thinking

Designing for both small and large screens revealed how core components need to adapt without becoming redundant.

Documentation is the bridge between design and development

Well-written usage guidelines and visual references reduced ambiguity and sped up implementation.

Documentation is the bridge between design and development

Well-written usage guidelines and visual references reduced ambiguity and sped up implementation.

Documentation is the bridge between design and development

Well-written usage guidelines and visual references reduced ambiguity and sped up implementation.

Select this text to see the highlight effect