Domo Design System
How we built a design system in a Startup Company
My Role in the Project
As a Senior UX/UI Designer, my role involved coordinating the design team for this project. Additionally, I provided guidance and support to junior members of the UX team, including an intern who joined the project. I also made significant contributions by designing some of the components of the Design System and took on the responsibility of creating essential documentation for the project.
What is a Design System?
A design system is a continuously updated library of components that includes graphical elements, colors, typography, spacing, visual identity, and everything that makes up the interface of one or more products. Its main purpose is to scale the development of new products and facilitate communication between design and development teams.
Initiative and Project Context
Annually, SenseData holds the SKR (SenseData Key Results) initiative, which gives employees the opportunity to contribute to the development of corporate projects. The top three projects of the year are awarded.
As a Senior UX/UI Designer at SenseData, I saw a great opportunity to form a team to work on the company’s Design System project, which had long been a personal goal. At that time, we were relying solely on a component sheet in Figma to guide interface development. This often resulted in a lack of standardization in component development and scalability issues, with various unnecessary variations.
I decided to gather a few front-end developers from the company and invited a UX intern to join us in forming a team for the Design System project. Initially, our team consisted of five members (one UX/UI Designer, one UX/UI intern, and three front-end developers). By the end of the second quarter, the team underwent adjustments due to the departure of two members, and we completed the project with two UX/UI Designers and two Front-End Developers.
Identified Improvement Opportunities
After some initial meetings with the project team, we identified several opportunities for improvement to address and resolve during the project’s progress:
- Lack of visual consistency in the components that make up the product interface.
- Lack of scalability of the components.
- Delays in building components for each new project.
- Difficulty in communication between the Design team and Development Squads.
- Decentralized maintenance of components.
Project Stages
Below, I outline the entire process of building the Domo Design System. The project was divided into several stages, as shown in the illustration below:
- Choosing the Design System Name
We conducted a survey via Google Forms with all SenseData employees to select the name for our Design System. The most voted and chosen name was Domo DS. The name “Domo” is inspired by domes, architectural structures in the shape of arches that encompass a specific space, similar to how Domo encompasses SenseData’s solutions. - Mapping Visual Inconsistencies
As part of the UX team, our responsibility was to investigate the entire SenseData platform for visual inconsistencies in the components. Initially, we compared the interface components with our previous component sheet as a reference. To facilitate this process, we created a dedicated page in Figma to record screenshots of the inconsistencies we found, classifying them by component type. This procedure covered all elements, including icons, colors, typography, spacing, and loading animations used in the platform’s interface.
3. Component Backlog
After mapping the platform, we developed a backlog of components and established a priority order for the elements, including design tokens (colors, typography, shadows, spacing, borders), icons, and illustrations. We used an Excel spreadsheet to facilitate the classification process of each component, organizing the deliverables into quarters, from January 2022 until the project’s completion in December 2022.
4. Research and Ideation of New Components
For the design system project, we re-evaluated our previous component sheet to determine which components needed adjustments and redesigns to ensure their scalability.
We conducted a benchmarking process, analyzing design systems from market players and consulting valuable references on sites like [Design Systems Brasileiros](https://designsystemsbrasileiros.com/). We also explored React component libraries as part of the research and ideation process.
5. Domo DS Structure
Design Tokens
To ensure good scalability, we decided to start structuring our design system using Design Tokens. Design tokens are semantic style variables that serve as the foundation for creating any component. Examples include colors, typography, borders, shadows, and spacing used in each component.
Components
We began the component ideation process using the design token library we had defined. We started with smaller components, such as buttons and form fields, using this library as the foundation. We then progressed to developing more complex components, such as modals and drawers. This approach allowed us to create a solid and consistent base for the product interface, ensuring that all components followed a well-defined visual and functional standard.
Support libs
We created a new library of icons and illustrations.
6. Application Guide Documentation
Domo DS includes documentation for each component, which can be accessed here: [Domo DS Documentation](https://domo-ds.dev.sensedata.io/)
7. Component Development in React
Domo DS is developed using React/TypeScript as the primary stack. Additionally, styled components are used for CSS-in-JS. All components have unit tests (Jest) and property validation done with PropTypes.
8.Evangelizing the Use of Domo DS
After implementing the Design System project, the design and development teams joined forces to share knowledge with other design team members and development squads within the company. The goal was to empower these teams to adopt the Design System in their new projects.
9. Results Achieved with the Design System Project
- Reduced the planning and development time for components in new projects from 1 sprint to 1 day.
- Decreased the time required for complete prototyping of new interfaces by 50%.
- Significantly increased the productivity of the UX and Development teams by eliminating redundant tasks.
- Created 100% reusable components.
- Reduced costs in design and project development.
- The product is now scalable, providing greater agility in evolution with consistency and quality.
- Improved communication and knowledge sharing between the design team and development squads.
Additionally, we achieved 1st place in the company’s SKR project awards for the year 2022.
Acknowledgments
I would like to extend special thanks to Juliana Oliveira and André Alcântara, members of our UX team, who played essential roles in this project. I also want to thank the front-end developers, Brunno Monte and Gustavo Cintrão, for their exceptional work. Additionally, I am grateful to my Head of Design, Alexandre Costa, for believing in our vision and providing us with full support and freedom to lead this project. Together, we achieved remarkable results.
