1 of 31

Design Systems

Scaling products faster and better with standards.

2 of 31

Do we have this problem?

Let’s think…

Are we always happy with the speed of product development?
Do our products share consistent design patterns, colors, typography and other styles?
Do we always have enough time to deliver a quality product to meet KPIs?
Are we producing our technology with efficiency?
How much time and money do we spend cleaning up design or technical debt?
Are we ensuring our products meet accessibility requirements?

3 of 31

Team

Product

New Styles, Patterns, Ideas…

Every new hire and every new project increases chaos in the process and slows down velocity

Without a Design System…

4 of 31

Design Does Not Scale Through Hiring Only

5 of 31

The business requirements pressure product teams to build more, faster and better, BUT without standards in place, every new hire is going to further slow down the process.

6 of 31

Designer to Developer Ratio Improved by 2.5x in 5 years!

via ‘6 major tech companies have doubled their design hiring goals in last half decade’

& Design Keeps Growing!

7 of 31

Do we have this problem?

Let’s think…

Are we always happy with the speed of product development?
Do our interfaces share the same design patterns, colors, typography and other styles?
Do we always have enough time to deliver a quality product to meet KPIs?
How much time and money do we spend on redundant design or code tasks?
How much time and money do we spend cleaning up design or technical debt?

8 of 31

One NO makes the creation of the design system worthwhile.

9 of 31

We’re not alone.

10 of 31

To overcome these challenges thousands of companies are investing in Design Systems.

11 of 31

Thousands of companies are investing in Design Systems.

Lightning Design System – by SalesForce

Harmony – by Intuit

Audi Brand Appearance – by Audi

Atlassian Design Language – by Atlassian (server)

Apple OS X HIG – by Apple

Polaris – by Shopify

13 of 31

What is a�Design System?

14 of 31

“A scalable framework of decisions & team behaviors across a product portfolio to converge on a cohesive experience.“

- Nathan Curtis

What is a�Design System?

15 of 31

What are the benefits?

It helps everyone visualize the eventual outcome
It trains everyone to view the style guide as the living place for the latest and greatest thinking
It gets everyone comfortable with the mechanics of contributing to the system
Most importantly: Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible.

A happy home for the system’s UI components, design guidelines, processes, tools, and other resources. Even in its primordial state, the style guide website can serve as the flag in the sand that everyone can begin marching toward.

The “living” part of a living style guide means that it evolves to match the reality of the design system. Iterating over the content in the style guide means that the design system makers and users can be sure they’re seeing the most up-to-date info.

Developers tend to serve as the gatekeepers of the style guide since they’re the ones typically setting up the CMS and domain. This is a mistake. The style guide should reflect the perspectives of all the people responsible for the success of the design system and the products it serves. Getting the style guide set up early and training the cross-disciplinary team how to contribute to the system ensures that everyone’s valuable perspective is represented.

This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

16 of 31

What are the benefits? (cont.)

Scaling
Manage your debt
Design consistently
Prototype faster
Iterate more quickly
Improve usability
Build in accessibility

Scale design

As teams grow, it’s common for designers to concentrate on discrete areas of an app like search and discovery, account management, and more. This can lead to a fragmented visual language—like a Tower of Babel of design—with each designer speaking her own language. This happens when designers solve problems individually and not systematically.

With no common design language to unite the product, the user experience starts to break down, as does the design process. Design critiques become unproductive when there’s a dearth of design conventions. To create alignment within teams, there must be a shared source of truth—a place to reference official patterns and styles.

Most often this is a static artifact, such as a design mock, but a static reference will almost immediately become outdated. That’s why teams build monuments like Shopify’s Polaris site—a design system site, built with the system, that documents all aspects of the system including the components, guidelines, and UX best practices. And because it is built with the system, it will always be up-to-date.

An internal design systems site is the best, most accessible source of truth for product teams. It provides the gravitational pull to keep team members aligned and in sync.

Manage your debt

As applications and their teams age, they build debt. Not financial debt, but technical and design debt. Debt is acquired by building for the short-term. Design debt is made up of an overabundance of non-reusable and inconsistent styles and conventions, and the interest is the impossible task of maintaining them. Over time, the accumulation of this debt becomes a great weight that slows growth.

The act of creation does not inherently create debt—just like spending money doesn’t inherently create financial debt. But using a design system will keep you on budget by keeping your design and code overhead low, while still allowing you to grow and evolve your application.

Design consistently

Standardized components used consistently and repetitively create a more predictable and easy to understand application. Standardized components also allow designers to spend less time focused on style and more time developing a better user experience.

Prototype faster

Working within an existing design system allows you to piece together flows and interactions as quickly as pulling LEGO blocks from a bin. This allows you to build an endless amount of prototypes and variants for experimentation, helping your team gain insights and data fast.

