Bringing Structure to a Fragmented UI: Building a design system
Role: User Experience Designer with 2 front-end and 2 backend developers
Skills: User Interface Design, Interaction Design, Accessibility (a11y) Principles
Timeline: December 2023 - May 2024
What wasn’t working
When I joined the team, the app’s UI had no defined design language. It mimicked Excel interface resulting in inconsistent use of colors and components, causing high engineering overhead and making maintainence difficult. The absence of design assets also slowed down the new design team's ability to prototype efficiently.
The team realised that without a structured, modular component library, UI inconsistencies would keep multiplying, thus, slowing delivery, increasing bugs, and making scaling difficult. While a full redesign wasn’t feasible, our research and component audit revealed that fragmented components, and inconsistent styling and behavior needed to be worked upon.
Ensuring accessibility and modularity
Extended marketing brand assets into the app, refining colors and typography with WCAG 2.2 accessibility compliance, ensuring optimal contrast, legibility, and responsive adaptability.
I began by cataloging existing components, sorting and analyzing how they were used, in order to remove redundancies and work towards building modular components.
Using Atomic Design, I built a modular and scalable system by breaking the UI into fundamental components. This structured approach improved flexibility, enabled faster assembly of complex interfaces, and ensured consistent, system-wide updates.
Collaboration, iteration and scalability
Visual regression tests and design critiques ensured consistency between Figma and implementation, with early engineering feedback reducing post-launch revisions. It ultimately resulted in a cohesive UI language that improved responsiveness, reduced engineering effort, and enabled design to prototype faster.
What changed?
Consistency
The UI guide ensures cohesive design across screens, enhancing usability and reducing the cognitive load for users whilst also elevating design quality.
Responsiveness
A robust foundation simplifies adaptation to different screen sizes and supports scalability.
Efficiency
Centralized design system updates streamline changes across the app reducing delivery time by 25%, while defined variables and modular components significantly reduce SCSS lines for developers.
Would you like to know more?
This was an overview of the project. For detailed process, please use the button below and enter the password provided.