Case: Tetris Desing System
Building a design system collaboratively
My Role in the Project
At the beginning of the project, I was not yet the team coordinator, but I was appointed as the leader of the Design System construction. My responsibilities included structuring the project, conducting the discovery phase, and assisting the team in executing ideas.
I also served as a bridge between project stakeholders, particularly between working teams and stakeholders.
Scenario vs. Problem
Over fifteen products were being developed independently, without cohesion or standardization, both in design and development. This not only resulted in high maintenance costs and limited product evolution but also generated dissatisfaction and poor user experiences.
Solution
The solution was to build a Design System to standardize and simplify product development, ensuring that 80% of the overall product construction remained consistent across different business units.
Solution
The solution was to build a Design System to standardize and simplify product development, ensuring that 80% of the overall product construction remained consistent across different business units.
Learnings
Perhaps the most significant challenge was to engage all the necessary individuals within NDD for product development. With the help of workshops, the need for the Design System for NDD became evident, along with the importance of departmental involvement.
Workshop
During these workshops, we discussed the project’s importance for the entire team and collectively constructed a CSD Matrix and Project Model Canvas, which would guide us throughout the construction process. We also established our design principles using a Principles Pyramid.
Understanding the Audience
It became clear to everyone that we needed a better understanding of our users. To achieve this, we conducted research with Developers and Product Owners, those involved in the day-to-day product development processes at NDD.
We conducted the research in two parts: a quantitative study with Developers and a hybrid (quantitative and qualitative) study with Product Owners. In total, we surveyed and/or interviewed over 60 people. Based on this research, we created Four Personas to represent our Design System users.
The results provided valuable insights for the initial Design System planning, and it became evident what the real problem we needed to solve was: having a reliable source for interface elements and code reference.
Design Principles
With the research conducted, condensed into reports and presented to stakeholders, we proceeded with the construction of the Design System.
We defined the name, Tetris, and then aligned on the design principles that should guide the development of our products. To assist in this stage, we used the Design Principles Pyramid.
Requirements Gathering and Inventory
We studied each product in-house, more than 15 in total, to understand commonalities and possibilities for sharing components, icons, etc. In total, we identified about 40 interface elements that could be standardized, covering approximately 80% of all products. We understood that the remaining 20% were specific features of each product and might not necessarily be part of the Design System.
Design Process
Due to its close proximity, I assisted the product area in establishing a Double Diamond aligned with their Upstream/Downstream Kanban.
This same Double Diamond approach is adopted for creating the elements that make up Tetris. Additionally, the UX team designed a clear process for creating and documenting a component, as well as a process for opening improvements and suggestions.
Tools
For building, documenting, and using Tetris, we decided to use Adobe XD, Visual Code, and Storybook.
And the construction continues.
Currently, we are finishing the first version. There are a total of 8 people (4 designers and 4 developers) working on Tetris.
In total, we have already delivered more than 40 interface components, documents with application examples, and included them in the UI KIT.
Coordinating this project as a whole has been a challenge and an excellent learning opportunity. I hope to update this case soon with some deliveries.
See more cases
Health Score: https://naufelpatrick.medium.com/case-health-score-45396bceb534
