Top 14 brand design systems and why your business needs one

These benefits are extremely attractive, especially for tech startups and small businesses. Let's explore the design systems of 12 industry innovators and see what we can learn from their experiences.

What is a design system?

A design system is a collection of core user experience (UX) and user interface (UI) elements designed according to clear standards. They have to be well documented for future usage of other designers and developers. It guarantees consistency and logicality of all elements of the product.

UX design applies to both physical and digital products. On the contrary, Ul design applies only to digital products. A good Ul design results in products that delight users aesthetically. UI is focused on how we perceive design elements, while UX is also about interacting with them.

Best design systems combine both approaches. The result is users who are happy with both the product's effectiveness and their aesthetic experience with it.

As if by magic, design systems turn clutter into order in the working process. They create a shared vocabulary for designers and developers by identifying common functionalities, categorizing them, and creating usage rules. Then, with the system as foundation, designers and developers can keep on improving the product and turn new ideas into reality.

Design systems promote cohesion and consistency, enabling faster production. Even with staff turnover, your brand and website remain dependable. A good design system results in a consistent environment for the team and a powerfully flexible structure for problem-solving. Eventually, it turns into a well-crafted user experience for your customers. All effective design systems build good relationships between products and users.

Why is user experience so important?

User experience is all about making people happy while using your products and helping them achieve their goals. So, user experience is crucial in meeting people's needs. Customer loyalty grows when users have positive emotions about your products and brand.

Why do companies create them?

Companies create brand design systems to eliminate repetitive tasks for designer and developer teams. This frees up employees for more innovative ideas to move projects forward. Isn't it great to specifically address the customers’ pain points and bring innovations to the market fast?

Companies who have the following product characteristics particularly find design systems valuable:

• Products need to look and behave similarly;
• Implementation of similar Ul components is necessary;
• Products duplicate low-level functionality;
• Products must be white-labeled or themed;
• Products suffering from visual regression bugs (an error affecting users’ visual experience of using your software);
• Products are built on different tech stacks (a combination of technologies used to develop and run applications or projects).

Design systems provide the following benefits for companies:

• provide a single source of truth (SSOT) - a programming term for a single location - for building Uls;
• decreases maintenance;
• saves time and money;
• increases consistency;
• UX teams can focus on the experience. while development teams can focus on implementation;
• improvement of user experience through their well-defined and learned behaviors.

Style guide vs design system

A style guide is a compilation and reference source for all design decisions needed for a website – color scheme, typography, spacing, imagery, icons, etc. But, it is only a subset of a design system.

A design system has building blocks, patterns, and rules that work together, and style guides form only an element of the building blocks. The main difference is that a design system has standards and documentation accompanying all the visual assets. It also includes a guide on why and how to use them.

Marco Suarez of InVision explains that design systems involve:

"...understanding not only the what but the why behind the design of a system (which is) critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding."

A design system covers the principles, rules, and constraints implemented in both design and code, as well as the administrative details of working in a digital environment. Don't forget about the file structure and file management procedures – everything to simplify and speed up how designer and developer teams work.

The current state of the industry

According to The State of Design Systems 2020 study, 25% of survey participants indicated that their design systems have been in place at their organizations for only 1-2 years. So, it makes them relatively new in the industry. 80% of those surveyed revealed that they built their design systems in-house because it best represented their companies’ brands. 22% said the reason is that it addresses their products’ specific-use cases. For 14%, the reason is their existing framework or tech stack constraints.

However, the data also showed that small to large regional companies of less than 5.000 employees have been creating more design systems than the larger, multinational companies. More mid-sized companies with 50 to 1500 employees increasingly use design systems to improve their product design and teams’ processes.

According to Columbia Road, the future of design systems will be more adaptive and intelligent. They predict systems to become context-aware and self-creating. Hayley Hughes, an Experience Designer of Airbnb, emphasizes that ultimately, design systems are about relationships and meeting people's needs. Therefore, there is a need for more understanding of context first before building systems.

"The products we design are always influenced by the users’ world. By bringing context into design systems first, before building the components, we enable teams to make more confident decisions and deliver the best outcomes for their users."

What you can learn from the industry

The design system industry evolved in 3 time-period phases. Along with these major phases, three important lessons can be gleaned.

In the 1960s, the industry started with pattern libraries. They are design elements collections that repeatedly appear on a website. The pattern library defines what these elements look like and how they behave. And also how they are coded. They provided mostly form rather than function, but they were the starting points of consistent designs.

To make better sense of the then-emerging Ul world, designers created collections as a guide for other and future designers. The most notable of these collections are Jenifer Tidwell's Designing Interfaces guide and Ul Patterns. According to In Vision, a key lesson from this era is to keep abreast of your peers and competitors to help guide and fine-tune your own design system.

In the early 2010s, there was a major shift in the digital products and the platforms delivered. Mobile technology changed everything. Desktop-based software and Flash-designed websites conceded to mobile applications and cross-platform Uls.

