Selling Design Systems; UXPin Design Systems Masterclass

Design Systems: they’re all the rage right now, as they should be. Teams at Salesforce, GE, Airbnb, IBM, and others are sharing wonderful stories of constructing, managing, and operating Design Systems. This is not one of those stories. Instead, this talk will detail how too sell and gain adoption of a Design System before asking for buy-in to build it.

Transcript

1. Selling Design Systems An "adoption-first" strategy for selling a design system at EA UXPin Design Systems Masterclass December 5, 2017 Ryan Rumsey @ryanrumsey
2. Design systems are all the rage
6. This is not one of those talks
11. IT
12. http://wolf-sheep20.tumblr.com/post/45480229605/homestuck-gif-challenge
14. As a consultancy As a service provider As product designers
15. EX PX
16. EX PX The perceived value players have in interactions with EA. The perceived value employees have in interactions while working at EA.
17. WHAT IS JOYSTICK?
18. A collection of resources for individuals and teams at EA to design and develop internal applications, websites, and content strategies.
19. WHY A DESIGN SYSTEM?
23. Hi. I’m Mary.
24. Inherent expertise Hi. I’m Mary.
25. Knowledge Management Learning Management Workforce Management Performance Management Travel Management Facilities Management Support Customer Relationship Management Resource Management Career Development
26. Knowledge Management Learning Management Workforce Management Performance Management Travel Management Facilities Management Support Customer Relationship Management Resource Management Career Development
27. Knowledge Management Learning Management Workforce Management Performance Management Travel Management Facilities Management Support Customer Relationship Management Resource Management Career Development World of systems
30. Accidental complexity
31. I’m all alone.
33. Challenges with scale, reusability, & craft
34. WHAT NEEDED BUYING?
35. “I’ve been pitching our services for 23 years and I’ve never once successfully convinced an executive of anything.” - Jared Spool
36. 1. Evaluate the value proposition from the perspectives of the humans who: DESIGN & DEVELOP 2.Evaluate the value proposition from the perspectives of the humans who want to: SHIP THINGS FASTER/CHEAPER
37. Strategyzer, https://strategyzer.com/canvas/value-proposition-canvas
38. Strategyzer, https://strategyzer.com/canvas/value-proposition-canvas Customer Jobs
39. Designer Jobs Developer Jobs Executive Jobs Strategyzer, https://strategyzer.com/canvas/value-proposition-canvas Customer Jobs
41. “Hi designer. We’re launching an application tomorrow and I’d like to make to get your feedback before we do.” — yet another Anonymous “Can you make my thing look like your thing?” — most frequent request from Anonymous
42. http://wolf-sheep20.tumblr.com/post/45480229605/homestuck-gif-challenge
44. “I spent the last week trying to figure out how to make the best button. Ultimately, I just grabbed Bootstrap because I needed to get the work done.” — Anonymous Developer “I just didn’t have time to incorporate all the style guides because I needed to ship. Sorry.” — Anonymous Engineer
45. https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf
46. but faster & cheaper!!!
51. WHAT NEEDED BUYING: “We want to collaborate, have great documentation, have choice in our tools, to contribute, save time & money, and make their things look like our things.” — perhaps a made-up, generalized request from Anonymous…but you get the idea
52. BAD TIMING!
53. April 13, 2015 was my start date.
54. April 13, 2015 was my start date. 13 days after the fiscal year started.
55. April 13, 2015 was my start date. 13 days after the fiscal year started. All headcount finalized.
56. April 13, 2015 was my start date. 13 days after the fiscal year started. All headcount finalized. All projects finalized.
57. April 13, 2015 was my start date. 13 days after the fiscal year started. All headcount finalized. All projects finalized. All budgets finalized.
59. MONEY HAS IT’S OWN PROBLEMS
60. Design Systems Projects
61. Design Systems should deliver and live Projects should deliver and die
62. Design Systems should deliver and live Projects should deliver and die FUND WITH A PROJECT?* *Easy choice when you don’t have a choice
63. SUCCESS IS NOT FUNDING
64. Innovation Norman, D. A., & Verganti, R. (2014). Incremental and radical innovation: Design research versus technology and meaning change. Design Issues, 30(1), 78-96.
65. Radical Incremental Innovation Norman, D. A., & Verganti, R. (2014). Incremental and radical innovation: Design research versus technology and meaning change. Design Issues, 30(1), 78-96.
66. Radical Incremental Improvements within a given frame of solutions (i.e., “doing better what we already do”) A change of frame (i.e., “doing what we did not do before”) Innovation Norman, D. A., & Verganti, R. (2014). Incremental and radical innovation: Design research versus technology and meaning change. Design Issues, 30(1), 78-96.
67. Radical Incremental Improvements within a given frame of solutions (i.e., “doing better what we already do”) A change of frame (i.e., “doing what we did not do before”) Innovation NOVEL UNIQUE ADOPTED Norman, D. A., & Verganti, R. (2014). Incremental and radical innovation: Design research versus technology and meaning change. Design Issues, 30(1), 78-96.
68. Radical Incremental Improvements within a given frame of solutions (i.e., “doing better what we already do”) A change of frame (i.e., “doing what we did not do before”) Innovation NOVEL UNIQUE ADOPTED Norman, D. A., & Verganti, R. (2014). Incremental and radical innovation: Design research versus technology and meaning change. Design Issues, 30(1), 78-96.
69. SUCCESS IS ADOPTION!
70. Mike Langman, rspb-images.com; Collective Impact, Copyright © 2011 by Leland Stanford Jr. University All Rights Reserved Sustained Adoption
71. Stanford Social Innovation Review Email: info@ssireview.org, www.ssireview.org 
 
 
 
 
 
 
 
 Collective
