Politics of design systems

The Politics of Design SystemsKeeping stakeholders and team members invested through the process

1 February 2018 | Dani Nordin, Director of Digital UX

2

Hey there.

3

I’m the Director of Digital UX at Pegasystems, where I

lead a small but mighty team of UX professionals to

provide insights and design to improve and create 6+

global digital properties.

I also write things for O’Reilly Media, UXPA Magazine,

and occasionally Medium.

Powered by coffee, knitting, and two adorable badasses

in training daughters.

@danigrrl

daninordin.com

4

So what is a design system?(HINT: it’s not what you think)

5

The Structure of a Design System

UI Patterns

Templates Modules Components Elements

Structure of a design system

Building Blocks

Color Palettes Typographic Standards Grid Definitions Icons & AssetsBuild Tools

Rules & Documentation

Design Principles Implementation Guidelines Voice and Tone Design Files

7

8

9

A design system isn’t about

design or code; it’s a

fundamental shift in how the

organization designs and

builds products.

WHAT NOBODY TELLS YOU

The emotional journey of a design system

11

… this was supposed to be fun, right?

“We need

a design

system”

“We got

buy-in!”

System/

release

planning

“Why

haven’t we

seen

it yet?”

First

release

Hooking

up to

product

“The last

change

crashed

the site!”

First

velocity

gains

Kotter’s change framework

12

• Create a sense of urgency

• Build a guiding coalition

• Form a strategic vision and

initiatives

• Enlist a volunteer army

• Enable action by removing barriers

• Generate short-term wins

• Sustain acceleration

• Institute change

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

https://www.kotterinc.com/8-steps-process-for-leading-change/

13

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

Create a sense of urgency around a big opportunity.

STEP ONE

14

15

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

17

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

Build a guiding coalition

STEP TWO

• Business lead: Provides governance for components and

template needs. Serves as executive sponsor.

• Technical lead: Governs front-end architecture and

pattern development. Ensures scalability and performance.

Collaborates with integrators.

• UX lead: Oversees pattern design and works with

Business and Tech leads. Ensures that patterns meet

business needs and scale across use cases.

Create a product triad

18

B

T U

B

T

U

Business Lead

Technical Lead

UX Lead

19

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

Form a strategic vision and initiatives

STEP THREE

A design system is a living

product with a roadmap &

backlog, serving an

ecosystem.

Source: A Design System isn’t a Project. It’s a Product, Serving Products.

Nathan Curtis, 2016. Medium. bit.ly/8s-system-is-product

WHAT IS A DESIGN SYSTEM?

21

Tentative Roadmap

1 March 2018 Pega Digital Design System 22

Adoption

Make it easier to get up

to speed and productive

with Bolt

Scale

Facilitate the relaunch of

PDN & build up our

library of components

Scale + Stability

Have a robust library of

components and

documentation to

facilitate wider adoption

Stability + Scale

Increase productivity for

devs & ensure adequate

test coverage

Q1 Q2 Q3 Q4

All:

• Search

DotCom:

• Events

• Customer Success

• Press/Media

• Content Hub

• Industry

• SEO Landing Pages

PDN:

• Articles

• Landing Pages

• Help system/guides

• Communities

• Exchange

• Listing pages (video,

tech talk, release

notes, etc.)

DotCom:

• Careers

• Pegaworld

PDN

• Support

Saleshub

• resource detail

• search

Saleshub?

• resource detail

• search

23

24

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

Enlist a volunteer army

STEP FOUR

Resources are hard to come by early on

25

WHAT YOU THINK YOU NEED WHAT YOU THINK YOU’LL GET WHAT YOU’LL ACTUALLY GET

PRODUCT DEVELOPMENT DESIGN NOT ALLOCATED

“But, can’t I just get one of

my staff designers or

developers to do this on

Friday afternoons?”…because there’s always a deadline that requires all day Friday.

THE PARADOX OF PART-TIMERS

Source: Scalable Design Systems workshop Nathan Curtis, UI22 Conference, 2017.

27

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

Enable action by removing barriers

STEP FIVE

People get worried

28

• Designers:

– Will the system limit my creativity?

– How extensible are these components?

• Developers:

– How hard will this be to implement?

– What if I need something custom?

• Stakeholders:

– How many resources will we actually

need?

– How long is this going to take?

– Where’s the ROI?

