Your guide to enterprise UX - Chapter 7

Create and manage an enterprise design system with Justinmind

Create and manage a design system with Justinmind

Enterprise design systems are changing the way we work. Find out what they are, why they work, and how to set up a design system.

Responding to a widespread problem with the lack of scalability in web and app design, enterprise 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 and help to maintain consistency while speeding up processes. A design system defines what should be done to create a user experience - its components; and why that should be done - its standards.”

									Sergi Arevalo - Chief Designer at Justinmind								

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.

Google's Material Design - Design System example - Justinmind

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, an enterprise design system provides space to focus less on pixel-by-pixel button design, and more on what’s really important: building a better product.

You can find several interviews with top UX gurus and UX designers on the Justinmind blog too!

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.

Create and implement an enterprise design system with Justinmind
Download Free

Seen in organizations from Airbnb and Spotify to IBM and the UK Government, enterprise design systems are already impacting the products and services you use, and the organizations that produce them.

Airbnb - Design System example - Justinmind

How do enterprise design systems work?

Enterprise 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 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.

IBM - Design System example - Justinmind

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 an enterprise design system?

Enterprise 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 an enterprise design system could offer real improvements in terms of efficiency and consistency.

Enterprise 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:

Spotify GLUE - Design System example - Justinmind

“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.”

									Stanley Wood  - Head of User Experience at Volvo								

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.

material design within spotify's design system

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.”

You can read more about Wood's experience with enterprise design systems on his comprehensive article, entitled Design Doesn't Scale.

What does an enterprise design system look like?

The more you look at different enterprise 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.

Enterprise 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.

Shopify Polaris - Design System example - Justinmind
  • 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.
  • Components
    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.
  • Patterns
    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 Polaris accessibility - Design System example - Justinmind

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.

“...build something that enables your designers to create better things faster and doesn’t just police the great designers you already have.”

									Kyle Peatt - UX Director at Shopify								

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.

Whoops.”

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:

UK Government GOV.UK - Design System example - Justinmind
  • 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.
UK Government button component - Design System example - Justinmind

The GOV.UK DS keeps things simple, focusing on Styles, Components and Patterns.

  • Styles
    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.
  • Components
    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
    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 an enterprise design system with Justinmind

Enterprise 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 an enterprise design system.

Custom UI kits

UI kits are an essential part of any enterprise 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.

Create custom UI kit in a design system - Justinmind

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.

Working with templates for a design system - 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.

Design hand-off for developers

Specifications document - Design System - Justinmind

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 enterprise 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.

style definition with design system in justinmind

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 enterprise 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.

PROTOTYPE · COMMUNICATE · VALIDATE
THE PROTOTYPING TOOL FOR INTRICATE ENTERPRISE DESIGN SYSTEMS
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers