Full case study here

DreamX was building a payment app to help Dream11 users seamlessly use their winnings for everyday transactions. However, the existing design system was fragmented and lacked consistency—especially with Figma’s new variable system. Our design team identified this as an opportunity to overhaul the system, streamline design processes, and create a scalable, cohesive design foundation.

After diving deep into the issue, I identified two major pain points:

Overwhelming & Unstructured Component Variants

Inefficient Workflow Due to Scattered Styles

We analysed and defined the approach to be like below:

Foundations: Color & token system

Identifying & listing components

Building

Testing

Optimisation

We brainstormed regarding how to keep the tokens collection and after lot of brainstorming we tried to create collection in such a way that it not only addresses the two themes but also works on different states such as error, warning, success and neutral cases.

We also brainstormed regarding the structure of a token system, which better suits our needs.

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.

When it seemed that we are in a good state to use the new system. We planned to push it to the next version of the application, by planning flow by flow and getting rid of the old components.

During this process we realised some components were so powerful that they covered more than the use cases we have, and some components lack it. So we were improving the components as well, to cover all use cases.

We created a powerful design system, which fastened the design process by 33%. Team was lot optimised and fast to ship flows and create design for new screens.