UX Case Study: Design System

Building a Unified Design System for Consistency, Speed, and Collaboration

Overview

To address the growing need for design consistency and efficient cross-functional collaboration, our UX team initiated the development of a centralized design system. This system was crafted to unify UI components across the digital portfolio, reduce redundancy, and accelerate prototyping—all while ensuring a cohesive user experience.

Challenge

As our product suite expanded, designers and developers faced several issues:

Inconsistent UI patterns across teams and platforms.
Redundant efforts in recreating commonly used components.
Slower prototyping due to lack of ready-to-use standardized elements.
Design debt that accumulated from disconnected visual languages.

These challenges led to inefficiencies, friction between teams, and a fragmented user experience.

Objective

To create a scalable design system in Figma that:

Promotes visual and interaction consistency.
Enables rapid prototyping using reusable components.
Supports collaborative workflows between designers and developers.
Evolves based on real feedback from stakeholders across the product ecosystem.

Approach

Audit & Research
We conducted a comprehensive UI audit across all digital products to identify overlapping patterns and inconsistencies. We also held workshops and 1:1 interviews with designers, developers, and product managers to understand common pain points and gather input.
Component Creation & Structuring
We built a modular, atomic-based component library in Figma, covering:
- Buttons, form elements, modals, tooltips, tables, and layout grids
- Accessibility standards and responsive behaviors
- Pre-built templates and flows for faster iteration
User Review & Feedback Loop
A cross-functional feedback session was conducted to test the system's usability and adoption potential. Designers and developers from across the portfolio participated in hands-on sessions. Feedback collected was used to:
- Improve documentation clarity
- Optimize components for edge cases
- Add missing variations critical for specific products
Developer Handoff & Sync
The design system was closely aligned with our dev counterparts. Tokens, spacing, color schemes, and components were mirrored in the codebase using tools like Storybook and design tokens integration. This ensured a single source of truth for both design and development.

DX Component Library internal user survey

Objective: Analyze the extent of the design component library within each DX team and collect metrics. Analyze ways to encourage developers to utilize the component library to maintain consistency across the BUY environment which will streamline the process to improve the adaption rate.

Total
Components41

Application compatibility with component library

90%SDEP65%ASN50%Pricing17%AG

Library version

🟠 7.7.0 - Latest Version

SDEP
7.7.0ASN
7.6.0Pricing
7.5.4AG
7.0.3

Developer’s
Feedback

Overall Satisfaction94.11%

Helpfulness70%

Ease of Use86%

Time Saved50%Depends on complexity of the component

Use of Style Guide

100%DX100%FALCON

Dev-time frequency of using the Library

50%Daily50%Monthly

OPPORTUNITIES

Need for a training for new hire developer/designers
Brownbag for developers about contributing towards library
Team survey before a new component is built to ensure requirements met for the teams to use
Recurring UX/UI guild meetings with the developers to share new component updates
UX to act as a liaison across the teams for new components and/or enhancements to existing ones
Build a new front page component that includes a header, navigation, search bar, breadcrumbs, footer, identifier, feedback.

The benefits of using the component library:

Outcomes

Faster Prototyping: Designers cut prototyping time by ~40% using pre-built components.
Improved Consistency: Visual audits post-launch showed a 70% increase in UI consistency across products.
Developer Alignment: Streamlined handoff process reduced back-and-forth by 50%, thanks to shared naming conventions and system documentation.
User-Centered Evolution: Continuous team feedback allowed us to iteratively refine the system to better match both user and business needs.

Key Learnings

Involving both designers and developers early ensured stronger adoption and practical usability.
Consistency isn’t just about visual alignment—it directly impacts usability, trust, and development efficiency.
A living design system must evolve with product needs, requiring regular feedback loops and governance.