From Chaos to Consistency: A Scalable Design System
My Role
UI UX Designer
Timeline
4 Months
Understanding the Challenge
After diving deep into the issue, I identified two major pain points:
Overwhelming & Unstructured Component Variants
The design system had excessive and disorganized variants for individual components, leading to performance issues and significantly slowing down the design and iteration process.
Inefficient Workflow Due to Scattered Styles
With no centralized themes and styles spread across multiple variables, creating user flows was time-consuming and lacked coherence, making it difficult to move quickly and maintain consistency.
Designers spent excessive time identifying the right components, assembling screens, and then prototyping, which slowed down the overall design workflow.
We analysed and defined the approach to be like below:
- • Foundations: Color & token system
- • Identifying & listing components
- • Building
- • Testing
- • Optimisation
Structuring the Backbone of
Our Design System
After multiple brainstorming sessions, we structured the token collections to not only support both light and dark themes but also accommodate various states like error, warning, success, and neutral—ensuring scalability and clarity across the system.
We also brainstormed regarding the structure of a token system, which better suits our needs.
Brief about the process
After this we collected and listed the components and created optimised versions of components, avoiding unnecessary variants. Some components were so complicated and were having so many children, we had to test it thoroughly.
We completed the process of creating the components after finishing the token system.
Iterative Improvements Along the Flow
When we were building things and testing, we were creating components which can change themes, when the collection mode was changed. so sometime, the tokens were getting overidden by parent frame tokens and mode. So testing them hand to hand and fixing things in the component as well as the token system was an iterative process.
I led the development and upkeep of the component and token systems.
Doing the cleanup
Once the new system reached a stable state, we planned its rollout in the next version of the application—migrating flow by flow and systematically phasing out the old components.
During this process, we discovered that some components were robust enough to handle more use cases than initially intended, while others fell short. This led us to continuously refine and enhance components to ensure comprehensive coverage across all scenarios.
So, What did we achieve ?
We built a robust design system that accelerated the design process by 33%. The team became significantly more efficient, enabling faster delivery of user flows and the design of new screens. Throughout this journey, I gained valuable experience in strategically planning component and flow rollouts. The intensive use of Figma variables also helped me develop a strong command over them, deepening my expertise in design tooling.
