There was already the basic components built without much application at the time. Through trial and error from research and applying it to web apps, I scaled it up while keeping the components in consistent styling and introduced component token.
Role
Lead UX Designer
Responsibility
Build and scale the system
Collaborator
Developers, designers
Period
2023 - present
Goal of building Mizu Design System
Most client project was starting from zero. We had to rebuild one-off components over and over. We decided to build a reusable design system to:
Speed
Speed up project set ups when we have new projects incoming
Language
Have a shared language between design and dev for consistency
Flexible
Allow easy modification of variants in new applications
What was added
Tokens
Introduced alias and component tokens For dark mode use cases
So developers understand the use case
Maintains design consistency by limiting to specific set of colors, sizes etc.
Guidelines
Created with different use case
Ensures any designers and devs understand how to use them and what to avoid`
New component variants
To cater for wider use case and cover more scenarios
The challenge
Powerful, self-serve product and growth analytics to help you convert, engage, and retain more users. Trusted by over 4,000 startups.
Over engineered
Catering to too many use case because I was in a rabbit hole of research. I forgot it was suppose to be modular, flexible for changes when duplicated to use in other projects.
Tug of war
Spacing decisions were a tug-of-war: Should components follow global spacing rules? Or adapt for polish? We had to nit pick and question other design systems, and find a middle ground.
No right answer
There were no fixed rules, after many research, I realized every system’s use case is different. I had to accept this design system will keep changing to adapt to new use cases.
Where it is used now
Powerful, self-serve product and growth analytics to help you convert, engage, and retain more users. Trusted by over 4,000 startups.
Used in 4 different products
Now used across web and apps of different products from landing pages to dashboards and apps; is tested and iterated through designer feedbacks.
Dev's library
It’s living in the dev’s storybook and being used across the team for their client projects too. They refer to the changelog and update as needed.
Universal template
Designers don’t need to reinvent anything. They just need to duplicate the system and tweak styling, and focus on product, not pixels.
The lesson
Powerful, self-serve product and growth analytics to help you convert, engage, and retain more users. Trusted by over 4,000 startups.
A dead design system
I realized design systems that are still actively used have constant maintenance and updates from specific teams just for this purpose. Similar to language, once stagnant, it means the product is no longer moving forward or adapting to new changes or use case.
We don’t need new components all the time
Every time a new component or variant is made, the time and cost to maintain them increases exponentially and consistency slowly gets thrown out the window. The team learnt to find workarounds before requesting a new component.
It takes a kampung
Understanding how components are built and the way they are built helped me understand what is feasible. Devs played a major role in sharing component libraries for references and dissecting why things are built that way.
