Tweet
Tweet

Slide 1

Slide 1 text

Selling Design Systems An "adoption-first" strategy for selling a design system at EA Ethos - Austin August 30, 2017 Ryan Rumsey @ryanrumsey

Slide 2

Slide 2 text

Strategic design, then, is the application of professionally practiced design expertise to strategy, policy, governance and culture. - Dan Hill; Dark Matter and Trojan Horses: A Strategic Design Vocabulary

Slide 3

Slide 3 text

Design systems are all the rage

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

This is not one of those talks

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

A STORY

Slide 10

Slide 10 text

Mike Langman, rspb-images.com;

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

IT

Slide 16

Slide 16 text

EX CX

Slide 17

Slide 17 text

EX CX The perceived value customers have in interactions with EA. The perceived value employees have in interactions while working at EA.

Slide 18

Slide 18 text

WHY A DESIGN SYSTEM?

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Hi. I’m Mary.

Slide 23

Slide 23 text

Hi. I’m Mary. Inherent expertise

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Accidental complexity

Slide 26

Slide 26 text

Design whole experiences

Slide 27

Slide 27 text

Workforce Management Knowledge Management Learning Management Resource Management Facilities Management Customer Relationship Management Travel Management Career Development Performance Management Support Expense Management Intranet Dashboards File Management Desktop Applications Mobile Applications Websites Tools Frameworks Guidelines

Slide 28

Slide 28 text

Workforce Management Knowledge Management Learning Management Resource Management Facilities Management Customer Relationship Management Travel Management Career Development Performance Management Support Expense Management Intranet Dashboards File Management Desktop Applications Mobile Applications Websites Tools Frameworks Guidelines SORRY, I CAN’T SHOW YOU

Slide 29

Slide 29 text

Workforce Management Knowledge Management Learning Management Resource Management Facilities Management Customer Relationship Management Travel Management Career Development Performance Management Support Expense Management Intranet Dashboards File Management Desktop Applications Mobile Applications Websites Tools Frameworks Guidelines CHALLENGES WITH SCALE, REUSABILITY, & CRAFT

Slide 30

Slide 30 text

WHAT IS IT?

Slide 31

Slide 31 text

A collection of resources for individuals and teams at EA to design, develop, & write applications, websites, communications, & products.

Slide 32

Slide 32 text

DEVELOPERS DESIGNERS

Slide 33

Slide 33 text

JOYSTICK D E S I G N S Y S T E M Product Documentation Download Get Started Dashboard Time Line Social Overview Badges Boxes Breadcrumbs Button Groups Buttons Colors Forms Grid System Icons Media Objects Navbar Page Headers Popovers Spinner Tables Tabs Themes Typography UI Framework 0.2.1 Whether you use Angular, .NET or PHP, Console's CSS-only UI framework plays nicely with any workflow. There are several ways to get started: Popular Layouts & Components Give your product a head start with our awesome layouts and components. We've got your back If you need any help, have feedback or would like to suggest a component, drop the EA IT Experience Design team a line at Andy McFee or Ryan Rumsey. Zip Download Bower Install You can install the Joystick UI Framework using Bower Package Manager. Download the Console UI Framework straight into your project. Check out the release notes for details of the latest updates. We’ve got you covered! Download our Sketch file and head over to our Getting Started guidelines. Getting Started JOYSTICK D E S I G N S Y S T E M DOWNLOAD SKETCH UI KIT Broswe all articles Broswe all articles From the basics to the advanced, get to know your tools with these helpful tips. • Resetting your password • Editing your profile • Uploading and sharing files • Requesting new equipment • Email distros and groups • VPN access • Onboarding a new hire • Setting up voicemail at your desk • Purchasing software Want to learn more about setting up or maintaining your account? Look no further! Your Tools Accounts and Access Featured Articles Popular help topics: password reset, equipment request, file sharing Find anything (like password reset or new equipment) | SERVICE DESK EA World Submit a Request Hi. How can we help? ADD A NEW MACHINE EA’s managed, secure service to provision IT machines and storage on- demand. Get the most out of your cloud. The Managed On-Demand Infrastructure (MODI) tool will set you up and the EAIT team will support you. Launch your next campaign on a high-performance, auto-scaling platform. Engineers Game Teams Content Creators Developers Cut your infrastructure costs by to pay for what you actually use. Expand your audience with a fully capable, fast-loading, fully managed website. Spend your valuable time working on your app, and let us deal with the Ops. Who is MODI for? | MODI Product Pricing FAQs Support Add New Machine Ryan

