top of page

Building a design system for UDT

TIMELINE
Oct, 2022 - Mar, 2023
MY ROLE
Product Designer
BUILT ON
Figma

Introduction

UnDosTres is a Fintech Superapp in Mexico through which you can make recharges and buy tickets for services like - Transport (Bus, Uber), amusement parks, movies, etc. It also provides Credit card service.

Why build a Design System?

As our team grew, consistency among all the design files decreased. So, I  took this opportunity to propose building a design system for UDT.

And since, in Dec 2022, the tech leads were planning to shift the code base from React to Flutter, we felt it was the perfect time to build it.

We wanted to build the design system to
  • To reduce inconsistency in design
  • To increase the speed of the projects
  • To scale and maintain the designs easily
  • To collaborate with the Front-end dev team on a much deeper level

How did it start?

I collaborated with UI/UX designers (Zashel & Martha), the Product Manager, and the Front-end team throughout this project.

Just like any other project, it started with a lot of research and referencing how other design systems.

And then, we carefully crafted the detailed
sprint plan in Jira

Process

The 1st sprint was to build the Style Guide that can be used to build the Design System.
From the 2nd sprint, we started taking one User Flow at a time.
Ex: In the 2nd sprint we worked on mapping and creating the responsive components for the Home and Categories section
In 3rd sprint, we took the Credit card user flow and so on.

Design Principle we followed

Also we referenced Material design 3 a lot because Flutter follows Material Design

We followed the Atomic Design Methodology by Brad Frost to build our design system.
Well, no good projects are completed without some hiccups.
One of the major problems we faced in our 3rd sprint was that we realized that -
We did not make the components responsive 😵‍💫

But we did not panic because only a few changes in the component properties and 
Tadaaaa!

Impact

60% 
increase in project delivery speed. With defined components, our design team can develop relevant solutions in less time.
100% 
Consistency throughout the app designs. Even collaboration with front-end devs became better.
 
bottom of page