Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Selling Design Systems; UXPin Design Systems Ma...

Ryan Rumsey
December 05, 2017

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.

Ryan Rumsey

December 05, 2017
Tweet

More Decks by Ryan Rumsey

Other Decks in Design

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. IT

  3. EX PX The perceived value players have in interactions with

    EA. The perceived value employees have in interactions while working at EA.
  4. A collection of resources for individuals and teams at EA

    to design and develop internal applications, websites, and content strategies.
  5. Knowledge Management Learning Management Workforce Management Performance Management Travel Management

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

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

    Facilities Management Support Customer Relationship Management Resource Management Career Development World of systems
  8. “I’ve been pitching our services for 23 years and I’ve

    never once successfully convinced an executive of anything.” - Jared Spool
  9. 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
  10. “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
  11. “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
  12. 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
  13. April 13, 2015 was my start date. 13 days after

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

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

    the fiscal year started. All headcount finalized. All projects finalized. All budgets finalized.
  16. Design Systems should deliver and live Projects should deliver and

    die FUND WITH A PROJECT?* *Easy choice when you don’t have a choice
  17. Innovation Norman, D. A., & Verganti, R. (2014). Incremental and

    radical innovation: Design research versus technology and meaning change. Design Issues, 30(1), 78-96.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. Mike Langman, rspb-images.com; Collective Impact, Copyright © 2011 by Leland

    Stanford Jr. University All Rights Reserved Sustained Adoption
  23. 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 Sustained Adoption
  24. 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 influence behavior & improve performance 5. Cross-sector coordination over individual intervention Sustained Adoption
  25. 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 influence behavior & improve performance 5. Cross-sector coordination over individual intervention Sustained Adoption
  26. 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
  27. 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
  28. Do they need help? Do they know they need help?

    How did we find early adopters?
  29. Do they need help? Do they know they need help?

    Sweet spot How did we find early adopters?
  30. 1. 6 teams 2. 5 projects 3. Community sharing the

    url with friends 4. “Can I create my own components?” Outcomes
  31. 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
  32. 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.
  33. 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.
  34. 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
  35. 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