Project Snapshot
Team
2 Jr. UI/UX Designers + 4 Sr. UX Designers + 5 Frontend Engineers.
Scope of work
Design system audit, component standardization, atomic components, variable alignment, cross-team collaboration.
Impact
Hard-coded UI foundations reduced frontend engineering effort by 40%, improving delivery speed, consistency, and production readiness at scale.
Short on time? Here’s a quick audio walkthrough.
Problem
Low Design System Adoption Across Teams
A design system existed, but cross-team adoption was critically low.
Low Design System Adoption
Only 30–40% of production screens consistently used system components.
Designers frequently detached components and recreated UI, breaking consistency.
Developers often built custom UI patterns instead of reusing shared components.
As a result, the design system failed to function as a reliable source of truth across products like Loans, Insurance, Investments, EMI Finance, Payments, and Savings.
Fragmented Components and Inconsistent UI
The same component appeared in multiple versions across products and even within a single sprint.
Foundational elements (e.g., chips and small UI patterns) evolved into several visual styles and variants.
This fragmentation increased maintenance cost and weakened design consistency across the ecosystem.
Establishing a Reliable Source of Truth for Product UI
Establish a clear and reliable design system foundation where components behave predictably, teams understand when and how to use them, and both design and development rely on the same source of truth for building product interfaces.
Process
Auditing Existing Components and Usage Patterns
Audit Approach
Audited live product screens, libraries, and delivered files.
Reviewed component usage, variants, tokens, and accessibility.
Compared design and front-end builds across flows.
Example of inconsistent button styles and spacing patterns across product screens, despite a shared design system.
Key Findings (From the Audit)
Multiple primary button versions appeared in a single sprint, causing confusion about which was correct.
Shared components behaved inconsistently across flows due to over-configured variants.
Low trust in the design system led to poor adoption and a fragmented UI.
Core components (even primary buttons, chips) were rebuilt locally, reducing reuse of foundational elements.
Accessibility tokens failed compliance checks.
Inconsistent component scaling across breakpoints caused layout inconsistencies.
DCX research showed that company serves age spectrum, including 10% users aged 50+ and 30% aged 36+.
As an NBFC, accessibility was mandatory as per RBI + WCAG 2.2.
The audit confirmed that the issue was not the absence of a design system, but the lack of clarity, usability, and enforcement needed for teams to adopt it.
Understanding Component Usage Patterns Across Design and Development
Gaps in the delivered files caused the design and dev libraries to evolve separately, leading to inconsistent across products. I approached component design prioritizing scalability and code-readiness through proper use of Auto Layout, constraints, and styles.
Built to Handle Frequent Updates
Small changes in one component affected many files. Components needs to be built to support multiple shipping in parallel, with flexible layouts that prevented spacing and layout breaks.
A senior designer once said this and I book marked it.
Solution
Making Components Clear, Consistent, and Developer-Ready
Standardizing Component Structure
From 110+ Components to a Scalable System
110+
Due to the absence of an atomic system and standardization, the design grew to 110+ components with repeated interaction-state variants.
35
Standardization beyond spacing, padding, and radius unified component states, reducing the system to 35 components and enabling consistency.
Scaling inconsistencies existed due to the lack of a 4px/8px system, resulting in values (e.g., 13, 15).
All spacing and sizing were standardized using a 4px scaling system, ensuring consistency.
Balancing Consistency and Flexibility in the Design System
✓ Merged similar patterns to reduce component / variant sprawl.
✓ Improved consistency across components and screens.
✓ Defined clear component states (default, selected, disabled, error).
✓ Removed redundant layers and properties to simplify components.
✓ Added layout guardrails (min-width, Hug content, spacing rules).
✓ Ensured predictable behavior across breakpoints.
✓ Documented spacing, padding, and edge cases that were previously undefined.
Design–Development Alignment for Scalable Components
Dev alignment: Defined component structure and clarified states vs variants.
Dev-first library: Made easy to search, understand, and reuse in Figma.
Responsiveness: Set clear breakpoint rules (100% vs percentage-based widths).
Design delivery files: Included component references, states & variants used, spacing specs, responsive behavior, and edge cases.
Feedback & rollout: Iterated with designers and devs to simplify components and ensure adoption.
System Gaps & Future Improvements
Accessibility-first design system: Optimized primary CTA colors for strong contrast using solid tangerine; with use-case-based color naming (Primary, Disabled, etc.) to ensure consistent, correct usage.
Scalable system foundations: Defined variables for typography, spacing, padding, border radius, and boolean to adapt behaviors across devices.
Modular, efficient components: Built reusable card modules using atomic design and slot-based components, reducing duplication.
Edge cases (e.g., absence of disabled CTA) were not documented.
Rules are needed before creating new components, prioritising reuse or extension via properties over adding new ones.
Component changes and visual evolution should be documented with UX + business rationale.
