System powering over 12000+ corporates across the world
Introduction
Inconsistencies, outdated UI, difficulty to scale were some of the issues that we faced with the design language in use for ZETA's front office system. Here are some stories on how I lead a team to build a scalable design system.
Currently, the UDS is deployed across all front office products of zeta. It is used by over 12,000+ corporates spread across India, Brazil, Italy, Belgium and more.
Currently, the UDS is deployed across all front office products of zeta. It is used by over 12,000+ corporates spread across India, Brazil, Italy, Belgium and more.
About the project
Among other things, zeta creates products for corporates to manage their employee benefits. 'Universal design system' or 'UDS' is a design system created for these corporate products.
The considerable amount of design debt and the unscalable nature of the previous design language made it important for us to build a scalable, easy to code, customisable, clean looking system of design assets.
The considerable amount of design debt and the unscalable nature of the previous design language made it important for us to build a scalable, easy to code, customisable, clean looking system of design assets.
My Role
I was tasked to lead a team of 3 product designers and deliver the completed design system in 3 months. In addition, I also managed all interactions with the developers, conducted design reviews and facilitated high impacting decisions.
Approach
We conducted an extensive review of the existing platform and its diverse use cases, we identified 5 key features to focus on.
Scalability
Zeta has an extensive front office product suite, the design system needs to be extremely flexible to be able to handle the multitude of use-cases thrown at it.
Customisable for any corporate
In the B2B space customisation sells. Every corporate signing up needs their brand identity to reflect on the products their employees use.
Intuitive interaction
The design system should facilitate ease of use for complex actions and workflows. It needs to be intuitive to be understood across the globe
Smart design components
The component used needs to be smart enough to be able to quickly transform into its right instance.
Easy to code
Improving the coding time was one of our key metric. We wanted to reduce the time it took for development of business components.
Scalability
Zeta has an extensive front office product suite, the design system needs to be extremely flexible to be able to handle the multitude of use-cases thrown at it.
Customisable for any corporate
In the B2B space customisation sells. Every corporate signing up needs their brand identity to reflect on the products their employees use.
Intuitive interaction
The design system should facilitate ease of use for complex actions and workflows. It needs to be intuitive to be understood across the globe
Smart design components
The component used needs to be smart enough to be able to quickly transform into its right instance.
Easy to code
Improving the coding time was one of our key metric. We wanted to reduce the time it took for development of business components.
Scalability
We went through all existing systems and started building a comprehensive component library.
This included foundational components like colors, typography, grid layout and shadow presets. UI components like icons, illustrations, tables, form fields among other things.
This included foundational components like colors, typography, grid layout and shadow presets. UI components like icons, illustrations, tables, form fields among other things.
Customisability
Zeta being a B2B2C company, has clients who demand extreme customizability. This includes incorporating brand colours, logo, and customisable illustration sets.
To solve this we set up a system to derive color variations based on a single primary color. We also added theme support to our Figma file using Themer plugin.
To solve this we set up a system to derive color variations based on a single primary color. We also added theme support to our Figma file using Themer plugin.
Intuitive interaction
We focussed on some of our complex workflows like bulk actions, filters, multi-step creations. These workflows needed to be flexible to handle all the cases thrown at them. Furthermore, we kept updating the system to make use of Figma variants and made it easy to switch between instances.
Easy to code
We coordinated with the engineering team at zeta to get each component of the design system to be built into code to be reused across the organisation. A constant feedback loop was maintained by capturing review feedback over google sheets.
Ending notes
For this project, I had the pleasure to work with some talented people from zeta, whose inputs were very valuable for execution. I had a lot to learn from this project some of which included managing a team, setting goals, owning execution.
P.S The entire project was done during the initial days of Covid. Some days were challenging, being on calls all day sucks 😛.
P.S The entire project was done during the initial days of Covid. Some days were challenging, being on calls all day sucks 😛.
