Many different types of organisations are today increasingly adopting Design Systems in order to achieve maximum efficiency in their digital development. However, Design Systems can face challenges brought by the effects of business transformation, corporate merging or brand identity changes. How can Design Systems be built to survive the potential increasing complexity and challenges of the evolving environment where they belong?
We already know that Design Systems evolve constantly with the products they serve and due to this fact they require a flexible structure in order to be maintainable and scalable, but we also believe that there are other valuable points to consider. In this article we will go through the points we consider as main ingredients for a successful Design System.
Things to consider from the early start
Collaboration
Typically a Design System is born from the initiative of a business unit or a department managing different product development projects, aiming to prevent wasting design and development resources by introducing reusable frontend coding.
Although setting up a common frontend development library and UI kit can somehow improve consistency between isolated teams, the real efficiency of a Design System is ruled by other factors that enable and encourage true design and development cooperation between the teams involved. One of the most important of these factors is inclusion. It is a wise step to bring together all designers and developers from different teams and make them share their encountered issues, questions, doubts, suggestions, and opinions. Giving everyone a voice will increase a feeling of inclusivity and a sense of ownership, which will result in more involvement, synced work, and efficient collaboration.
Tip: Get in touch and get to know the users of the Design System and their needs. Schedule recurrent meetings with a collaborative topic agenda and structured facilitation for product team owners, designers, and frontend developers.
Strategy
In large or merging organisations, the Design System might need to be introduced and adopted by new business units and their stakeholders, and they will only adopt it if they understand the value of it. For this reason, it is important to consider the Design System as a product from the beginning, requiring a clear strategy that defines:
- Foundational values – In which values the Design System is based?
- Users and needs – For whom are we doing it?
- Product ecosystem – The potential products/teams we can serve
- Team – Who has the ownership? What are the resources?
- Vision, mission and goals – Why are we doing it?
- Product features – What is included or delivered?
- Value proposition – What are the benefits of using it?
- KPIs – How will the impact be measured?
- Roadmap – An iterative and updated long-term plan
Tip: Start by defining assumption based user personas by first gathering through collaboration boards the needs from all the teams involved and consolidate them into the needs of each user persona of the Design System.
Atomic flexibility
An atomic design approach benefits flexibility and scalability of components into new requirements. The tokens and components of a well-structured Design System are easier to adapt to challenges brought by the new product requirements or new brand identities, enabling the maintenance of consistent user experience across different products.
Tip: It is good to keep flexibility in mind from every perspective, one example is to think about the naming structure of the tokens, eg. avoiding naming conventions that include color names relating to a certain brand identity color palette.
Templates, contribution flowcharts and design principles
Component documentation is not enough to bring consistency between product teams. Because designers can interpret and use information in many different ways resulting in an increasing amount of solutions for similar purposes, it would be convenient to document templates including already coded components in order to support the consistency of design.
Before the creation of new components, it is useful to confirm that there aren’t other existing coded components that could be used or adapted to new product requirements. This could be done by following a flowchart for component creation and usage. Since most of the initiatives for new components come usually from product design, it is convenient to start the flowchart from the design perspective considering differing option paths towards development stages.
The consideration of good design practices to achieve a more consistent experience across different products can be consolidated and promoted within the Design System by defining and documenting a set of design principles. These principles should be based on the foundational values defined within the strategy and they should include some detailed examples of their application in order to serve effectively design teams.
Tip: It is convenient to create and validate flowcharts, principles and other guidelines in collaboration with all designers and developers involved in the Design System, that will be the way to ensure that everyone will adopt and apply them into their work.
Tools and technology
The usage of too many design production and documentation tools adds complexity and makes it difficult to follow the consistency of design and delivery of technical specifications. It is important to research tools available in the market and opt for products that will allow consolidating as many features as possible within a single environment.
Tip: There are some good tools consolidating many features in a single package. Consider studying these tools and give the team the chance to decide on the most convenient and efficient option.
Efficient documentation
Clear and efficient documentation impacts production velocity and avoids siloed decisions. On a large scale this translates into saving the efforts of repeating tasks and duplicated work, saving effort and resources.
There are more options today for Design System documentation platforms, but perhaps one of today’s most valuable features to consider for a documentation tool is the ability to showcase live coded examples. Is very useful to see and try components in action already from the documentation. This will allow any user to test eg. the responsive behaviour of the coded components.
Custom platform solutions give designers the ease to test lively the reliability of components when eg. changing contents or language version. This could ease the finding of issues on a design that might be good to fix before proceeding into final product production.
Tip: Designers and developers should come to a common understanding of what would be the best platform tool to enhance their daily Design System use. Which features are the ones that will really boost their efficiency in production?
Leadership and communication
A Design System cannot succeed without effective communication and good leadership. A successful Design System equals a community of designers, developers and other product stakeholders sharing commitment in achieving maximum efficiency of performance in product development, usability, accessibility and improved user experience. A positive atmosphere promoting trust, psychological safety and transparency are essential to building respect, collaboration, inspiration and commitment within all the parts involved.
Spread the word. Opening communication channels to invite and keep stakeholders updated on new features or promoting transparency on decision making are also convenient practices, but they might not be efficient enough without some sort of planning. Excess of information or repeating communication can easily turn unnoticed or ignored. What are the important things to communicate and to whom? Which will be the channels to be used for different purposes? These can be some questions to think about when making communication decisions.
Tip: Executing more planned communication can enhance the impact on the interest and involvement of stakeholders.
Dedicated development resources
All the previously mentioned things can become basically worthless without the required amount of dedicated development resources (Design System developers) or appropriate distribution of the development work (contribution from the teams). It would be suitable to have at least one dedicated developer within the team, who could plan, document, coordinate and lead the frontend work related to the Design System.
Tip: It is important to consider and evaluate in advance the potential risk of running out of development resources in case there is a significant growth of frontend requirements.
Conclusions
A great part of the success of a Design System relies on how well it achieves to integrate stakeholders into a collaborative community, sharing common goals, principles, and open communication by defining a clear strategy.
The use of documented decision-making flowcharts together with a set of defined design principles can effectively support product teams to achieve a better, consistent user experience.
In order to enhance the flexibility and scalability of a Design System, it is important to build its components based on an atomic structure and to use descriptive token naming conventions that are not structured by elements of a specific brand identity.
Ensuring enough frontend resources and work distribution it is crucial to respond effectively to product development needs with the required speed.
Read more on Design Systems:
Design Systems Simplified – An outlook beyond the trend
Why you should definitely have a Design System in place already
