Work around Ensō began around 2022 while i was working on my graduation project with Zenduty. It came to me that Zenduty being such a big product relaying entirely on Ant Design system is not the future and we needed a design library which talks our language and shares our vision at Zenduty.

Creating a design system with 2 frontend engineers and a single product designer is gonna take forever and its going to be a nightmare. But we knew that we had to start somewhere, but how ?

Our goal was to create a colour system that isn’t just values on a screen that’s accessible, but go easy on our users who go though an immensely pressurised situation of managing an incident. Each tint had to look good, calm and bold.

The iterations took too much time to be done by just me, While walking with my colour picker i stumbled on radix !

Radix Colors is an open-source, well-balanced color system for designing gorgeous websites and apps. and they defined the scales with usage in their mind

It contains:

336 gorgeous colors,
22 color scales,
6 gray scales,
2 metal scales
12 steps per scale,
Transparent variants,
Compatible with any styling solution,

And the most important, automatic dark mode works like a charm.

Our icons needed some love. The old set from Ant Design was Alibaba. We were keen to bring a smooth, simpler, more modern look.

We utilized Tabler icons, it was an MIT licensed icon library. They have over 4950 pixel-perfect icons for web design which was free and open source icons.

For example - for OnCall we used the icon of a mobile getting an alert - but its called as "device-mobile-message" in tabler icons.

How would we get the icon thats related to Oncall from a list of icons ?

So we decided to give values that we share in the description of the icon itself so that it can further reduce the gap between Design and Dev.

Typography was next. Our font sizes were already in decent shape. We wanted a font with clean strokes and a layer of logic how we can find the scales and use them in our language.

I was a designer who thought fonts like Inter or Arial are just plain without any character that came pre installed in the computer and nobody used them (How times change) i have all the admiration and love in this world for Inter and Rasmus Anderson for the design of Inter.

With the foundations in place, it was time to start our next step. Testing. We ran the new styles and scales through our component library in Figma. Applying them on components was bigger than we anticipated. There comes the next set of issues.

The way components in ant design is structured was through exposing some props which we can change ! But we needed more, Much more. We needed  Unstyled but accessible primitives. Radix again to the rescue. Radix was an open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required. Prefect.

Incident Dashboard was the first screen that went out with Ensō Design system. A complete overhaul of the way incidents are Sorted, Viewed Ack’ed and Resolved. From the usual form or table to an more thought out and well placed and crafted interface

Which increased Incident Title visibility by 104%. More sense of resolution

We started speaking the language, development and design closed the gap. we continued our experiments on improving our system which talked our language and shared our vision

Designing and Iterations became really agile and fast. Design and Iteration timeframes reduced by 67.9%. GTM speed saw an increase of 23.4%

We were a very lean team with high efficiency. I was the only product designer and Shayan, Anil and Mukul were the only Frontend Engineers we had. To Design, Develop and Build a system like this with a team of 4 was nothing short of an achievement in such an early stage of my career

Later, within the next 2 Quarter The entirety of zenduty slowly saw a transition to ensō.