Design System for a growing startup
Helping the product team to expedite the UI design phase while maintaining consistency across various platforms.
About the company: BillTrim helps a user to keep track of all your household bills such as cellphone bills, cable, internet, electricity and more. The has its service in the U.S.
I did not think about this idea as “Let’s build a system from scratch in a week or so”. Rather it was a gradual process and I still edit the system as I explore more challenges.
Let me break down the basic structure and how it is helping us now.
What is a design system
A design system is a kit of reusable interconnected parts tied with a set of rules about their usage. This helps the product team to be more efficient and consistent.
Why create a system?
As a growing startup thrives on continuous experimenting and learning about their customers. The volume of experiments is high and usually the next experiment demands the same components used in previous experiments. That’s why you would need a library where you can pull the standard components that resonate with the brand.
Also when you’re collaborating with other designers, it’s a good idea to have a shared library to avoid inconsistencies and re-work.
The third reason is it is extremely helpful to reduce the time to design UIs.
The framework
At first, I wasn't following any framework and simply collecting all the components and style sheets in one sketch file and was using that file as a library. After reading up on the concept and some open-source examples I followed the Atomic design methodology by Brad Frost.
Our design system
I followed the basic guidelines on the blog but redefined what goes inside each section to fit better in our context. Here is what goes into which section.
[image of what goes into atoms, molecules, so on]
File structure
I have divided our system into two sketch files namely
- Atoms: In this file, there were two base criteria
- Elements that can’t be broken down further.
- If in future I want to make any fundamental change (let’s say tweaking our primary color), the changes should reflect across our designs.
2. Molecules: Here the criteria was simple, all the components that could be broken down.
Let’s discuss them in detail
1. Understanding the file “Atoms”
Let’s look at the naming conventions: Naming conventions are very vital to keep the document organized. It is like organizing items in a warehouse so when you need a particular item, you know exactly it is kept.
Here is an example of a convention I follow for storing icons
And this is how the directory looks when I did it with every element.
Same with the Typography
2. Understanding the file “Molecules”
The molecules file houses components that are used over and over. However, the components are not limited to just buttons, inputs and it contains organisms such as headers, footers. Templates such as success modal, steps, reviews are also placed here.
I purposefully omitted pages as they are a part of the experimentation and cannot be disclosed.
Helpful plugins
Lastly, I’ll talk about a few plugins which were super helpful in creating this design system
1. Rename It: Helps in naming elements in batches. I used it for naming all the elements in the alignment of my naming convention.
2. Style Generator: Helpful in creating layer styles, text styles colors etc.
3. Merge Duplicate symbols: Super helpful in merging duplicate instances of a symbol. (This is paid but totally worth)
4. Find instances of symbol: Helps you identify where how many instances of the symbol is being used.
Future Aspects
As of now, we use this system at the design level and I am pushing to build a similar library for the engineering team for a seamless experience to our customers.
Check my work on Dribbble: https://dribbble.com/meetdemo
Let’s connect: https://www.linkedin.com/in/meetdemo/