Slide 34

Slide 34 text

JOYSTICK D E S I G N S Y S T E M Product Documentation Download Get Started Dashboard Time Line Social Overview Badges Boxes Breadcrumbs Button Groups Buttons Colors Forms Grid System Icons Media Objects Navbar Page Headers Popovers Spinner Tables Tabs Themes Typography UI Framework 0.2.1 Whether you use Angular, .NET or PHP, Console's CSS-only UI framework plays nicely with any workflow. There are several ways to get started: Popular Layouts & Components Give your product a head start with our awesome layouts and components. We've got your back If you need any help, have feedback or would like to suggest a component, drop the EA IT Experience Design team a line at Andy McFee or Ryan Rumsey. Zip Download Bower Install You can install the Joystick UI Framework using Bower Package Manager. Download the Console UI Framework straight into your project. Check out the release notes for details of the latest updates. We’ve got you covered! Download our Sketch file and head over to our Getting Started guidelines. Getting Started JOYSTICK D E S I G N S Y S T E M DOWNLOAD SKETCH UI KIT Broswe all articles Broswe all articles From the basics to the advanced, get to know your tools with these helpful tips. • Resetting your password • Editing your profile • Uploading and sharing files • Requesting new equipment • Email distros and groups • VPN access • Onboarding a new hire • Setting up voicemail at your desk • Purchasing software Want to learn more about setting up or maintaining your account? Look no further! Your Tools Accounts and Access Featured Articles Popular help topics: password reset, equipment request, file sharing Find anything (like password reset or new equipment) | SERVICE DESK EA World Submit a Request Hi. How can we help? ADD A NEW MACHINE EA’s managed, secure service to provision IT machines and storage on- demand. Get the most out of your cloud. The Managed On-Demand Infrastructure (MODI) tool will set you up and the EAIT team will support you. Launch your next campaign on a high-performance, auto-scaling platform. Engineers Game Teams Content Creators Developers Cut your infrastructure costs by to pay for what you actually use. Expand your audience with a fully capable, fast-loading, fully managed website. Spend your valuable time working on your app, and let us deal with the Ops. Who is MODI for? | MODI Product Pricing FAQs Support Add New Machine Ryan ITEM THREE ITEM TWO Callie Conner 459 Cremin Throughway Suite 643 New Crawfordberg Aruba Increasing Prosperity With Positive Thinking Lloyd White 74 Amanda Underpass Apt. 116 East Llewellynchester French Polynesia Hypnosis 12 Steps To Acquire Mind Power Eula Bass 377 Ted Glens Suite 106 South Imogene Georgia Kindness And Motivation Tips Challenge Groups To Make A Difference Jerome Silva 248 Damian Garden Port Annette Myanmar Dream Interpretation Common Symbols And Their Meanings Rosetta Ross 7317 Bartell Court Port Rickey Liechtenstein Do Dreams Serve As A Premonition ITEM ONE SEND BADGE BADGE BADGE SEND CANCEL Checkbox Checkbox Checked CHECKBOX LABEL Choice #1 Choice #3 Choice #4 Choice #2 CHOICES LABEL Placeholder text REQUIRED LABEL * Placeholder text REQUIRED LABEL * Placeholder text REQUIRED LABEL * Placeholder text NEWS FEED News item News item News item News item News item News item News item News item News item News item News item News item News item News item Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Placeholder text Category Name | APPLICATION NAME Nav #1 Nav #2 Nav #3 Nav #4 Account Search KPI METRIC 4 2013 2014 2015 2016 CSAT AHT OHT TTR FCR Tabular data Tabular data Tabular data Tabular data Tabular data Tabular data TITLE TWO TITLE THREE TITLE FOUR Tabular data Tabular data Tabular data KPI METRIC 3 13 12 11 10 9 8 7 6 5 4 3 2 1 +6.5% vs. LAST WEEK FORECAST -6.5% vs. LAST WEEK FORECAST KPI METRIC 2 13 12 11 10 9 8 7 6 5 4 3 2 1 +6.5% vs. LAST WEEK FORECAST -6.5% vs. LAST WEEK FORECAST KPI METRIC 1 73% Complete +6.5% vs. LAST WEEK FORECAST -6.5% vs. LAST WEEK FORECAST +6.5% vs. LAST WEEK FORECAST -6.5% vs. LAST WEEK FORECAST Dashboard Name Placeholder text | ORGANIZATION NAME Nav #1 Nav #2 Nav #3 Nav #4 Account Search

