9 key lessons from building a Design System from scratch
A Design System is a collection of reusable styles, components, and assets that serve as the building blocks for the design and development of product interfaces. Design Systems ensure consistency across product(s), ease of use, and brand recognizability. They also optimize the product development process.
I work at a finance company providing access to financial services to nonprofits, companies, and governments. So, as a Systems Designer, I am tasked with:
- Creating and managing the company’s Design System,
- Creating documentation, and
- Collaborating with Designer and Developer colleagues to ensure proper implementation.
I have been a Product Designer for two years and counting, making the switch from Visual Design. I never imagined myself creating a Design System for a variety of products this early in my career.
Now, you might wonder, what are the things you need to know before building a Design System?
9 things to keep in mind as a Systems Designer
Consistency is key
It’s a system for a reason. It has to be consistent, else, the entire idea is defeated. You want the product’s users to easily understand and navigate the user interface, decreasing the need for user training. An example of this would be a form input style which should be the same across all product interfaces.
The earlier, the better
It’s a nightmare when you have to redesign products to fit new Design Systems. Sure, a product is never fully built, but you want to be able to make system-wide changes with the click of a button, or two. An example would be changing the padding on your form input component and having it updated across all instances.
Documentation is as important as the design itself
You’re not going to be the only user of your Design System. Your Designer colleagues and Developer friends will probably use it more than you do. As such, you want to create proper documentation that is as detailed as possible and simple to grasp as ABC.
Teamwork is necessary
This means collaborating with Developers to know what is implementable and good for the product in the short and long term. You want to keep your fellow Designers in the loop too. You need the feedback and contributions, considering you won’t be the only one designing the system. You need to get to a level of general acceptance. After all, your teammates are your first testers. You will also not be the only one managing it unless you’re the Design System Manager.
Iterations are a must!
It is okay to adjust a component, adjust the line height of your text style, or even change whatever it is that is not working or not scalable. And don’t be annoyed your team has requested a particular implementation to be changed. They are your first users, and you are not designing for yourself.
Managing a Design System is harder than creating one
To bolster this, we now have a dedicated job like Design Systems Manager. I create Design System instances that have to fit the branding of clients while maintaining the parent company’s core Design System attributes. This involves making not-so-subtle changes to colour, typography, components and assets. There is also the task of keeping all instances of the Design System up-to-date.
Learning never ends
I always discover new, better ways of doing things while on the job. From creating whole components to creating atoms and reusing these atoms to create bigger components; from having components and styles scattered across files to structuring them in a single file, across pages…
Dare!
When I got this job, I knew I needed to create a Design System. That is something the design community believes Designers who have been in the game for decades are capable of doing. Well, here I am, and I can say that while it’s not something for a beginner, it is not a superhuman feat either.
Lastly, and most importantly,
Designer-Developer collaboration
It’s popular knowledge that a Design System must live in code as well, or else it’d only remain a UI kit. The most challenging task was getting Developers to adopt what we had on Figma, bring it to life, and constantly update it.
Final thoughts
Design Systems can be robust as they mature. It’s important to consider the organization of content and the structure of component information. All components and styles should be easy to find, and their corresponding guidelines should be easy to understand.
Please note: An atom is the smallest unit of a component.
Shoutout to my Designer colleagues — Grace Akpoiroro, Obinna Ijiomah and Chinaza Osekwu. They have been absolutely awesome. I couldn’t have achieved this without their constant contributions and input.
