Illustration by Nayane de Souza Hablitzel
Over the last few years, companies around the world – big and small – have created their own design systems. These systems have changed how we design and build digital products but their value reaches far beyond just managing design at scale. Generally defined as a single source of truth, which groups all the elements needed to allow teams to design, realize, and develop a product, a design system ensures consistency and cohesion, which ultimately leads to better productivity and efficiency, which in turn improves the customer experience and business ROI.
Here we’ll present a quick overview of the key components of a design system, how it can help your brand grow, and how you can convince stakeholders to build, adopt, and maintain one.
What exactly is a design system?
Many big organizations make use of design system software to guide the development of their products. There’s Adobe’s Spectrum, Shopify’s Polaris, Google’s Material Design, and IBM’s Carbon to name but a few. They all establish consistency in design and code, encourage reuse instead of rework, and increase the accessibility and usability of digital products.
The main pillars of a design system
Purpose and shared values
Right from the start it’s important to understand and align the design team with a set of clear goals. Where are you actually going, and why? Make sure the team understands the values of the brand or product in order to stick to the brand objectives. Not only will this keep consistency with the product, but it will also bring the designers together for a more cohesive group.
Design principles
Next you need to explore your design principles. What exactly are you wanting to make, and what should it look like? Put together guides on the purpose of the product to ensure your team really understands what you are creating, so they can make more meaningful design decisions.
Brand language and identity
Essential elements of a style guide include colors, fonts, icons, shapes, animation, voice, the use of the company logo, and more. It’s important to document these, and establish rules and guidelines, so that teams use the right combination of elements. They all represent your brand and help it to be unique and instantly recognizable. Creating a consistent visual design among your range of products – whether it’s a desktop version, mobile app, or a voice interface – will lead to a better customer experience.
Components
Components can be seen as LEGO blocks that are built out of all the other parts covered above. They’re the interface and UI elements – for example, call-to-action buttons, form fields, and checkboxes – that make up the heart of the design system. Created by designers and coded by developers, they minimize the effort required to build a product. By reusing as many parts as possible, you can speed up the workflow, save time and avoid duplication, as interface elements don’t need to be recreated from scratch. Components are also great for rapid prototyping but their functional behaviour must always be specified.
Patterns
Design patterns, meanwhile, are the building instructions or recommendations that you need to use the components effectively across all your products. Standardized patterns also create familiarity, which means things will be quicker and easier for users. It helps them understand your services and establishes trust.
For example, the same sign-up form containing two fields and a call-to-action button can be used in a range of products, both on the desktop and on mobile.
Documentation
Finally, you need some documentation, which describes the design system itself. It includes what the product should look and feel like, use cases for UI patterns, correct typographic scales, code standards and best practices, and more.
Consider bringing design and implementation together in the documentation, as it’ll help designers to know about the implementation and engineers about design guidelines, which ensures both parties make better decisions for the product and its users.
Documentation, which can vary in terms of comprehensiveness and detail, helps the product team use the styles, components, and patterns correctly. Shopify’s Polaris documentation, for example, features accessibility guidelines to improve readability and provide structure to screen reader users.
How to sell your design system
Getting buy-in for your design system across your organization can be challenging. The concept of design systems is tricky to explain to people who haven’t used or created one before and not seen the benefits for themselves.
One of the best ways to sell your design system, so that you don’t have to redesign every year, is to treat it like a product. Every product has users. So point out to your stakeholders that customers can see fragmentation and flaws in the products you’re creating and that you need to make sure you’re perfecting them with every step.
Do some research and find places where improvements can be made to your products in order to better market the need for a design system. What can be fixed, and how can a design system help?
Also emphasize collaboration and explain to your managers how important it is to involve customers but also other stakeholders across the company in the design process, as it will lead to more well-rounded products. Demonstrate how siloes slow down shipping and create duplicate work, and then point out how design systems can put an end to inefficient workflows.
Design systems impact business
Let’s explore the key benefits that will help you get buy-in to start building a design system and ensure it thrives, not fails.
Scale
Creating a system of interchangeable and reusable parts is especially suited to projects that have to scale quickly, evolve, and adapt to various user needs. It therefore makes sense in particular for large organizations, for example in ecommerce, finance and governments.
At Salesforce, for example, there are more than 200 product designers, nine major product groups, and dozens of product acquisitions. As the team is globally distributed, designers from different groups may be unaware of each other’s work, which makes it incredibly easy for user experience inconsistency to creep into the products. The Salesforce Lightning Design System, a living design system, solves this problem by constantly evolving based on business needs. It grows with the brand to support every team, product, and platform within the organisation.
Consistency
According to the 2019 Design Systems Survey, consistency and efficiency are the most valued attributes of design systems. They can help identify and eliminate inconsistencies in design patterns and/or language in a product’s user experience, making it more consistent and the design more cohesive across the brand, which is especially useful when brand touchpoints reach over multiple channels and platforms.
It also makes the user experience more predictable, which is a good thing: you’re making your customers’ lives easier by reducing their cognitive load. Because they’re familiar with how your products work, they don’t need to adjust when switching from the desktop to the mobile version of your product.
Also, the more consistent the image of your products, the more your customers will be able to remember your brand.
Efficiency
Ensuring consistency across all platforms also improves efficiency in development and design. You remove repetitive work and increase automation, which saves a lot of time and money. There is no need to reinvent the wheel — neither in concept, nor code. Freeing up designers and developers can also mean they do more innovative work, while the budget can be spent on growth.
First, understand the context and culture your design system has to operate in. If you want to boost efficiency, for example, define as many pre-made patterns as you can to speed up the team. If you want to boost creativity, on the other hand, you might want to go the opposite route and keep patterns minimal to give designers more flexibility.
Teamwork
Design systems aren’t just for designers. They facilitate smoother collaboration between designers, developers, product managers, user researchers, and many other stakeholders, which in turn improves efficiency. Design systems get people aligned with the defined shared vision for the look, feel, and experience of their products, reducing “illusions of agreement” that occur when people understand abstractions in different ways.
Conclusion
Remember that you’re creating a system. What works for Airbnb or Slack is unlikely to work for your organization, as your context is different, so don’t replicate their design systems. Analyze what’s unique to your brand, the problems you’re trying to solve, and how a design system can help. Before you get started, think about its main components – purpose and shared values, design principles, brand language and identity, components and patterns, and the documentation.
Once you’ve done your research and are ready to get buy-in for your design system, focus on the business case, highlighting the gains in consistency and efficiency in particular. Design systems can avoid costly surprises. Make that clear from the start, and get your managers on board in no time.
Creating a design system can be a lot of work, but it’s also very rewarding to put together and will make everyone’s life so much easier in the long run. In the end, it ensures you focus on improving the user experience of your products, while also improving workflows within your organization. Double win!