New UI: How we used Shadcn UI to standardise UI in LocalOps

We shipped a brand new UI today that looks & works consistently across all parts of the console. And here is why/how we did it.

We introduced "services" recently that lets developers deploy their code automatically when they push to Github. With more capabilities and menu items of Services, we found that the overall navigation between environments and services became slow. And we couldn't scale our internal design system that well, given all the things we wanted to build.

Why:

We wanted a unified design language / design system that lets us scale our feature set without introducing more complexity on the UI for our users.

Plus, we wanted a system that lets us ship features fast & match the pace at which we build new features without involving too many design iterations for every feature.

Shadcn UI (https://ui.shadcn.com/) gave us both. And we wanted to move to it soon.

Constraints:

Although our app components were already written in React, this move wasn't a straight forward decision for us.

Unlike how bigger teams approach this project where more than handful of designers plan the project, product team plan the scope & rollout and dev team take things up in phases/sprints for multiple weeks.

As a startup, we didn't have any of these in our team!

We had an existing pipeline of features to build (for survival). And had very few hands + may be couple of days max to get this done. So we had to hyper prioritize everything.

Compromises/Trade offs:

And while moving away to a different design system, we knew had to give away the in-house designed elements that made us look unique.

We knew that we had to trade off these aspects to get to the new way of building things, focusing on utility & functionality a bit more. So all of us in the team accepted this as a fair enough trade off.

Inspiration & Early prototype:

The project was in conversation phase for several weeks before we decided to take it up.

All along the process, we looked at several projects in the Shadcn community for inspiration. For example, we looked at Tweakcn to get a sense of the themes we could adopt to start with and how our dashboard may come out.

We did an early prototype a week earlier to understand the components Shadcn brings and how we can port our app's existing react components to the new system. And found out that it might not take more than couple of days to finish, given the components we had in our existing codebase.

Shipped in two days:

We got started over a weekend, created a brand new git repo, started with overall page layout and then ported react components one after the other from old codebase to the new codebase. The components that required very less work, got done first. The ones that needed more tweaking were moved to the last part.

We hyper prioritized and hyper communicated every step of the way tightly within our team to finish this in 2-3 days. Bigger teams could have easily taken multiple weeks to get this kind of rollout done purely because there is a lot to communicate and decide all along the way. We were able to do these fairly quickly.

—

We are now in a new design system which lets us re-use modern components from the Shadcn design system, ship new features faster and offers consistent stable UI for our users.

If you are startup, we highly recommend starting your projects using a design system which will save countless hours while you ship your way to PMF.

Overall, we moved from this:

To this:

Let us know what you think:

Sign in to LocalOps and let us know what you think.

Go from zero to production on your cloud account in minutes, deploy anywhere - on your cloud or your customer cloud just by pushing to your Github repo and streamline environments & services across teams with built-in monitoring, scaling and more. All without any DevOps overhead in your team.

Take a tour of LocalOps with me or sign up for free to get started at https://console.localops.co.

Cheers.