Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Politics of Design Systems
Keeping stakeholders and team members invested through the process
1 February 2018 | Dani N...
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
pr...
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 B...
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.
...
The emotional journey of a design system
11
… this was supposed to be fun, right?
“We need
a design
system”
“We got
buy-in...
Kotter’s change
framework
12
• Create a sense of urgency
• Build a guiding coalition
• Form a strategic vision and
initiat...
13
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Create a sense of
urgency around a
big ...
14
15
Just by eliminating code
redundancy, more than 20% of
a developer’s time can be
regained. For a team of 100
developers, th...
17
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
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: Gov...
19
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Form a strategic
vision and
initiatives...
A design system is a living
product with a roadmap &
backlog, serving an
ecosystem.
Source: A Design System isn’t a Projec...
21
Tentative Roadmap
1 March 2018 Pega Digital Design System 22
Adoption
Make it easier to get up
to speed and productive
wit...
23
24
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
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
PRODU...
“But, can’t I just get one of
my staff designers or
developers to do this on
Friday afternoons?”
…because there’s always a...
27
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Enable action
by removing
barriers
STEP...
People get worried
28
• Designers:
– Will the system limit my creativity?
– How extensible are these components?
• Develop...
29
30
31
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
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 ...
Content hub: component mapping
1 March 2018 Pega Digital Design System 33
1. Teaser band
2. Quote
3. Subnav
4. X-Light ban...
34
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
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...
“I thought this was supposed
to save us time. Why is this
so hard to use?”
…Drupal developers forced to use our poorly doc...
Design system users are crucial to success
37
BUSINESS
DESIGNERS SYSTEM INTEGRATORSSYSTEMS TEAM
38
39
CREATE
BUILD
FORM
ENLIST
ENABLE
GENERAT
E
SUSTAIN
INSTITUTE
The Big
Opportunity
Institute change
STEP 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...
And Here We Are Now
1 March 2018 Pega Digital Design System 42
http://bradfrost.com/blog/post/managing-technology-agnostic...
43
• Design systems are an organizational change effort at their core.
• Create a vision that aligns the design system to the...
The Structure of a Design System
UI Patterns
Templates Modules Components Elements
Structure of a design system
Building B...
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...
1. Keep a steady pace of wins
2. Conduct regular demos and retrospectives
3. Stay optimistic, but realistic (don’t go over...
1. Communicate constantly (almost too much)
2. Provide demos early and often
3. Provide clear and usable documentation
Les...
1. Expect to be under-resourced in the early days
2. Enlist people to contribute to the system
3. Make it easy for people ...
1. Help the team align on a vision
2. Connect the vision to the larger corporate strategy
3. Make the roadmap visible
Less...
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
Politics of design systems
Upcoming SlideShare
Loading in …5
×

Politics of design systems

126 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Politics of design systems

  1. 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. 2
  3. 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. 4
  5. 5. So what is a design system? (HINT: it’s not what you think) 5
  6. 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. 7
  8. 8. 8
  9. 9. 9
  10. 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. 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. 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. 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. 14
  15. 15. 15
  16. 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. 17 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Build a guiding coalition STEP TWO
  18. 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. 19 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Form a strategic vision and initiatives STEP THREE
  20. 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. 21
  22. 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. 23
  24. 24. 24 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Enlist a volunteer army STEP FOUR
  25. 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. 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. 27 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Enable action by removing barriers STEP FIVE
  28. 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. 29
  30. 30. 30
  31. 31. 31 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Generate short- term wins STEP SIX
  32. 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. 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. 34 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Sustain acceleration STEP SEVEN
  35. 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. 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. 37. Design system users are crucial to success 37 BUSINESS DESIGNERS SYSTEM INTEGRATORSSYSTEMS TEAM
  38. 38. 38
  39. 39. 39 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Institute change STEP EIGHT
  40. 40. We realize the system’s value when products ship features that use a system’s parts. MAKING THE VISION REALITY
  41. 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. 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. 43
  44. 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
  45. 45. 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
  46. 46. Where We Were 1 March 2018 Pega Digital Design System 47
  47. 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
  48. 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
  49. 49. 1. Communicate constantly (almost too much) 2. Provide demos early and often 3. Provide clear and usable documentation Lessons learned 50
  50. 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
  51. 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
  52. 52. 1. Establish a governance triad early 2. Engage your champions Lessons learned 53
  53. 53. 1. Find the organization’s pain 2. Have a pitch deck ready 3. Prepare to be persuasive Lessons learned 54

×