Selling Design Systems; UXPin Design Systems Masterclass

Slide 1

Slide 1 text

Selling Design Systems An "adoption-ﬁrst" strategy for selling a design system at EA UXPin Design Systems Masterclass December 5, 2017 Ryan Rumsey @ryanrumsey

Slide 2

Slide 2 text

Design systems are all the rage

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

This is not one of those talks

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Slide 12

Slide 12 text

http://wolf-sheep20.tumblr.com/post/45480229605/homestuck-gif-challenge

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

As a consultancy As a service provider As product designers

Slide 15

Slide 15 text

EX PX

Slide 16

Slide 16 text

EX PX The perceived value players have in interactions with EA. The perceived value employees have in interactions while working at EA.

Slide 17

Slide 17 text

WHAT IS JOYSTICK?

Slide 18

Slide 18 text

A collection of resources for individuals and teams at EA to design and develop internal applications, websites, and content strategies.

Slide 19

Slide 19 text

WHY A DESIGN SYSTEM?

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Hi. I’m Mary.

Slide 24

Slide 24 text

Inherent expertise Hi. I’m Mary.

Slide 25

Slide 25 text

Knowledge Management Learning Management Workforce Management Performance Management Travel Management Facilities Management Support Customer Relationship Management Resource Management Career Development

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Accidental complexity

Slide 31

Slide 31 text

I’m all alone.

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Challenges with scale, reusability, & craft

Slide 34

Slide 34 text

WHAT NEEDED BUYING?

Slide 35

Slide 35 text

“I’ve been pitching our services for 23 years and I’ve never once successfully convinced an executive of anything.” - Jared Spool

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Strategyzer, https://strategyzer.com/canvas/value-proposition-canvas

Slide 38

Slide 38 text

Strategyzer, https://strategyzer.com/canvas/value-proposition-canvas Customer Jobs

Slide 39

Slide 39 text

Designer Jobs Developer Jobs Executive Jobs Strategyzer, https://strategyzer.com/canvas/value-proposition-canvas Customer Jobs

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

“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

Slide 42

Slide 42 text

http://wolf-sheep20.tumblr.com/post/45480229605/homestuck-gif-challenge

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

“I spent the last week trying to ﬁgure 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

Slide 45

Slide 45 text

https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf

Slide 46

Slide 46 text

but faster & cheaper!!!

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

BAD TIMING!

Slide 53

Slide 53 text

April 13, 2015 was my start date.

Slide 54

Slide 54 text

April 13, 2015 was my start date. 13 days after the ﬁscal year started.

Slide 55

Slide 55 text

April 13, 2015 was my start date. 13 days after the ﬁscal year started. All headcount ﬁnalized.

Slide 56

Slide 56 text

April 13, 2015 was my start date. 13 days after the fiscal year started. All headcount finalized. All projects finalized.

Slide 57

Slide 57 text

April 13, 2015 was my start date. 13 days after the fiscal year started. All headcount finalized. All projects finalized. All budgets finalized.

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

MONEY HAS IT’S OWN PROBLEMS

Slide 60

Slide 60 text

Design Systems Projects

Slide 61

Slide 61 text

Design Systems should deliver and live Projects should deliver and die

Slide 62

Slide 62 text

Design Systems should deliver and live Projects should deliver and die FUND WITH A PROJECT?* *Easy choice when you don’t have a choice

Slide 63

Slide 63 text

SUCCESS IS NOT FUNDING

Slide 64

Slide 64 text

Innovation Norman, D. A., & Verganti, R. (2014). Incremental and radical innovation: Design research versus technology and meaning change. Design Issues, 30(1), 78-96.

Slide 65

Slide 65 text

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.

Slide 66

Slide 66 text

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.

Slide 67

Slide 67 text

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.

Slide 68

Slide 68 text

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.

Slide 69

Slide 69 text

SUCCESS IS ADOPTION!

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Stanford Social Innovation Review Email: [email protected], 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 inﬂuence behavior & improve performance 5. Cross-sector coordination over individual intervention Sustained Adoption

Slide 73

Slide 73 text

Slide 74

Slide 74 text

WHO ARE THE ADOPTERS?

Slide 75

Slide 75 text

Focus on users of design tools & design services

Slide 76

Slide 76 text

https://www.reddit.com/r/reactiongifs/comments/5tqktd/mrw_i_cant_find_the_tv_remote_but_my_show_starts/

Slide 77

Slide 77 text

Murmuration of starlings in Utrecht, The Netherlands, https://vimeo.com/121168616

Slide 78

Slide 78 text

LET’S DO THIS

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

1. User adoption would be the key to success. Focus on that ﬁrst. 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

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

REMIX!

Slide 83

Slide 83 text

REMIX!

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf

Slide 90

Slide 90 text

https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf

Slide 91

Slide 91 text

https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

SELL, SELL, SELL

Slide 95

Slide 95 text

How did we ﬁnd early adopters?

Slide 96

Slide 96 text

Do they need help? Do they know they need help? How did we ﬁnd early adopters?

Slide 97

Slide 97 text

Do they need help? Do they know they need help? Sweet spot How did we ﬁnd early adopters?

Slide 98

Slide 98 text

Hackathons

Slide 99

Slide 99 text

Hackathons

Slide 100

Slide 100 text

Guerilla Marketing & PR

Slide 101

Slide 101 text

1. 6 teams 2. 5 projects 3. Community sharing the url with friends 4. “Can I create my own components?” Outcomes

Slide 102

Slide 102 text

“Hey, we always needed one of these!” — all the leadership

Slide 103

Slide 103 text

HOW WE DOIN’?

Slide 104

Slide 104 text

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. [email protected] 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 [email protected] © 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 [email protected] 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

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

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.

Slide 109

Slide 109 text

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.

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

C O M P O N E N T S Tour Your oﬃce 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 Wiﬁ 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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

TAKEAWAYS

Slide 116

Slide 116 text

1. If you build it…

Slide 117

Slide 117 text

2.Embrace cultures

Slide 118

Slide 118 text

3.Trojan Mice & Trojan Horses

Slide 119

Slide 119 text

4.Be pragmatic Ellen Lupton, http://www.publicseminar.org/2015/12/designing-the-humanities/; https://www.istockphoto.com/portfolio/sborisov

Slide 120

Slide 120 text

5.Launch w/ product strategy

Slide 121

Slide 121 text

6.Still ﬁghting for a champion Ellen Lupton, http://www.publicseminar.org/2015/12/designing-the-humanities/; https://www.istockphoto.com/portfolio/sborisov

Slide 122

Slide 122 text

CREDIT WHERE DUE

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

https://uxdesign.cc/selling-a-design-system-before-asking-for-buy-in-eeb45e88f66a

Slide 125

Slide 125 text

Thank you! Ryan Rumsey @ryanrumsey