Impact
 By John Kania & Mark Kramer 
 
 
 Stanford
Social
Innovation
Review
 Winter
2011 
 
 Copyright
©
2011
by
Leland
Stanford
Jr.
University
 All
Rights
Reserved
 
 Mike Langman, rspb-images.com; Collective Impact, Copyright © 2011 by Leland Stanford Jr. University All Rights Reserved Sustained Adoption
72. Stanford Social Innovation Review Email: info@ssireview.org, www.ssireview.org 
 
 
 
 
 
 
 
 Collective
Impact
 By John Kania & Mark Kramer 
 
 
 Stanford
Social
Innovation
Review
 Winter
2011 
 
 Copyright
©
2011
by
Leland
Stanford
Jr.
University
 All
Rights
Reserved
 
 Mike Langman, rspb-images.com; Collective Impact, Copyright © 2011 by Leland Stanford Jr. University All Rights Reserved 1. Take responsibility for assembling the elements of a solution 2. Create a movement for change 3. Include solutions from outside the sectors 4. Use actionable knowledge to influence behavior & improve performance 5. Cross-sector coordination over individual intervention Sustained Adoption
73. Stanford Social Innovation Review Email: info@ssireview.org, www.ssireview.org 
 
 
 
 
 
 
 
 Collective
Impact
 By John Kania & Mark Kramer 
 
 
 Stanford
Social
Innovation
Review
 Winter
2011 
 
 Copyright
©
2011
by
Leland
Stanford
Jr.
University
 All
Rights
Reserved
 
 Mike Langman, rspb-images.com; Collective Impact, Copyright © 2011 by Leland Stanford Jr. University All Rights Reserved 1. Take responsibility for assembling the elements of a solution 2. Create a movement for change 3. Include solutions from outside the sectors 4. Use actionable knowledge to influence behavior & improve performance 5. Cross-sector coordination over individual intervention Sustained Adoption