With these changes, Brad Frost formalized his ideas into the Atomic Design framework. It established a UX framework that looks at design elements in a modular way for designers to build on and repeatedly use. This was the first time guidance was provided for the use of design elements along with the elements provided.

“Atomic Design is inspired by chemistry. Just as all matter is made out of atoms that combine to form molecules, which in turn make up more complex organisms, Atomic Design involves breaking a website down into its basic components and then working up from there to create a site.”
_{www.creativebloq.com}

The second key lesson is to think modular and repeatable. You still should fully and freely allow creativity to flourish when building design systems.

In 2014, Google launched Material Design, which sought to combine the best practices of the early pattern libraries and Frost's Atomic Design. It created a unified visual language that was consistent across all devices. It was carefully thought out and logical principles, which made Material Design the next major step in the design system industry's evolution.

The third key lesson is that it's not enough to just have a library of elements or a framework for the use of these elements anymore. A design system must have a rationale, principles, usage guidelines, and direction to provide real power and value to companies and their users.

Best practices

Deciding to have a design system built is a meaningful process that requires investment in thought, time, and resources. Choosing a starting point alone can be daunting.

Here are foundational best practices to consider:

1. Start with the basics

Begin with interface audits. Investigate every component, examine their inconsistencies, and file these for review. This can become the starting point for developing guidelines.

2. Developers and designers must work closely together

Communicate this early. Build a core team of strong designers and developers whose qualities make a good match. They will champion your initiative and drive it forward. The benefits of a good design system must also be communicated effectively to all the team. It is not just another project but a product you are creating to support all your existing products and serve your customers better.

3. Ask questions and build guidelines from them

Helpful starter questions can be:

• What problem do we want to solve?
• Is there an already built component we can use to solve that problem?
• If we create a new component, can it solve other problems?

4. Keep it simple

Only build components that are essential for your current and projected needs. Remove any unused elements from your system. Strike a balance between control and freedom by customizing single components only when needed. No need to build customization preemptively all throughout.

5. Build for scale

This means adapting your design system to a smaller or larger sphere, like considering the use of your components and patterns in smaller or larger different channels than what you started with. This is done by having clear principles, design guidelines, and standards. This makes it easier to scale components and patterns as the team or organization grows and evolves.

6. Communicate with other teams

All throughout the process, keep communicating with other teams and stakeholders. Find out if other teams and stakeholders see value in a component. Generate discussion to achieve the most efficient and effective system possible. Key decisions that influence the entire system must be made public to all stakeholders.

7. Enable smart documentation

According to UX Planet, smart documentation is replacing heavy documentation with lightweight, interactive and easily accessible. Document everything – what you planned, what you did, what you have been doing, and what you are planning to do. Explain why something happened. For instance, why you chose the way you did and how to avoid duplicating work.

8. Build a robust process as you go along

All the preceding best practices will contribute to this last point, enabling your team and organization to grow and contribute to the process.

Throughout all these, the business owner/product manager plans the process, defines the road map, and facilitates communication between designers, developers, and everyone else involved.

Top 14 brand design systems

We consider the following commercial brand design systems from different industries as perfect to follow its example and learn from, even for beginners. They are listed in alphabetical order below with some of their best features:

Atlassian design system (Atlassian)

• There is a structural relationship between the brand and the design system.
• It has recommendations for the design and use of illustrations.
• It has very simple but complete component documentation.
• It has excellent guidelines for creating and writing content.
• It has very concrete and solid guidelines for accessibility.

Backpack (Skyscanner)

• It provides a good definition and examples of using the tone of voice.
• It has a detailed inventory of all system design tokens.
• It shares an almost complete and free iconographic family.
• It has the availability of different versions of components.
• It has accessibility guidelines for developers.

Carbon design system (IBM)

• It has complete onboarding documentation for design and development.
• It has top-quality documentation of each of the system components.
• It has perfect guidelines for data visualization components.
• It has documentation and use of related scales for different system components.
• It provides for the definition and sharing of collaboration models and sending contributions to the evolution of the design system.

Fiori design guidelines (SAP)

• It has onboarding information and an overview of the entire design system proposal.
• It has clarification and documentation of the system architecture.
• It has a description of navigation models and their variations.
• It has theming (definition of different themes).
• It has different guidelines and examples for the motion design dimension.

Garden (Zendesk)

• It has guidelines for creating and writing content.
• It has a listing of specific words used in writing content and messages.
• It has a detailed button component documentation template.
• It has interactive models of each component of the design system.
• It has a relatively simple but interesting documentation solution for circumscribed systems.

Goldman Sachs Design System (Goldman Sachs)

• It has detailed documentation of each system component.
• It has practical examples of using spacing definitions in components.
• It provides guidelines for writing messages.
• It has very good recommendations for and documentation on the use of grids.
• It has recommendations for using the design system with Figma.

Global Experience Language (BBC)