Slide 35

Slide 35 text

WHAT NEEDS BUYING?

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Lead with empathy to drive understanding of the perspectives of the humans who: USE PRODUCTS

Slide 38

Slide 38 text

Lead with empathy to drive understanding of the perspectives of the humans who: BUY SERVICES

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ADOPTION IS NOT FUNDING

Slide 41

Slide 41 text

DESIGN SYSTEMS ARE EFFICIENCY & EFFICACY TOOLS

Slide 42

Slide 42 text

PROJECTS ARE PLANNED ACTIVITIES WITH DEFINED CONSTRAINTS

Slide 43

Slide 43 text

FUNDING BRINGS GOVERNANCE, COMMITTEES, AND OWNERSHIP

Slide 44

Slide 44 text

FUNDING WITHOUT DATA LEAVES YOU OPEN TO SUBJECTIVE FEEDBACK

Slide 45

Slide 45 text

Design Systems should deliver and live Projects should deliver and die

Slide 46

Slide 46 text

Design Systems should deliver and live Projects should deliver and die FUND WITH A PROJECT?

Slide 47

Slide 47 text

SUCCESS IS ADOPTION

Slide 48

Slide 48 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 49

Slide 49 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 50

Slide 50 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 51

Slide 51 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 52

Slide 52 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 53

Slide 53 text

OUR APPROACH

Slide 54

Slide 54 text

ASSUMPTIONS 1. We will support multiple platforms & devices 2. We will partner with dozens of engineering teams, hundreds of developers, engineers, and architects, working on tens of products in an environment where teams have choice in technologies they use 3. We will not be resourced to every product/project 4. We will support teams creating, customizing, or configuring digital products 5. We are a small team, so we can’t build completely from scratch 6. We will consider EA culture

Slide 55

Slide 55 text

HYPOTHESES 1. Getting up-front buy-in ($$$) would be very difficult. User adoption would be the key to success. Do 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. Developers, Engineers, Designers, & PMs would welcome having one too.

Slide 56

Slide 56 text

BACK TO THOSE BIRDS…

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Struggles with funders 1. Reluctance to pay for infrastructure 2. Favor short-term solutions 3. Reluctance to give up decision making

Slide 60

Slide 60 text

Sustained success with Collective Impact 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

Slide 61

Slide 61 text

OBSERVE CHOICES

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

CAN YOU MAKE MY THING LOOK LIKE YOUR THING?

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

IF YOU BUILD IT, THEY WILL COME

Slide 69

Slide 69 text

“What’s taking up most of your time?” — Me

Slide 70

Slide 70 text

“What are you struggling with the most?” — Me

Slide 71

Slide 71 text

“Are you using any frameworks?” — Me

Slide 72

Slide 72 text

“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

Slide 73

Slide 73 text

“Hi Ryan. We’re launching an application tomorrow and I’d like to make to get your feedback before we do.” — Anonymous Project Manager

Slide 74

Slide 74 text

“I just didn’t have time to incorporate all the style guides because I needed to ship. Sorry.” —  Anonymous Engineer

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

LESSONS LEARNED

Slide 84

Slide 84 text

1. Real data beats predictive data 6 teams, ~3 weeks

Slide 85

Slide 85 text

2.Nobody puts baby in a corner

Slide 86

Slide 86 text

3.Hackathons work

Slide 87

Slide 87 text

4.Consumer grade marketing and PR

Slide 88

Slide 88 text

5.Evolve the Design System through funded projects

Slide 89

Slide 89 text

6.Have dedicated resources for the Design System

Slide 90

Slide 90 text

7.Design Systems are tools. We still need design.

Slide 91

Slide 91 text

Ellen Lupton, http://www.publicseminar.org/2015/12/designing-the-humanities/

Slide 92

Slide 92 text

How are we doing? 1. 20+ teams using the framework (not just Devs) 2. 15+ projects 3. Community have built extensions and plugins for jQuery, ASP (.NET Helpers!), Angular, etc. 4. Many teams think Joystick = Design 5. Community writing case studies about their usage

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

Made for humans at EA, by humans in IT

Slide 95

Slide 95 text

Thank you! Ryan Rumsey @ryanrumsey