Design systems are changing the way design teams – and whole organizations – work. Read on to find out what they are, why they work, and how to set up and start using a design system.
Responding to a widespread problem with the lack of scalability in web and app design, design systems are suddenly everywhere. But they’re more than fancy style guides. When properly implemented, design systems can revolutionize organizations, placing UX and design at the heart of the business while improving efficiency and consistency.
What is a design system?
We asked Justinmind’s chief designer, Sergi Arevalo, to describe design systems, and we couldn’t have put it better ourselves:
A design system is a collection of assets and standards which are specially designed to use, scalably, in multiple ways and combinations. They foster better teamwork between teams and help to maintain consistency while speeding up design and development processes.
A design system defines what should be done to create a user experience – its components; and why that should be done – its standards.
Design systems should:
- Systematize design in an organization
- Increase reuse of components
- Establish a consistent design experience language
Design systems are important because they reduce design time for projects, improving efficiency and reducing costs. A properly-implemented design system reduces the demand on design resources at multiple stages of the project. They help to ensure that style and experience are consistent, and that everyone on the team including UX designers, business analysts and developers, are always on the same page and speaking the same language.
But they have the potential to go far beyond that. Specifically for UX designers, a design system provides space to focus less on pixel-by-pixel button design, and more on what’s really important: building a better product. As a practical comparison, think about how Agile and similar methodologies have spread from software development teams over the last 20 years, and now impact product, design, business and even marketing and content areas. Design systems can have the same sort of impact on your business. They allow for good, consistent UX and design to be placed at the heart of an organization while simultaneously improving efficiency.
Seen in organizations from Airbnb and Spotify to IBM and the UK Government, design systems are already impacting the products and services you use, and the organizations that produce them.
How do design systems work?
Design systems establish all of the resources, templates, UI kits, interactions, colors, typography, line spacing, and other parts of the UI, together with detailed style guides and interaction guides, into a complete system, before the product is created. By combining all these elements into a single system, a design system goes beyond a style guide and defines a set of rules, constraints and principles for every aspect of the organization’s design and development process.
A design system helps to reduce the scope for unnecessary decision making mid-project. If a system has the necessary templates, copy, UI kit, style guide and perhaps a separate interaction guide, considerably less time needs to be spent designing the product in a way that it matches the design language of other products in the ecosystem. If a button, its color, interaction style, typography and use are all clearly defined in a design system, you avoid uncertainty and unnecessary decisions at multiple points in the development and deployment process.
Who needs a design system?
Design systems can help any organization which deploys a web or app with regular updates, iterations and new screens. At Justinmind, we have worked with a range of organizations from software companies to banks who have all benefited from implementing a design system.
Typically, if your business has numerous UX designers and dev teams working simultaneously and continuously on your product, introducing a design system could offer real improvements in terms of efficiency and consistency.
Design systems: born of frustration
It’s not surprising that design systems are often developed in organizations where something has gone wrong. UXer Stanley Wood talked about his time running UX at Spotify:
We concluded that the fragmentation in the product was just reflecting the fragmentation in the team, that designers spread across so many different projects, timezones and competing timetables, just didn’t stand a chance. And, after all, weren’t these factors inherent in all modern tech companies anyway? It was then that I first heard myself say, “Design Doesn’t Scale”.
But while this issue unsettled me, I tried my best not to engage with it — dismissing it as a lost cause — and focussing on a redesign instead. It didn’t work. No matter how happy I was with a design, it was always dulled when seen alongside several conflicting design-directions. A year after I joined I finally became so frustrated with this issue that I decided to make it my personal mission to find a solution. Surely crossing the arms and accepting that design doesn’t scale couldn’t be the only answer.
The answer ended up being Spotify’s GLUE – its Global Language for a Unified Experience. GLUE now has a dedicated team, charged with supporting designers by facilitating collaboration, maintaining documentation and providing frameworks to support design evolution in the organization.
What does a design system look like?
The more you look at different design systems, the more you’ll see that the whole subject is perhaps ironically plagued by a lack of consistency. While the overarching concept is clear, the nuts and bolts and most especially the terminology used in design system definition documents tends to vary. Here are two design system examples which illustrate how different organizations handle things.
Design system example: Shopify’s Polaris system
E-commerce platform Shopify launched its design system, Polaris in May 2017. Aimed at delivering a consistent and cohesive user experience, Polaris includes content guidelines, design guidelines, components and patterns.
- Content guidelines
A set of standards establishing how to think strategically about writing product content, help documentation, product and feature naming, vocabulary, actionable language, grammar and mechanics, and alternative texts.
- Design guidelines
Standards for using color, typography, illustrations, sounds, icons, interactions, spacing and data visualization.
The components are all the interface elements that can be reused across the ecosystem. They include: actions, structure, forms, images and icons, feedback indicators, titles and text, lists and tables, navigation elements and overlays.
Layout patterns illustrate how to arrange content on a screen. They can include screen structure, standard pages, special pages, layout, navigation, accessibility, and more.
Shopify UX director Kyle Peatt wrote a fascinating article about the origin of Polaris in a company with 225 UXers. It took them three months to build, and it hasn’t been without its problems. He points out the importance of including space for innovation in an organization that implements a design system.
By exerting pressure on the teams to follow our guides and use the system, we created an equal pressure to avoid novel solutions or out-of-the-box thinking. We’d still see good designs that didn’t use the system because it wasn’t working for them — and the system would grow to include those things. But there were far fewer moon shots.
We don’t want to play it too safe as a UX team. The system has to change in drastic ways for it to keep getting better. But I’m scared that won’t happen because we poured so much energy into the idea of consistency. As one of my coworkers said to me after I shared my plans for Shopify’s experience this year, “You spent so much time talking about making things the same, I didn’t realize you were interested in changing things.
He recommends scaling your design system to your organization, starting small and organic, and most importantly:
…build something that enables your designers to create better things faster and doesn’t just police the great designers you already have.
Design system example: UK government GOV.UK Design System
Launched in July 2018, the UK’s Government Digital Service DS is arguably a more traditional approach, with five main intended benefits:
- Everything in one place
The system unites all design patterns, templates, toolkits and code into one system. Improving the access that teams have to resources and guides speeds things up and leaves people to work on what’s important.
- Easy to use
Examples, code and guidance are designed to be as easy to use as possible. All guidance for components and patterns is written in a consistent, coherent way.
- Robust, accessible code
Components and patterns in the design system use a new codebase, which is compatible with existing codebases and tested to meet stringent accessibility standards.
- Fully supported
Along with the new system, a new dedicated team was formed to provide support and maintain patterns, guides and components. Users can get in touch with them on Slack.
- Community driven
Members of the government design and development community are encouraged to play an active role in the design system. Anyone can submit ideas for the backlog, or work on approved additions.
The GOV.UK DS keeps things simple, focusing on Styles, Components and Patterns.
The styles section includes guidelines for color, images, layout, page templates, spacing and typography. Each section includes clear use cases with example images, guidelines and links to additional resources.
Under components, the design system lists all of the potential web components a designer might want to use, from backlinks to warning text. Each component is defined, along with when it should be used, when it shouldn’t be used, and advice for special cases.
Patterns are used to establish design solutions for specific user-focused tasks and page types. Divided into different sections for asking users, helping users and special pages.
The UK government design system also includes a community element which allows members of the government’s many different web teams access to propose and develop new components.
Setting up and running a design system with Justinmind
Design Systems are built into Justinmind’s DNA. Our prototyping software includes all the features you need to set up and manage a design system. Justinmind makes design systems easy to build and easy to maintain, seamlessly syncing changes with your team. In this section, we’ll show you how to create your design system and share it with your organization.
Here’s a rundown of what you’ll need to create a design system.
Custom UI kits
UI kits are an essential part of any design system. They include all the reusable graphical UI elements you’ll use in your product. UI kits reduce the need for repeating design tasks, and secure design consistency throughout products. Many smaller design teams will start off using built-in UI kits for web, iOS or Android – and these work really well when you’re getting started. Custom UI kits, however, help you take UX design to the next level.
When you create a custom UI kit, you get all the benefits of a normal component library, adding in complete design control. The only way to satisfactorily marry design to your brand is by developing your own custom UI kits.
Important: creating a custom UI kit doesn’t necessarily mean dropping all the elements you’ll find in ready-made kits. It makes sense to include standard UI elements whenever not doing so could confuse or mislead your user.
Check out our tutorial for creating custom UI kits in Justinmind.
Templates & default screens
Templates let you design default screens which will be used across your product. You’ll use templates to define the default look and feel of the different screens in your product. Colors, border styles, typography and other UI element styles are all defined in templates. You set the basic layout and structure of your screens in a template, as well as establishing common screen UI elements and events.
Here’s our tutorial for creating templates in Justinmind.
Design and functional specifications documents
Justinmind includes features that allow you to generate specifications documents from your prototypes. This makes it easy to produce a formal print deliverable for your prototype, which can be shared with developers, stakeholders and colleagues. Justinmind takes all the aspects defined in your prototype: UI elements, screens, templates, events, interactions, and presents them in a structured, easy to follow document in DOCX format.
For a more advanced and professional way of working with specifications documents, we recommend creating custom specifications document templates. Using a custom specifications document template allows you to customize the information included, as well as adding your own branding to documents. Follow this tutorial to create your own specifications document templates.
Design hand-off for developers
Justinmind is designed to be a one-stop-shop for designers and developers. Developers can access your prototype and view CSS styles, assets and documentation, all in read-only mode.
Style guide – standards and principles for your design system
To unite all these elements into a functioning design system, you will need to develop clear documentation for all of your elements, UI kits, templates, styles, events and interactions. We recommend using a web interface for maximum usability and consistency – in fact, when applicable it’s a great idea to use your prototype and emerging design system to create the style guide itself. Consider it the first project you’ll create in your design system!
The take-away: design systems allow designers to radically improve their organizations
Design systems aren’t exactly new but many organizations still haven’t taken the plunge. The next few years will see that change. If you’re involved in projects where multiple designers need to work simultaneously, you should be able to see the huge potential benefits of setting up a design system. When properly done, a design system can – and should – have a positive impact on the entire organization.