Selling Design Systems; Ethos - Austin

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 the Experience Design team at EA sold and gained adoption of an internal 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 Ethos - Austin August 30, 2017 Ryan Rumsey @ryanrumsey
2. 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
3. Design systems are all the rage
7. This is not one of those talks
9. A STORY
10. Mike Langman, rspb-images.com;
11. Murmuration of starlings in Utrecht, The Netherlands, https://vimeo.com/121168616
15. IT
16. EX CX
17. EX CX The perceived value customers have in interactions with EA. The perceived value employees have in interactions while working at EA.
18. WHY A DESIGN SYSTEM?
22. Hi. I’m Mary.
23. Hi. I’m Mary. Inherent expertise
24. Knowledge Management Learning Management Workforce Management Performance Management Travel Management Facilities Management Support Customer Relationship Management Resource Management Career Development World of systems
25. Accidental complexity
26. Design whole experiences
27. 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
28. 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
29. 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
30. WHAT IS IT?
31. A collection of resources for individuals and teams at EA to design, develop, & write applications, websites, communications, & products.
32. DEVELOPERS DESIGNERS
33. 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
34. 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
35. WHAT NEEDS BUYING?
36. “I’ve been pitching our services for 23 years and I’ve never once successfully convinced an executive of anything.” - Jared Spool
37. Lead with empathy to drive understanding of the perspectives of the humans who: USE PRODUCTS
38. Lead with empathy to drive understanding of the perspectives of the humans who: BUY SERVICES
39. Strategyzer, https://strategyzer.com/canvas/value-proposition-canvas
40. ADOPTION IS NOT FUNDING
41. DESIGN SYSTEMS ARE EFFICIENCY & EFFICACY TOOLS
42. PROJECTS ARE PLANNED ACTIVITIES WITH DEFINED CONSTRAINTS
43. FUNDING BRINGS GOVERNANCE, COMMITTEES, AND OWNERSHIP
44. FUNDING WITHOUT DATA LEAVES YOU OPEN TO SUBJECTIVE FEEDBACK
45. Design Systems should deliver and live Projects should deliver and die
46. Design Systems should deliver and live Projects should deliver and die FUND WITH A PROJECT?
47. SUCCESS IS ADOPTION
48. Innovation Norman, D. A., & Verganti, R. (2014). Incremental and radical innovation: Design research versus technology and meaning change. Design Issues, 30(1), 78-96.
49. 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.
50. 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.
51. 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.
52. 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.
53. OUR APPROACH
54. 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
55. 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.
56. BACK TO THOSE BIRDS…
57. 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
59. Struggles with funders 1. Reluctance to pay for infrastructure 2. Favor short-term solutions 3. Reluctance to give up decision making
60. 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
61. OBSERVE CHOICES
66. CAN YOU MAKE MY THING LOOK LIKE YOUR THING?
68. IF YOU BUILD IT, THEY WILL COME
69. “What’s taking up most of your time?” — Me
70. “What are you struggling with the most?” — Me
71. “Are you using any frameworks?” — Me
72. “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
73. “Hi Ryan. We’re launching an application tomorrow and I’d like to make to get your feedback before we do.” — Anonymous Project Manager
74. “I just didn’t have time to incorporate all the style guides because I needed to ship. Sorry.” —  Anonymous Engineer
76. https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf
77. https://medium.com/sketch-tricks/sketch-measure-master-a-thorough-walkthrough-57d3df25a1cf
82. Do they need help? Do they know they need help? Sweet spot How did we find early adopters?
83. LESSONS LEARNED
84. 1. Real data beats predictive data 6 teams, ~3 weeks
85. 2.Nobody puts baby in a corner
86. 3.Hackathons work
87. 4.Consumer grade marketing and PR
88. 5.Evolve the Design System through funded projects
89. 6.Have dedicated resources for the Design System
90. 7.Design Systems are tools. We still need design.
91. Ellen Lupton, http://www.publicseminar.org/2015/12/designing-the-humanities/
92. 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
94. Made for humans at EA, by humans in IT
95. Thank you! Ryan Rumsey @ryanrumsey