Design system is a term that is quickly becoming widespread within our industry. Generally, a design system can be defined as a set of shared, integrated patterns and principles, which define the overall design of a product. In reality, there are as many forms of design systems as there are creators. The form and content of these systems vary by their purpose and users, which is exactly how a system should be designed. A design system can include a style guide, a component library, code examples, use cases and guidelines. It can cover rules of how to use specific components and even define its own naming conventions. It can be large in size and cover ample material, specific for large teams, or be more liberal and free-flowing to allow liberties for small, core players.
The key element present in these systems is constant change. If software development is continuous, the design system's evolution should also be continuous. This is to ensure the tool provides the necessary support for development. A design system is a living tool created together by many authors - not a predetermined set of rules on pdf somewhere in the company's cloud.
We had the pleasure to put the idea of a Design System to a real test with our client Roima Intelligence. Roima develops software for manufacturing companies and their expertise is far reaching in the manufacturing and technology industry space. Vincit helped build a new Look and Feel for all of the product lines and brought more streamlined ways of working for teams inside Roima.
Bringing teams together
Design systems help communicate more efficiently. When a component is set as "a drop-down", the designer, client, and developer all know what it is. The entire process of developing new products and creating new interfaces becomes more streamlined, as design systems unify teams and bring understanding between stakeholders, who may occasionally have difficulties communicating their thoughts to one another. The design system provides a single source of truth, always up to date.
To make sure that the basis for the Roima design system would be founded on common ground, we held workshops and interviews with developers, project managers and sales personnel to discover how we could help them improve their efficiency at work. We tried to find answers to these questions:
- How do you work?
- What kind of tools do you use?
- How do you solve problems?
- Who currently solves design problems in your projects?
- What are the biggest obstacles you face in your daily work?
Efficiency vs. creativity
Efficiency is a strong argument in favor of creating a design system. Avoiding designing and implementing the same things repeatedly is faster, cheaper and easier. But how does it reflect on creativity? The goal of a design system is not to make designers obsolete, but to let them dive deeper into their work and innovate. In this day and age, we have no time to repeatedly focus on the small decisions - we must look forward towards what is coming ahead. Once validated, these decisions will also find their way into the design system.
Do we need a Design System?
- Working with more than one product. Especially, if you have several products and teams under the same brand/company and you feel like there could be benefits from sharing knowledge, styles, components and more.
- Working with one product. You might even have a light version already. Making it a “system” basically means gathering all the information in one place and making it accessible. This usually brings out different ways of working and may be beneficial to do anyway.
What kind of system is the best one?
Based on the Roima’s desire to update the look and feel of its products, and the discoveries made during the interviews and workshops, we decided that the most helpful tool we can create was a technologically independent Style Guide, which would cover the “look” of all the product lines and projects at Roima. We selected a number of popular design principles (such as Atomic Design) to be used as a basis for the Style Guide, and designed new looks for the most commonly used elements found in the current products, and a handful of other modern components for future use.
As for what might be the best solution for your team and your product, that’s really up to you. This is a tool for everyone, so we recommend to get people involved. Preset processes dictated from the top down are tricky to implement in day-to-day life - no matter how brilliant those processes may be. This is about creating cultural change in your way of working. This takes time even if people are willing to adapt.
Take the time to ask the teams, clients, designers, developers, sales people - everyone who comes to contact with the design system, about their work methods. There are so many details to figure out; tools (Word or Google Docs), technologies (HTML, React, JS, CSS, SASS etc.) and more. The more decisions you can make at the beginning the better.
Delivery, Deployment and Development
The most challenging part was to change the working culture of each individual person. Our style guide expanded into a full-blown design system called REX - Roima EXperience - that encompassed the entire journey through the services and project processes of Roima. Based on the information gathered during the discovery phase, we created a Customer Journey Map, and found out the best ways to deliver the new ideas and tools to the developers, project managers and sales personnel. In the end, we decided that “true change comes from within”, and approached each person or group individually to share our thoughts.
After the initial acceptance of the Design System and the new processes, both have been in constant development. The requests for design has increased drastically, and the need for visual as well as UX designers has grown.
The fruits of our hard work are starting to materialize with growing customer satisfaction and markedly improved user experience and visuals for the entire product range. But the journey has only just begun and the growing Roima UX team has taken the lead.
Quote from the customer:
The goals for the development project were exceeded. Roima now has a Design System for coherent Look and enhanced Feel. This has greatly improved the user experience of our products and our proficiency to design new user-friendly solutions. At the same time, our understanding of user experience has expanded from software development to include sales and services. The concept of Roima Experience currently refers to the entire customer interaction. This is a remarkable shift to more customer-focused products and services at Roima.