• It provides a simple and useful component documentation template.
• It has excellent guidelines for grids and their construction logic.
• It uses its own typographic family throughout the system.
• It provides practical, "how-to" guides for certain activities and tasks.
• There are thematic articles on the daily challenges of building and using the design system and how this relates to the UX discipline.

Helicon by Halo Lab

• It's an example of the small but carefully designed systems, with 5 main sections: typeface, colors, frames, elements and icons.
• It is organized in a simple way, what is good for developers' perception and convenient for workIt is connected with the style of the whole design: nice and clean.

Helpscout

• It's a good design system for online support ticketing without the typical help obstructions, with the scale and efficiency of a helpdesk and a seamless customer experience.
• It's a pure-play SaaS (Software as a Service) helpdesk solution that can help small businesses manage customer relationships.
• It's one of the small but beautifully designed systems, with only 3 main sections: visual elements, content style, and product design.
• It illustrates how its clear brand design philosophy translates into its distinct brand features in the system.
• It is a recommended resource for work that involves ticket submissions, help desks, knowledge bases, support forums, FAQs, and wikis.

Lighting design system (Salesforce)

• It has different iconographic types and models.
• It has a complete listing of all system design tokens.
• It has a detailed description of design system updates.
• It has Sketch plugin development.

Love Expands by Halo Lab

• It has complete onboarding documentation for design and development.
• It has recommendations for the design and use of illustrations.
• It has a rather simple for understanding but complete component documentation.
• It has various versions of components.
• It has interactive models of each component of the design system.
• It has practical examples of using spacing definitions in components.

Material design system (Google)

• In design system history, it was one of the first major design systems.
• It is one of the most complete design systems with public documentation.
• It has specific instructions for creating different themes within the system, with examples of themes.
• It has very good documentation, especially for areas on accessibility and usability.
• It provides additional resources, plugins, and materials to the system.

Spectrum (Adobe)

• It provides a detailed description of its system evolution roadmap.
• It has guidelines for the bi-directional design of components.
• It incorporates and documents the token design concept.
• It has documentation of the responsive solution and grids used in the design system.
• It has checklists and suggestions for good practices for accessibility.

Polaris (Shopify)

• It defines the information architecture of products and has guidelines for work.
• It has interactive models of each of the design system components.
• It provides useful information for defining and creating content.
• It has recommendations for using sounds in experiments.
• It has relevant documentation of best practices for data visualization components.

Why design systems mean success

Design systems set your company up for success by providing the behind-the-curtain structure. It will be a foundation for building a consistent brand identity and user experience that can transition smoothly and efficiently from one phase of the product cycle to the next.

In the current web-centric world, the quickest way to lose a potential customer is through a faulty website and a poor user experience of your company website. No doubt that a good brand design system can avert this.

Who can build a design system?

There are design system makers and design system users. The design system makers are those who create, maintain, and govern the system. They work closely together for a smart, flexible, and scalable system that addresses the needs of the business and its users. This usually involves those responsible for products, visuals, UX, quality assurance, and front-end personnel, along with designers and developers.

The design system users are the teams across the organization who will take the system and use its interface patterns for specific applications. This involves more people engaged in the front-end, back-end, UX, visuals, and third parties.

How to create a design system

There are four basic steps to follow in creating a design system. These steps are:

• Audit existing products Go through each of your products and review all of their front-end design elements. Then build a catalog of UI components and visual elements. This will form your design system's foundation. Identify any design inconsistencies and record these for appropriate design decisions later as you build your system
• Define design language. Set up clear design principles about how you want your customers to feel while using each of your products. Create guidelines for embodying these principles in your design. Your design system and language should then lay out how these principles and guidelines make customers feel the way you want with the design. Visual design language would include color palettes, typography, iconography, and imagery.
• Build a pattern library out of common design elements. There are 2 main types of patterns – functional and perceptual – working together to form the building blocks of your designs. Functional patterns define the structure, while perceptual patterns define the visuals. These patterns form a library that should be both structurally sound and visually aesthetic, evoking the appropriate emotion from your customers. These UI components are reusable and can then be used to streamline your design in the future.
• Document the guidelines on when and how to use the design elements. Key guidelines should include instructions on how team members can contribute to the design system. For example, how to report an issue with the design system, how the team plans to address ongoing maintenance issues, and how you will govern consistency between design and production (coding).

Is your business ready for a design system?

So, you probably want to drive brand awareness while saving time and money for the long term. If you wonder if a design system is appropriate for your company, consider if these questions apply to your business:

• Is your company building several digital services for multiple platforms?
• Are you building them with a large internal team or through multiple vendor teams?
• Do you want to speed up your products’ design and development processes so you can get your digital innovations faster to the marketplace?
• Have you received customer feedback saying how your digital products are not easy nor logical to use?
• Are you concerned about providing seamless brand consistency across different digital channels?

If any of these is about you, then your business is ripe for the development of a brand design system. We at Halo Lab would be happy to help create your own brand design system. Contact us, and let's discuss your goals.