Design System — What to care? And What to learn?
A full mindset and step by step to create a compliment design system and find out what did we learn exactly — By in-house design team (YOMI studio)

What is a design system?
Everytime we have a new member, there are more new ideas, perspectives, color palettes, and patterns appearing in our products. Its processes become more difficult to communicate, not just in our visual language, but also in our design principles. It increases design debts, grows inconsistencies and maintenance cost.
That’s why we need to unite the team, not just between designers, around a common visual language.
Then the design system is the ultimate document includes our product design principles, best practieces, collections of reusable components guided by clear standards, and could be used in all of our products.
Why are the benefits?
- As we don’t need to do repetitive work anymore, less time and money wasted and increase our velocity and time to market of our product.
- We have a standard to look up as well as decide what we should follow when having an argument. It’s like the blueprint for visual design in product development.
- As consistency and predictability increase, so does user experience.
How did we define our design system?
Step 1: Preparation
- To keep it simple in the very first practice, we gathered all members of Design Team to share about Design System. The meeting lasted 2 hours as we also need to discuss how we should do it.
- We talked to the Product Director, as well as two Developers to understand their perspectives. Their viewpoints help us a lot in collecting insights, especially in Product Management and Engineering.
- We listed all products could be affected by Design System. In our case, as we are a consulting company, we only have our website, marketing material, and future in-house products. (As we shoudn’t change the visual design of our in-house games).
- We spent couple days to discuss how we should conduct our next steps, as well as how we evaluate our design principles. In the end, we tried to convey Product Director standpoints to couple principles.
Step 2: Discuss & define our design principles
For us, design principles aren’t about visual design. It reflects our way of thinking about Design in our products, and as an agency that grow client’s businesses. There are two parts in our Design principles, first one is to explain our principles, and second one is to write down our commitment to it.
Follow with our Engineering and Product Management principles, our Design principles are:
- Don’t guess. Don’t make things up.
- Beautiful is just the beginning.
- Show & Tell.
- Fast feedback & validation.
We combined our ideas, personal experiences as well as perspectives with our Product Director standpoints, then tried to write them down in detail. We took couple days to do it as we need to make sure everyone is in the same ground.
Step 3: Create a components inventory
First, we conduct a visual audit in all of our previous products. We collected all components, properties. To be honest, it wasn’t a pleasant experience as those were all over the place.
Then we create a component inventory includes: Atoms (basic elements); Molecules (components of modules); Organisms (areas of the UI); Templates (How the pieces are laid out on the page); and Pages. That’s our first draft.
Step 4: Create our visual design language
This step is how we use Colors, Branding, Spacing, Imanges, Visual form in all our products.
Step 5: Create a user interface library.
This is the final document to includes everything above, from design principles to components and styles.
What to care?
Please make sure that you have a deep understanding about the company and product you want to define a Design System. Otherwise, it’s just a bunch of Design Assets.
- Sketch app on MacOS helps us a lot, as we could export component HTML format without doing anything. Thus we don’t need to make a website to have a live library.
- Make sure every members have a clear understanding about Design System, especially our Design principles.
- It’s also a product that keep involving. We need to get back to the document at least every year to review.
What did we learn?
- It’s a good design practice. As we only create Design Guideline before, this is our first time to define this powerful tool that helps us to manage resources in all products, we had great time with our co-designers as well as other team members. It’s also a complex system that requires our time and resources, which reflect our design thinking.
- Problem thinking It helps us to think deeply when you consider a problem in different perspectives. When we find the answer to the question “what we consider to build a design system?”, in addition to the emerging issues of the project, such as resources, model, etc., we can also look at more detail and find other issues from the perspective of each step of the process. Which means: What’s the problem in Step 1? or What is needed to complete step 2? Same for step 3,4,.. and then summary all of them into Project Issues report.
- Product Thinking. It also help us again to strengthen our viewpoint in involving product. Even there are so many things to explore, we still need to finish the document and accept that there is room to grow in the future. We also have these valuable information later to enable us to take the next steps logically and reasonably.
- Critical thinking. One key thing in the whole practice is to answer the question “How could we evaluate these things?”. It leads us to a deep understanding of its definition, explore our current siuation, define our own criteria that works for us, and define the best practice in each case.
Special thanks to Phat Doan for being apart of this Project with me. We are always the best team ever