74. WHO ARE THE ADOPTERS?
75. Focus on users of design tools & design services
76. https://www.reddit.com/r/reactiongifs/comments/5tqktd/mrw_i_cant_find_the_tv_remote_but_my_show_starts/
77. Murmuration of starlings in Utrecht, The Netherlands, https://vimeo.com/121168616
78. LET’S DO THIS
79. 1. No project funding/sponsorship 2. Demand for design is there 3. Must support a variety of teams, products, services, platforms, etc. 4. Must consider EA culture 5. No explicit constraint of, “Don’t do that” Assumptions
80. 1. User adoption would be the key to success. Focus on that first. 2. Developers, Engineers, Designers are more likely to use one if they have a choice in using it & if they could contribute back. 3. We needed one. Others would welcome having one too. Hypotheses
82. REMIX!
83. REMIX!
89. https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf
90. https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf
91. https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf
94. SELL, SELL, SELL
95. How did we find early adopters?
96. Do they need help? Do they know they need help? How did we find early adopters?
97. Do they need help? Do they know they need help? Sweet spot How did we find early adopters?
98. Hackathons
99. Hackathons
100. Guerilla Marketing & PR
101. 1. 6 teams 2. 5 projects 3. Community sharing the url with friends 4. “Can I create my own components?” Outcomes
102. “Hey, we always needed one of these!” — all the leadership
103. HOW WE DOIN’?
104. Keep me signed in SIGN IN PASSWORD EMAIL ADDRESS Remember me SIGN IN PASSWORD EMAIL ADDRESS © 2016 Electronic Arts Inc. This portal is authorized for EA employees & approved contractors only. you@ea.com Joseph Paul Smith PROFILE SECURITY JS Edit My Account Change Password Your password was last changed on May 15, 2016. VERIFICATION Security Question & Answer Security question & answer to verify your EA account. ENABLED Edit © 2016 Electronic Arts Inc. This portal is authorized for EA employees & approved contractors only. Joseph Paul Smith Games Developer Austin, USA jsmith@ea.com © 2016 Electronic Arts Inc. This portal is authorized for EA employees & approved contractors only. Help Tools Joseph Paul Smith PROFILE JS My Account Games Developer Austin, USA jsmith@ea.com SECURITY Edit Change Password Your password was last changed on May 15, 2016. VERIFICATION Edit Security Question & Answer Security question & answer to verify your EA account. ENABLED
108. A Tiny Guide to Visualize Data Pick chart and color palette for your dashboard. We will offer you best design practice and downloadable design kit! Get Started Choose Data Type Work with Data Confirm Chart Select Color Download Kit Sequential data is suited to ordered data that progress from low to high or high to low to encode quantitative differences. A set of ordered colors can be used to show the number of activer users on 3 different game titles, from the worst (title A, with the darkest color) to the best (title C, with the lightest). Categorical data is used to separate items into distinct groups. Categorical data can be sorted according to group or category. Sequential Data Diverging Data Categorical Data Diverging data encodes a range of quantitative values that are above or below some logical breakpoint in the middle. What type of data do you have? Here are tips and examples on deciding data type SEQUENTIAL DATA FOR EXAMPLE FOR EXAMPLE FOR EXAMPLE CATEGORICAL DATA DIVERGING DATA AUG SEPT Month OCT 0 25k 50k 75k 100k Active Users Title A Title B Title C 0 Aug 30 Aug 31 Sept 1 Sept 2 0 100k 200k 300k 400k Xbox 360 Xbox One PS3 PS4 Sales Dates Game titles’ consumer rating can be displayed using a stacked bar chart with a dual-ordered palette of colors: one set for dissatisfied and another set for satisfied, with a netural rate in the midpoint. Title A Title B Title C Percentage 50 50 0 Very Dissatisfied Very Satisfied Dissatisfied Satisfied Netural NEXT A set of distinct colors can be used to show the difference of sales by game consoles on a daily base.
109. BEFORE YOU BEGIN HERE’S SOME ADVICE CHOOSE A CONSISTENT STYLE START WITH THIS SLIDE MAKING YOUR PRESENTATION CLEAN, CLEAR, & SIMPLE THIS TEMPLATE IS FOUND IF YOU ADD SLIDE > CLICK IMAGE OF TITLE SLIDE 01 USE THE DEFAULT TITLE AND BODY TAGS. ADD YOUR TITLE AND USE 48 BOLD EASans ADD YOUR SUBTITLE AND USE 48 REGULAR EASans ADD YOU NAME/DATE AND USE 18 REGULAR EASans 02 USE AN IMAGE IF DESIRED. IDEALLY THIS IMAGE IS CONSISTENT WITH ALL OTHER PRESENTATIONS FROM YOUR ORG. 03 USE THE EAIT LOGO IN THE BOTTOM RIGHT. YOU CAN HAVE THE PERFECT IMAGE ALL YOU NEED IS A CAMERA PHONE, A WHITE PIECE OF PAPER, AND THE KNOW HOW. 01 Take your picture LAY A PIECE OF WHITE PAPER ON A DESK. ARRANGE THE OBJECT ON THE PAPER. TAKE A PHOTO WITH YOUR CAMERA PHONE. 02 Email SEND THE PHOTO TO YOUR WORK EMAIL 03 Open image in Keynote or PowerPoint ADJUST ALPHA CHANNEL OR BRIGHTNESS AND CONTRAST TO “REMOVE” WHITE BACKGROUND. CROP WHERE NECESSARY.
112. C O M P O N E N T S Tour Your office G E T S TA R T E D C A R D S F O R M S I C O N S D A T A C H A R T S C H O I C E S Choice 1 Choice Selected Choice 3 Choice 4 C H E C K B O X Checkbox 1 Checkbox Checked Placeholder text Placeholder text TEXT AREA LABEL Placeholder text TEXT INPUT Watch Game Trailers G E T S TA R T E D Manager Portal Career Icon Library: Streamline Icons, www.streamlineicons.com Project Travel Service Desk People Local Benefit Team Performance 11 12 13 14 15 16 17 18 19 20 10 DAYS 1 MONTH 3 MONTHS Project Status 167 176 Retina Sandbox 271 Joystick Corp Store Wifi Vidcon 539 97.0% 39.2 % 22.1% 19.1% 65.4 % 25.8% 157 147 PROJECT WORKING HOURS COMPLETION B U T T O N S C T A G R O U P DEFAULT BUTTON
113. 1. 20+ teams 2. 15+ projects 3. Community has developed .NET helpers, jQuery, Angular, & React extensions, and 3 alternate themes 4. Showcase of success 5. Community for sustained success All organic growth
115. TAKEAWAYS
116. 1. If you build it…
117. 2.Embrace cultures
118. 3.Trojan Mice & Trojan Horses
119. 4.Be pragmatic Ellen Lupton, http://www.publicseminar.org/2015/12/designing-the-humanities/; https://www.istockphoto.com/portfolio/sborisov
120. 5.Launch w/ product strategy
121. 6.Still fighting for a champion Ellen Lupton, http://www.publicseminar.org/2015/12/designing-the-humanities/; https://www.istockphoto.com/portfolio/sborisov
122. CREDIT WHERE DUE
124. https://uxdesign.cc/selling-a-design-system-before-asking-for-buy-in-eeb45e88f66a
125. Thank you! Ryan Rumsey @ryanrumsey