29

30

31

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

Generate short-term wins

STEP SIX

• Creation of roadmap

• Plan for first releases

• Release of first major milestone (colors, typography, etc.)

• Launch of static documentation site

• First successful integration with product

• First successful instance of reusing components

• Velocity improvements in design or deployment

Early wins you can celebrate

32

Content hub: component mapping

1 March 2018 Pega Digital Design System 33

1. Teaser band

2. Quote

3. Subnav

4. X-Light band

5. Content body

6. Card

7. Light band

8. Dark Band

9. Teaser with logo

and button

10. X-dark band

11. UI list with icons

1

2

3

465

7

1011

8

Current

Updated

In design

system as is

“Built” from

existing

components

34

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

Sustain acceleration

STEP SEVEN

The emotional journey of a design system

35

… this was supposed to be fun, right?

“We need

a design

system”

“We got

buy-in!”

System/

release

planning

“Why

haven’t we

seen

it yet?”

First

release

Hooking

up to

product

“The last

change

crashed

the site!”

First

velocity

gains

“I thought this was supposed

to save us time. Why is this

so hard to use?”…Drupal developers forced to use our poorly documented system.

AND THEN IT ALL FELL DOWN

Design system users are crucial to success

37

BUSINESS

DESIGNERS SYSTEM INTEGRATORSSYSTEMS TEAM

38

39

CREATE

BUILD

FORM

ENLIST

ENABLE

GENERATE

SUSTAIN

INSTITUTE

The Big

Opportunity

Institute changeSTEP EIGHT

We realize the system’s value when products ship features that use a system’s parts.

MAKING THE VISION REALITY

Bolt components

1 March 2018 Pega Digital Design System 41

Designed or being designed

Being built Published

• Action bands

• Index bands

• Feature bands

• Backgrounds

• Cards

• Buttons

• Button groups

• Action blocks

• Subnav

• UI List

• Quote variations

• Video player

• Device viewer

• Icons

• Headlines

• Teasers

• Flags

• Content body (paragraphs,

lists, blockquote)

• Chips/tags

• Smooth scroll

• Element stickiness

• Visual language (colors,

type, spacing, etc.)

• Forms

• Breadcrumbs

• Tooltips

• Share (DONE)

• Search teasers (WIP)

• Search facets (WIP)

• New components for

PDN articles (NEXT)

• Side navigation for

PDN articles (NEXT)

And Here We Are Now

1 March 2018 Pega Digital Design System 42

http://bradfrost.com/blog/post/managing-technology-agnostic-design-systems/

43

• Design systems are an organizational change effort at their core.

• Create a vision that aligns the design system to the needs of the team and to

the larger corporate strategy.

• Have a pitch deck ready to communicate the need and benefits of your

system. Update and present frequently to maintain enthusiasm.

• Expect to be under-resourced as you start. Enlist volunteers to help.

• Bumps in the road are part of the process. Be prepared for them.

• Treat your design system as a product, with its own roadmap and release

plan.

• Talk to your users, damnit.

Key takeaways

44

The Structure of a Design System

UI Patterns

Templates Modules Components Elements

Structure of a design system

Building Blocks

Color Palettes Typographic Standards Grid Definitions Icons & AssetsBuild Tools

Rules & Documentation

Design Principles Implementation Guidelines Voice and Tone Design Files

Where We Were

1 March 2018 Pega Digital Design System 47

1. A design system can’t succeed without support from its

users and sponsors

2. Establish standards for progress reporting

3. Publish updates regularly

4. Prepare for setbacks; don’t rest on your laurels

Lessons learned

48

1. Keep a steady pace of wins

2. Conduct regular demos and retrospectives

3. Stay optimistic, but realistic (don’t go overboard)

Lessons learned

49

1. Communicate constantly (almost too much)

2. Provide demos early and often

3. Provide clear and usable documentation

Lessons learned

50

1. Expect to be under-resourced in the early days

2. Enlist people to contribute to the system

3. Make it easy for people to help

Lessons learned

51

1. Help the team align on a vision

2. Connect the vision to the larger corporate strategy

3. Make the roadmap visible

Lessons learned

52

1. Establish a governance triad early

2. Engage your champions

Lessons learned

53

1. Find the organization’s pain

2. Have a pitch deck ready

3. Prepare to be persuasive

Lessons learned

54