Rolling out a design system takes significant time and investment - one that many enterprises are reluctant to take on. What initially seems like the answer to achieving quality design at velocity quickly becomes a perceived bottleneck, as pieces of the system get rolled out slowly among the different products, and time and care needs to be spent making sure the codebase is stable, and the design elements can adapt to different use cases and design needs. How do you keep stakeholders from getting disgruntled? How do you keep the team motivated to keep working against the increasing pressures of executives, who can’t understand why things are taking so long? In this session, you’ll learn how to: * market and sell a design system into an organization * make the case for continued investment * set realistic expectations for stakeholders to avoid organizational panic This session is for you if you’ve ever wondered how to start or sell a design system within an organization, but you’ve had trouble getting buy-in from your stakeholders.

1. The Politics of Design Systems
Keeping stakeholders and team members invested through the process
1 February 2018 | Dani Nordin, Director of Digital UX

2. 2

3. 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. 4

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

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

8. 8

9. 9

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

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

12. 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
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
https://www.kotterinc.com/8-steps-process-for-leading-change/

13. 13
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Create a sense of
urgency around a
big opportunity.
STEP ONE

14. 14

15. 15

16. 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. 17
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Build a guiding
coalition
STEP TWO

18. • 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. 19
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Form a strategic
vision and
initiatives
STEP THREE

20. 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. 21

22. 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. 23

24. 24
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Enlist a volunteer
army
STEP FOUR

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

26. “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. 27
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Enable action
by removing
barriers
STEP FIVE

28. 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. 29

30. 30

31. 31
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Generate short-
term wins
STEP SIX

32. • 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

33. 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
4
65
7
10
11
8
Current
Updated
In design
system as is
“Built” from
existing
components

34. 34
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Sustain
acceleration
STEP SEVEN

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

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

37. Design system users are crucial to success
37
BUSINESS
DESIGNERS SYSTEM INTEGRATORSSYSTEMS TEAM

38. 38

39. 39
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Institute change
STEP EIGHT

40. We realize the system’s
value when products ship
features that use a
system’s parts.
MAKING THE VISION REALITY

41. 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)

42. And Here We Are Now
1 March 2018 Pega Digital Design System 42
http://bradfrost.com/blog/post/managing-technology-agnostic-design-systems/

43. 43

44. • 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

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

47. Where We Were
1 March 2018 Pega Digital Design System 47

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

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

50. 1. Communicate constantly (almost too much)
2. Provide demos early and often
3. Provide clear and usable documentation
Lessons learned
50

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

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

53. 1. Establish a governance triad early
2. Engage your champions
Lessons learned
53

54. 1. Find the organization’s pain
2. Have a pitch deck ready
3. Prepare to be persuasive
Lessons learned
54