As a UX designer how to create a design system for your product?
As what I always do — asking right questions and breaking down them to each one which you can answer.
What is Design System?
The answer would be there is not a unified definition for “design system” among people who use it. Everyone has his/her own understanding, however, I found some definitions as follow:
A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale
https://forumone.com/ideas/what-is-design-system
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
https://www.invisionapp.com/inside-design/guide-to-design-systems/
A design system is a set of interconnected patterns and shared practice coherently organized to achieve the purpose of digital products.
Book — Design Systems By Alla Kholmatova
So if there is no standard for such definition, I can perceive this concept from following two aspects:
- How does it look like? (Its attributes)
- What is it for? (Its purpose)
How does it look like?
- It is reusable
- It is scalable
- It is shared among teams
- It follows certain standards
What is it for?
- Design system is not only for designers. As a team, we collaborate with different team roles(designers, developers, researchers, product managers, and content producers). It offers us a common ground or say common language to communicate within a team. It will definitely increase the efficiency of cooperation as your product evolves.
- Ultimately, a design system is to achieve the product purpose/goal, and it is shaped by the core idea — how a product works.
Think about this, what else help a product achieve its goal? — Brand
- From a design system to a brand, a product goes through a path from internal world(its teams) to external world(its customers). Getting feedback from external world also influences how internal world strategizes its work. During this process, we can see that a design system and a brand inter shapes each other, and the process can be shown as below:
Where to start? — Design Principle
After answering above questions, we can start working on creating a design system. So, where should design system start with?
As I mentioned above, a design system is to help achieve a product’s goal. How to realize the goal? By establishing values, and values are often time effective and memorable when using adjectives. In this context, we call it principle.
So now, if you are going to build up a design system for your product, you can try to answer following questions:
What do you want to describe your product in three words(adjectives)?
what do you want your customers to think of your products in three words(adjectives)?
Here I can give some design principles examples from famous companies:
- Google: Create intuitive and beautiful products with Material Design.
- Airbnb: Unified, Universal, Iconic, Conversational
- Uber: Instructive, Non-intrusive, Focused and Timely
Once again, making sure your design principle aligns with your product goal, and keep in mind good principle isn’t the one trying to cater to everyone, but finding a good perspective. This perspective helps you to draw a first impression to your customers and it also helps you to communicate cohesively within your team even when many people work on it.
Think aloud is not only when testing your users but yourself
If it is hard for your team to come up with those memorable adjectives, here is a tip I want to share.
A young American artist called Melissa S. McCracken. She has a rare disease as said, she can see “music”. Her artworks are most about visualizing music. Here are some artworks from her website:
Despite the truth of her disease, there is mathematics term called mapping, and its definition is:
A mathematical relation such that each element of a given set (the domain of the function) is associated with an element of another set (the range of the function).
It can be demonstrated like:
What Melissa does is she draws connections between what she listens to what she sees. From that, we can see that if we can draw connections between all five senses (listen, smell, see, touch and taste), we will have more possibilities to come up with design principle ideas(or any other ideas)and understand them in a more tangible and concrete way. Using this method will help us release our creativity to a broader space than we ever have before.
Therefore, I encourage you to approach to an ideation session using multiple senses when lacking of inspiration. In this case, you draw more connections among factors in the world. From that, you will be able to generate more ideas. When you are doing this, you are thinking aloud!
Next, Pattern Libraries
After establishing a design principle, we are going to dive into more practical components in a design system.
There are many forms of a design system, one of them is pattern libraries. In this article I am going to discuss how to build pattern libraries.
When we communicate in a daily basis, what make senses of every sentence we say are focusing on two aspects — content and tone. Similarly, when we build pattern libraries, we can deconstruct it to these two subsections.
What is the content in pattern libraries? — Users’ key behaviors
Suppose your product is an e-commerce website, your users key behaviors might be
- Find a product they want
- Purchase it on your website
- Write a review
After finding out key behaviors, what you can do next is breaking down them into meta actions.When placing an order, what elements are users going to interact with? From those meta actions, you can group them in a proper hierarchy, and visualize them in sketches if necessary.
By this stage, you finish with the content aspect, so what about its tone?
The tone in this context is aesthetic style.
You can ask your team following questions to find the right style:
- What first impression in terms of styles and tones do you want your users to have?
- In what situations, your user will give your product feedbacks?
Here are some elements you can consider to include in when shaping your aesthetic style.
- Color
- Interactive states
- Animation
- Typography
- Spacing
- Iconography styles
- Shapes and borders
- Illustrations
- Photography
- Voice and tone
- Sounds and audio cues
Mood-board will be a great tool for your team to collaborate with on this subject. I normally use Pinterest to make a mood-board by pining whatever I see inspiring on the internet.
From here, you are building your pattern libraries step by step.
Here is some advice I have for you when making pattern libraries:
Make it transparent
It means make everyone on the team can access the content to review, make edits and provide their content to review, make edits and provide their feedback.
You can user tools as simple as google drive. One tool I normally use is real-time board.
Make it modular
Modularity means not just that a system is made of parts, but that the parts are interchangeable and can be assembled together in various ways to meet different or changing user goals. Modularity also help the product to:
- Scale and evolve
- Adapt to different user needs
- Ship features faster
Make it findable
The findability is one of the greatest barriers to pattern library adoption.
If team members don’t know that a pattern exists or can’t find what they need, they are likely to create a new one or go outside the pattern system. You can make it findable by following certain rules, for example
- Make it alphabetical
- Make it hierarchically by following Atomic design
You can find design system example on http://styleguides.io/examples.html.
Here ends the story, let me know your thoughts by commenting below, or clapping this article. I would to share more details about this subject if you are interest ; )
Check out my website at https://muyitao.myportfolio.design to see more of my work, and feel free to connect me on Linkedin https://www.linkedin.com/in/muyi-tao/. I would like to know more folks in the field as well ; )
