November 5, 2019
Design System: 100% consistent user experience
Some background information
Initially, there were brands. These brands sold products and communicated them through posters, flyers, POS in stores... And after, digital arrived. Brands wanted to display their identity on a screen, like a business card... But it didn't work.
Today, every brand has to manage an impressive number of products, both physical and digital, for external customers and internal colleagues... These products are all designed by different teams who sometimes don't even know each other.
Graphic charters, as they were before, are no longer suitable and do not fulfill their primary role anymore: guarantee the brand's consistency on the various media and more specifically in the digital. During his journey, the user often finds himself confronted with disruptive experiences, whether graphic or functional. This is why the graphic charter has evolved to give way to design systems.
What's a Design System?
The design system is a single, living and evolving point of contact, made up of guidelines, resources, tools, code and reusable components, to help teams produce consistent, high-quality and competitive experiences.
A design system also brings teams around a common state of mind, often based on sharing and contributions.
"A Design System is the story of how your organization designs and builds digital products" Brad Frost
A full design system includes:
Clear and shared principles and objectives
Assets specific to the brand's identity (colors, icons, shapes...)
Operational components (design+code)
Clear guidelines (UX/UI/tech)
Tools (UI kits, component libraries...)
Examples and proper practices
Here are two public design systems that include all or part of these elements:
Carbon - IBM design system
The determination to set up a design system must meet clear and specific objectives. The most regularly highlighted by companies are the following:
Ease teams' work and unite them around common objectives.
Get a consistent user experience among products of the same brand and/or among various platforms of the same product (e.g., ios, android, web,...).
Reduce production costs by allowing designers and developers to reuse elements already made by others.
Quickly test new ideas or concepts on the market by capitalizing on what has already been done.
By defining these objectives well in advance, the design system's success can then be measured using specific indicators.
Where to start?
Do you really need a design system? The determination to install such a system should come from real points of frustration in the teams or from concerns about quality or consistency in the user experience. Therefore, it is essential to ask yourself the right questions before undertaking anything:
What frustrating points must be resolved? Are the teams communicating poorly with each other? Are the suggested experiences inconsistent? Is there a significant disparity in quality between teams and products?
-> No problem found, no need for a design system!
Who will be the design system's main users? Designers? Developers? Product owners? Marketing or communication people? What are their expectations and what would help them be more efficient in their daily work?
-> Defining the target will allow you to be more relevant on the elements you offer in your system.
What is the scope?
What products will the design system be used for? BtoC products or in-house products? And on which technologies: web, native, virtual reality...? Should this system be used to create digital products only or also "physical" products?
-> You won't be able to cover everything, at least not at first. Concentrate first on what will create the most value.
Who will manage it?
Who will manage the system? Who will validate the elements that will be shared with everyone?
How should teams organize themselves in relation to the system?
-> The importance of this last question should not be underestimated because the success of a design system often lies in the company's ability to adapt its organization. Sharing elements among various poles and making them evolve centrally can have a strong impact on the company's organization and ways of working.
Mistakes to avoid
Here are a few mistakes I often see in the implementation of a design system. Your goal: to avoid them :)
Don't start too soon
Some teams tend to want to set up a design system as soon as they create their product. For me, this approach requires some maturity. Maturity of the design and development teams, but also of the product's business model and its raison d'être. So, wait until your product has stabilized before you start!
Don't underestimate political and internal deadlocks
These deadlocks, as well as the inability to get out of working in silos, are one of the main causes of design system failure. This is why it is important to make sure that you have high-profile sponsors in the company who are convinced by the concept and who will allow you to free up budgets in the long run.
Don't rush things
One of the most common tendencies is also that of wanting to start with components, without asking beforehand if they correspond to the users' and teams' needs... This often results in a flawed system, with elements that do not satisfy anyone. It is crucial to take the time to build a solid system, by going through a "pilot project" period. All the components included in the system must be checked and tested in real life in the products that will use them.
Don't pollute the system
It's easy to fall into the trap of wanting to put everything into the system: "It will be useful someday". The problem is that the system quickly gets too heavy and polluted with elements that in the end only serve one or two teams at most. The best practice is to always put in the system what is most common and shared among all the teams!
Therefore, a design system is a product that allows you to build other products. Like all good products and if you want it to be used, it must be created in a user-centered approach. The more this system will be part of the designers and developers' workflow, the more efficient it will be.
So, don't rush right away to create the tools and assets that will be part of your design system, but rather take some time to think about your target audience and what they really need to work better. And always keep in mind that all this work must significantly improve the end-user experience!
If you are interested in this adventure, I have only one piece of advice: create a design system that suits you and, above all, that will bring you together!
My medium articles:
The book we wrote on the subject:
The Design System community in France
We regularly organize meetups and very practical/useful workshops to get started on the subject. Do not hesitate to join us!
All articles from the category: | RSS