Politics of design systems
-
Upload
dani-nordin -
Category
Design
-
view
17 -
download
5
Transcript of Politics of design systems
![Page 1: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/1.jpg)
The Politics of Design SystemsKeeping stakeholders and team members invested through the process
1 February 2018 | Dani Nordin, Director of Digital UX
![Page 2: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/2.jpg)
2
![Page 3: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/3.jpg)
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
![Page 4: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/4.jpg)
4
![Page 5: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/5.jpg)
So what is a design system?(HINT: it’s not what you think)
5
![Page 6: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/6.jpg)
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
![Page 7: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/7.jpg)
7
![Page 8: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/8.jpg)
8
![Page 9: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/9.jpg)
9
![Page 10: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/10.jpg)
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
![Page 11: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/11.jpg)
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
![Page 12: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/12.jpg)
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/
![Page 13: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/13.jpg)
13
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERATE
SUSTAIN
INSTITUTE
The Big
Opportunity
Create a sense of urgency around a big opportunity.
STEP ONE
![Page 14: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/14.jpg)
14
![Page 15: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/15.jpg)
15
![Page 16: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/16.jpg)
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
![Page 17: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/17.jpg)
17
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERATE
SUSTAIN
INSTITUTE
The Big
Opportunity
Build a guiding coalition
STEP TWO
![Page 18: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/18.jpg)
• 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
![Page 19: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/19.jpg)
19
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERATE
SUSTAIN
INSTITUTE
The Big
Opportunity
Form a strategic vision and initiatives
STEP THREE
![Page 20: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/20.jpg)
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?
![Page 21: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/21.jpg)
21
![Page 22: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/22.jpg)
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
![Page 23: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/23.jpg)
23
![Page 24: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/24.jpg)
24
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERATE
SUSTAIN
INSTITUTE
The Big
Opportunity
Enlist a volunteer army
STEP FOUR
![Page 25: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/25.jpg)
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
![Page 26: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/26.jpg)
“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.
![Page 27: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/27.jpg)
27
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERATE
SUSTAIN
INSTITUTE
The Big
Opportunity
Enable action by removing barriers
STEP FIVE
![Page 28: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/28.jpg)
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?
![Page 29: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/29.jpg)
29
![Page 30: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/30.jpg)
30
![Page 31: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/31.jpg)
31
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERATE
SUSTAIN
INSTITUTE
The Big
Opportunity
Generate short-term wins
STEP SIX
![Page 32: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/32.jpg)
• 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
![Page 33: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/33.jpg)
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
![Page 34: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/34.jpg)
34
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERATE
SUSTAIN
INSTITUTE
The Big
Opportunity
Sustain acceleration
STEP SEVEN
![Page 35: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/35.jpg)
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
![Page 36: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/36.jpg)
“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
![Page 37: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/37.jpg)
Design system users are crucial to success
37
BUSINESS
DESIGNERS SYSTEM INTEGRATORSSYSTEMS TEAM
![Page 38: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/38.jpg)
38
![Page 39: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/39.jpg)
39
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERATE
SUSTAIN
INSTITUTE
The Big
Opportunity
Institute changeSTEP EIGHT
![Page 40: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/40.jpg)
We realize the system’s value when products ship features that use a system’s parts.
MAKING THE VISION REALITY
![Page 41: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/41.jpg)
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)
![Page 42: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/42.jpg)
And Here We Are Now
1 March 2018 Pega Digital Design System 42
http://bradfrost.com/blog/post/managing-technology-agnostic-design-systems/
![Page 43: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/43.jpg)
43
![Page 44: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/44.jpg)
• 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
![Page 45: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/45.jpg)
![Page 46: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/46.jpg)
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
![Page 47: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/47.jpg)
Where We Were
1 March 2018 Pega Digital Design System 47
![Page 48: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/48.jpg)
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
![Page 49: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/49.jpg)
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
![Page 50: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/50.jpg)
1. Communicate constantly (almost too much)
2. Provide demos early and often
3. Provide clear and usable documentation
Lessons learned
50
![Page 51: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/51.jpg)
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
![Page 52: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/52.jpg)
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
![Page 53: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/53.jpg)
1. Establish a governance triad early
2. Engage your champions
Lessons learned
53
![Page 54: Politics of design systems](https://reader034.fdocuments.us/reader034/viewer/2022051504/5aac2ecd7f8b9adb278b4ae7/html5/thumbnails/54.jpg)
1. Find the organization’s pain
2. Have a pitch deck ready
3. Prepare to be persuasive
Lessons learned
54