Have a living design system - Save time!
- Aug 18, 2023
- 3 min read
Overview
Design systems are the basic elements of designing a product, that gives freedom to scale and a standard to refer to, while delivering designs to the team. This is a case study of the practices that I follow to create and maintain design systems for both new products as well as existing products which have been around for a while.
Mood boards and inspiration
For each new product, the design process begins with collecting mood boards and inspirations on how the product needs to look, the mood and the tone of the product. Based on the domain and the type of users, it is first decided on how much of a UI innovation would be allowed. Sometimes, stakeholders don't have expectations and designers can surprise them with multiple options. But, other times, there are some specifics which need to be followed. In any case, mood boards can be of help to understand and communicate with the stakeholders and the team on what is expected.
Then, some mockups are designed to create an effect of realism, to shortlist some ideas. The next step is to create some colour palettes and work on font options which can communicate the tone even better.
Adaptive Innovation
While designing for already existing products, designers are required to follow the prevalent design components. However, in most cases, these design systems are outdated and the final developed components don't match the design guidelines perfectly. When there is so much design debt to address, it is expected to be ignored and made up for in the future releases.
As a designer, I feel that it is my responsibility to try and reduce the debt in ways that I could. So, I take up the task of creating updated design systems that match the current product style, also maintaining the core design styles and finding the major discrepancies between the two. In the following planning sessions, I bring up the issue of the design debt and the most efficient changes are first implemented, so that the product's design system stays on track. There was one such issue in an existing product, where I found 13 hues of the primary greyish blue colour!
Another challenge is when a new component needs to be designed, it needs to follow the existing design system, however out of trend it might be. In those cases, I take the little creative freedom available and bring in innovation to interaction animation using Motion Design, where the component still looks like the existing design system, but follows some of the current design trends and definitely gives a better experience to the users.
Dynamic Updates
The core purpose of having a styleguide is to use it as a point of reference for design. So, keeping it updated is necessary. A tip would be to create the component every time a new variant or instance is to be used. This way, design debt can be reduced drastically, also helping us to keep track of any similar components that might exist.
A living design system created using tools like Storybook helps the developers be onboard with the process. These tools are designed to work well design tools like Figma .
Continuous audits
With a living design system, the benefit is collaborating with ease. But, that doesn't imply that it is being used in the right way in the development. Sometimes, there are continuous discrepancies between the design and the released product, in spite of using a single source of design references. The problem here might be addressed by a similar approach as code quality analysis.
With continuous audits and quality analysis being included in the agile delivery process, one can reduce the design debt effectively.
Conclusion
Creating and maintaining design systems might seem like a tedious task, but as Abraham Lincoln said
“ Give me six hours to chop down a tree and I will spend the first four sharpening the ax. ”
Once the design system becomes alive, it saves hours and hours of repetitive design and miscommunication between design and development teams.