Iterate more quickly

Whether evolving the style of your UI or making UX changes to a flow, using a design system reduces effort from hundreds of lines of code to as little as a few characters. This makes iterations quick and painless, and experimentation much faster.

Improve usability

Inconsistent interface conventions hinder usability. When CSS for countless unique interface elements and their interactions increase, so does cognitive load and page weight. This makes for a terrible user experience. It can also create conflicting CSS and JavaScript, potentially breaking your app. By using a design system, you’re able to avoid these conflicts by building a holistic library of components, instead of per page, which means you’ll spend less time in quality assurance.

Build in accessibility

Accessibility can be implemented at the component level by optimizing for those with disabilities, on slow Internet speeds, or on old computers. This is an easy usability win. Encourage contributors to build according to these guidelines and test their code using keyboard-only navigation and assistive technology devices like screen readers.

17 of 31

The Structure of a�Design System

Color Palettes

Typographic Scales

Grid Definitions

Icons & Assets

Templates

Modules

Components

Elements

Design Principles

Implementation Guidelines

Editorial Guidelines

Building Blocks

UI Patterns

Rules

For example:

Style guide or visual pattern library
Design tooling (e.g. Sketch Library)
Component library (where the components live in code)
Code usage guidelines and documentation
Design usage documentation
Voice and tone guideline
Animation language guideline

Accessibility is BUILT IN

It is tech-stack agnostic

It’s the storefront; what we show to new-hires

A design system serves as the storefront that showcases all of the design system’s ingredients, and serves as a tangible center of mass for the whole endeavor.

These environments showcase our finished pieces in an attractive display alongside helpful information about the products, process, and relevant usage info. This storefront is designed to provide context to all parties involved (dev, designers, stakeholders).

Atoms

Molecules

Organisms

Templates

Pages

18 of 31

Myths of design systems

Myth 1: It’s too limiting

Myth 2: A loss of creativity

Myth 3: One and done

Myth 1: too limiting

Myth: Designers embedded in discrete areas of an app see qualities that may be different from other areas. Because of this, a universal system is perceived as being too limiting and might not serve the needs of these specific areas.

Reality: Designers often end up creating custom solutions to improve discrete areas of the app, adding to design and technical debt. With a design system, new solutions can be created and fed back into the system making those improvements available to everyone.

Myth 2: loss of creativity

Myth: If designers are restricted to using a design system, then designers will no longer be free to explore style. Front-end backlogs are often full of design style updates. Evolving the visual style of an app is typically no small task. This can also be a great risk, as it removes resources from new feature work and may negatively impact usability.

Reality: The components of a design system are interdependent. This means when a change is made in one location, the change will be inherited throughout the whole system. This makes style updates within a system trivial in effort but much greater in impact. What once was weeks—if not months—of work, can now be accomplished in an afternoon.

Myth 3: one and done

Myth: Once the design system is designed and built, the work is complete.

Reality: A design system is living, meaning it will require ongoing maintenance and improvements as needs arise. Because your application is powered by the reusable components of your system, however, the application automatically inherits improvements to the system, lowering the effort to maintain the application. This is the power of scaling that a design system offers.

19 of 31

Is it worth it?

Let’s look at some conservative numbers.

20 of 31

What shade of blue are we using?

Can you redline this for me?

Can you redesign this, we can’t build it?

Where’s our logo?

Where are approved stock photos?

Was this pattern used somewhere else?

…

Are designers spending 30 minutes/day on any of these?

21 of 31

Design System ROI for the Design Team

$50 per hour. Team of 20 designers.

2.5h/week * 52 weeks * $50 * 20 designers = $130,000/year

22 of 31

Can you rebuild this, it doesn’t match the design?

What’s the latest documentation?

How do we build this pattern?

Does this meet the code standards?

Where’s our components?

…

Are developers spending 30 minutes/day on any of these?

23 of 31

Design System ROI for the Developer Team

$75 per hour. Team of 50 developers.

2.5h/week * 52 weeks * $75 * 50 devs = $487,500/year

24 of 31

Design System return on investment for the Development Team

“Design systems also save time and money. Just by eliminating code redundancy, more than 20% of a developer’s time can be regained. For a team of 100 developers, this means around $2 million per year.”

- projekt202 Managing Architect Drew Loomer

25 of 31

Just the time and money saved thanks to a design system makes the whole project worth it.

26 of 31

And this isn’t even the entire value.

27 of 31

We’ll deliver better experiences faster. Customers will notice.

28 of 31

By using well-tested components, we’ll

lower the cost of long-term maintenance.

29 of 31

And we’ll get the most out of every new hire, due to faster standardized onboarding with

the design system.

30 of 31

How are we getting started?

31 of 31

The bottom line:

Decreased development and design cost
Faster time to market
Better product quality
Happier customers