Design Systems

For Developers

@emmawedekind

This presentation is meant to be a high-level overview on Design Systems.

Agenda

1. Storytime

2. Design Systems

3. Design Language

4. Component Libraries

5. Style Guides

6. How Do You Build A Component Library?

7. Who Builds A Component Library?

FOUNDATION

INTRODUCTION

PRACTICALITY

Emma Wedekind

UX Engineer @ LogMeIn

Prior Software Engineer @ IBM

Born in New York

Leben in Deutschland

Storytime

INTRODUCTION

Imagine your team is tasked with building a button component.

DESIGN

DEVELOP

TEST

You can build a button & ship it in one day.

But building it right will take a bit longer.

Design

PRIMARY

SECONDARY

TERTIARY

ICON + TEXT

ICON ONLY

DISABLED

HOVER

FOCUS

LOADING

SMALL

MEDIUM
LARGE

 

ANIMATIONS

SUCCESS

WARNING
DANGER
INFO

 

LIGHT THEME

DARK THEME

Design

Assume it takes 2 designers 2 weeks to complete the button designs

40 hours/week * 2 weeks = 80 hours

Each designer costs $50/hour

$50/hour * 80 hours = $4,000/designer

$4,000/designer * 2 designers = $8,000

Develop

ACCESSIBILITY

RESPONSIVENESS

ANIMATIONS

TESTS

TYPE CHECKING

Develop

Assume it takes 2 developers 2.5 weeks to complete the button component

40 hours/week * 2.5 weeks = 100 hours

Each developer costs $50/hour

$50/hour * 100 hours = $5,000/developer

$5,000/developer * 2 developers = $10,000

Test

Assume it takes 1 QE 1 week to write integration tests for the buttons.

40 hours/week * 1 week = 40 hours

Each QE costs $50/hour

$50/hour * 40 hours = $2,000/QE

$2,000/QE * 1 QE = $2,000

DESIGN

DEVELOP

TEST

$8,000

$10,000

$2,000

$20,000

If your company has six teams making their own buttons...

Scaling

$120,000

Design Systems

FOUNDATION

A set of reusable components and standards which allow teams to efficiently build consistent user interfaces.

Design System

Design System

Design Language

Component Library

Style Guide

"A design system is an interconnected set of elements that is coherently organized in a way that achieves something."

- Donella H. Meadow, Thinking In Systems

We all think about the world in different ways, which leads to inconsistent UIs.

Lego example taken from Invision Design Systems webinar.

Design systems provide the pieces from which we construct our applications.

Lego example taken from Invision Design Systems webinar.

Design systems are not projects.

They're products.

"A design system's value is realized when products ship features using parts of the system."

- Nathan Curtis

Enable consistent & accessible experiences across products.

Design Language Goal

Benefits

• Accessibility

• Trickle-down updates

• Responsiveness

• Consistency

• Customizability

• Easier onboarding

• Enhanced development speed

• Easier to scale

Drawbacks

• Time consuming

• Large up-front commitment

• Necessary team buy-in

• Ongoing maintenance

Why Design Systems Fail

• Not enough value

• Low education

• Building for scale

Why Design Systems Fail

To prevent your design system from failing, you must understand the three pieces of the system and how they work together.

Design Language

A set of standards which guide the creation of a suite of products underneath a brand.

Design Language

Design Language Composition

Guidelines

Elements

Components

Accessibility, color, grid, icons, motion, typography

Buttons, inputs, drop downs

Pagination, modals, toasts, navigation

"Design language is a shared vocabulary for design."

- IBM Design Thinking

IBM Design Language

What emotions do you want your users to experience when they use one of your products?

Design Language

Design Language

Our users expect a certain level of polish when they use our applications.

Design Language

So how can we make our design language come alive?

Component Library

A repository of standalone, coded components which turn the design language into building blocks for an application.

Component Library

Component Library

Qualities Of A Good Component Library

• Accessible

• Easy to install and use

• Uses modern, but adopted technologies

• Responsive

• Customizable

• Flexible

Component Documentation

These components will only be useful if they're well-documented in one easy-to-find location.

Style Guide

The documentation for both the design language and the component library.

Style Guide

Qualities Of A Good Styleguide

• Includes relevant information for the design language & component library

• Outlines company values

• Provides easy set up and installation instructions for the component library

• Provides all design language assets i.e. Sketch or AI kit

• Lists all information in one easy-to-find location

Building A Style Guide

The Value Of A Style Guide

A style guide only provides value if the content inside is valuable.

Prioritizing Components

PRACTICALITY

Taking a visual inventory of all components within a suite of products in all states.

UI Audit

Choose A Stack

A component library must meet development teams where they currently are today.

Choosing A Stack

Start Incrementally & Build

Workflow

Cadence

Who builds the component library?

A UX Engineer is a front-end developer who bridges design with the engineering teams.

UX Engineer

Design Systems Team

Collaboration

Who's Hiring UX Engineers?

Who's Hiring UX Engineers?

Conclusion

Design Systems are a new paradigm for developing software, but the value is unprecedented.

Design Systems

Measuring Design System Success

• Product adoption rates

• Community contributions

• Decreased release time

• Improved accessibility

• Easier onboarding

• Before & after product screenshots

"The system's promise isn't a delivered library. The promise is enabling a consistent experience spread across products and sustained with a dependable, predictable practice."

- Nathan Curtis

Thank You

@emmawedekind

Design For Developers

By Emma Wedekind

Design For Developers

  • 3,154