Building a Design System in a Startup
As a product designer in a startup, often times you have to wear many hats. It’s not easy being responsible for almost every part of the product design and ownership. You are the product designer, UX writer, content designer, UX researcher and etc all wrapped up in one, like a big ‘ol pack of Trail Mix.
How should it work? What happens after the user does this? What colour should it be? How big should it be? Will the user understand what this is? What should the text say? Why should it say that way?
These are just some of the questions I find myself asking on a daily basis. And with these questions in mind, there had to be a better way to navigate through all of this — i asked myself.
Working in bi-weekly sprint events, things move real fast and I needed a design system that would help me build and iterate the product swiftly. Mockups were always outdated when a new feature needs to be built. And the team would find ourselves questioning how should things look and work in our product, “what’s the rule for this?”
Atomic design
Atomic design is the methodology for creating design systems. The concept works by reusing design components that fit together in a system. I’m a sucker for organisation, so when i learned about Atomic design I had a twinkle in my eye looking at how systematic design can be!
Building the design system
Adopting the Atomic design, I started off by categorising simple things like the product’s typeface, colours and icons.
From there i built and grouped them together into master components of buttons, menus, dialog boxes, and text fields. This will allow me to easily make any changes across the whole product by just editing the master, making product iterations easier.
SalesCandy uses Google material design, so a lot of the guidelines and designs are referred from there. All that was missing was a fully functional UI library of our own.
Due to the lack of “Pages” feature on Adobe XD, I had to find a workaround to name and categorise each layer.
The Design system
Having built the system, the product now has a complete set of UI library with these benefits:
- Published on cloud for me and/or any future designers to use
- Easily drag and drop any components from the UI library that is accessible from any Adobe XD files
- Updated for every new version of the product released
- Able to easily archive older product version files (for when you need to dig up the past)
This design system solves these main problems:
- Need faster method of building and iterating the product
- Outdated mockups when a new feature needs to be built
- Questioning how should things look and work
More than just UI
Part of a design system is also the UI language. I use Google sheet to organise all the UI text to translate for localisation. This also helps the developers in building a multi language product.
