Lessons Learned From Building A Design System

Through discussions with beginner UXer’s I have noticed that a design system seems to be a term of mystery to many. Although it seems as though many have a broad understanding of how to define the term, many stop short at understanding how to design and implement one. That is why I was inspired to write this article to reflect on my lessons learned of building my first design system.

However, just to makes sure we are indeed on the same page about what a design system is, let’s stop here for a second to define it. To quote from the Nielsen Norman Group a design system is

“ A set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.”

In other words, a design system is not just a style guide. Instead, it is the over all set of standards from typography, to components, to pieces within a style guide. It is the langauge you as a UX Designer, use to create consistency with the other members of your product teams.

Now that I am confident we are talking about the same deliverable, we can dive into my 4 key takeaways to think about when building a design system.

1. A design system is never finished

If you only remember one rule from this list then this should definitely be the one. A design system should be a living file. It should be one that is constantly updated to reflect all the new needs of the product team. This is because over time the product you are building continues to evolve, so in order for the design system to be the source of truth of design standards to help design at scale, it too needs to evolve.

2. Use-case rules are a necessity

When building your system, I can guarantee you will not think of all use the cases that will appear in your system over time. That is why it will be super important to define the use-case rules early on. Even more important, is to make sure you have these rules written down so that all members of the product team have easy access to them. This way, any time a new component is created you can make sure it fits within the predefined rules of the system. However, since as we already discussed a design system is forever evolving, it is important to remember that this list of rules too needs to be updated every now and then to make sure they still are accurate for the “language” of your project.

3. Question the possibilities of components

As you start to document the use-case rules of your components, I would encourage you think about how the different component styles you are creating can work in different ways. For example, can you create different style themes within a single component so that a future Designer has different preset options to choose from? By thinking about these possibilities early on, it helps your Engineers design a system that allows for this type of growth. As well as by thinking about how to reuse certain parts of different components it allows not only for a faster design, but also a more cohesive feel.

4. Designing in a vacuum won’t get you anywhere

In order to make a design system successful, all members of the product team should have open communication about their needs for this product or brand. This way, by having all seats at the table filled, you are able to think about all the different design needs from all the corresponding disciplines. Although some might not seem prevalent in the moment, this once again leads to a more consistent and cohesive company feel.

If you are embarking on building your own design system these 4 lessons are definitely not the only ones to think about, but were ones I found super helpful to remind myself when building mine.

Make Me Think

How building a design system empowers your team to focus on people — not pixels https://medium.com/hubspot-product/people-over-pixels-b962c359a14d

The Path to Design System Maturity https://medium.com/ux-power-tools/the-path-to-design-system-maturity-d403daba692a

Tools & Resources

Design Systems 101 https://www.nngroup.com/articles/design-systems-101/

Benefits, Challenges & Solutions https://uxdesign.cc/design-systems-62f648c6dccf

11 Benefits of a Design System https://builtin.com/design-ux/11-benefits-design-systems