Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond the Toolkit (Nathan Curtis at Enterprise UX 2016)

2,590 views

Published on

Nathan Curtis: "Beyond the Toolkit"
Enterprise UX 2016 • June 9, 2016 • San Antonio, TX, USA
http://2016.enterpriseux.net

Published in: Design
  • Be the first to comment

Beyond the Toolkit (Nathan Curtis at Enterprise UX 2016)

  1. 1. Enterprise UX — San Antonio, TX — Thursday June 9, 2016 Nathan Curtis
 @nathanacurtis BEYOND THE TOOLKIT Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  2. 2. DAY 1: ALL-HANDS DESIGN LEADERSHIP MEETING Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  3. 3. Account Hub Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  4. 4. Web Site Account Setup Account Hub “I WANT A SYSTEM FOR THIS. ALL OF THIS.” Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  5. 5. Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  6. 6. IS THIS COHESIVE? Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  7. 7. NEW Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  8. 8. NEW Bu#ons in Design Systems bit.ly/8s-bu6ons-in-design-systems Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  9. 9. NEW Color in Design Systems bit.ly/8s-color-in-design-systems Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  10. 10. A Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  11. 11. A Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  12. 12. ATypography Color Iconography A DESIGN LANGUAGE’S BIG 3 Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  13. 13. ATypography Color Iconography Space MoAon Imagery Logo WriAng tone Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  14. 14. VIEW ATypography Color Iconography Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  15. 15. ATypography Color Iconography VIEW The Universe! It’s the biggest place. Space Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  16. 16. ATypography Color Iconography VIEW The Universe! It’s the biggest place. THE SOLAR SYSTEM A slightly smaller place. Space UNIT: Space Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  17. 17. ATypography Color Iconography VIEW The Universe! It’s the biggest place. THE SOLAR SYSTEM A slightly smaller place. EDIT Space UNIT: Space My Earth! It’s my biggest place. MySpace Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  18. 18. CHALLENGE “What PARTS are in it?” Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  19. 19. Picking Parts, Products & People bit.ly/8s-parts-products-people Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  20. 20. Component Cut-Up Workshop bit.ly/8s-component-cut-up 1. Cut 2. Group 3. Label Groups 4. Tape 5. PrioriOze 6. Label Components Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  21. 21. http://www.behance.net/gallery/Google-Product-Redesign/4315369 Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  22. 22. BEFORE AFTER EARLY CONCEPTS ON PUBLIC WALL Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  23. 23. Framing a Design System’s Roadmap bit.ly/8s-system-roadmap What We Could Do What We Will Do, By When Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  24. 24. www.google.com/design/spec/material-design/ h6ps://getmdl.io/index.html DESIGN SPEC CODE LIBRARY Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  25. 25. Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  26. 26. MISSION ACCOMPLISHED We just launched our living style guide! Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  27. 27. Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  28. 28. CRITERIA A DESIGN SYSTEM MISSION Create efficient tooling 
 & collabora/ve connecBons 
 to support scaling & shipping
 cohesive, high-quality experiences PARTS PEOPLE PRODUCTS WHY Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  29. 29. CHALLENGE “What PRODUCTS does it reach?” Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  30. 30. A DESIGN SYSTEM’S REACH ∞ A World’s PlaUorm 100 An Enterprise’s Language 10 A PorUolio’s Guide 1 A Team’s Playbook A Design System’s Reach bit.ly/8s-system-reach http://foundation.zurb.comhttp://www.google.com/desharmony.intuit.comhttp://ux.mailchimp.com/patt Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  31. 31. Web Site Account Setup Account Hub Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  32. 32. Web Site Account Setup Account Hub #1. CHOOSE FLAGSHIPS THAT’LL COMMIT TO YOU, TOO icons: all-silhouettes.com Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  33. 33. #2. CHOOSE BETWEEN 3 AND 5 Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  34. 34. #3. USE THEIR LAUNCH DATE(S), OR MAKE YOUR OWN Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  35. 35. Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  36. 36. Home Products Training Services About Us SoluAons #4. WHAT’S YOUR GET? SupportSupport Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  37. 37. #5. AVOID DISTRACTIONS Products Support Training Services About Us SoluAons HomeHome Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  38. 38. Products Support Training Services About Us SoluAons Home #6. HOOK THE SYSTEM WITH CODE THEY USE Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  39. 39. Home Account Hotel Search Book “Content” iPhone iPad Android WEB APPS WEB “SITES” NATIVE APPS Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  40. 40. Home Account Hotel Search Book “Content” iPhone iPad Android WEB APPS WEB “SITES” NATIVE APPS #7. RADIATE INFLUENCE FROM WEB APPS Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  41. 41. SBtching Prototypes bit.ly/8s-sAtching-prototypes #8. DEMO VALUE ACROSS THE JOURNEY Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  42. 42. The demo convinced anyone in 1 minute, leaving me 59 minutes to dig into heTier topics @livlab “ Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  43. 43. CHALLENGE “What PEOPLE are involved?” Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  44. 44. sun.com/webdesign (now defunct) Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  45. 45. #1. OVERLORDS DON’T SCALE Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  46. 46. MODEL 1: SOLITARY Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  47. 47. MODEL 2: CENTRALIZED Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  48. 48. MODEL 2: CENTRALIZED PROS • Spread broadly • Free from bias • Pay attention for opportunities • Solicit & manage requests CONS • Lack context & visibility • Lack power to foster participation • Lower influence Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  49. 49. https://vimeo.com/121037431 Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  50. 50. h6ps://twi6er.com/jina/status/661589501395861504 #2. IT’S A JOB THAT PAYS. DEFINE IT THAT WAY. Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  51. 51. InformaAon architecture InteracAon design User experience Visual design WriAng Front-end dev Design research Content strategy Systems engineering Product management etc… DESIGN LANGUAGE Color Palettes, by category Contrast Meaning Swatches UI ELEMENTS Paragraph Lead paragraph Block quote Headers (H1 - H6) Lists Links Code Typography Hierarchy Weights / types Web fonts Baseline grid Buttons Primary Secondary Button groups Menu buttons Split buttons FAB (floating action) Iconography Pictograms Illustration Icon fonts Alignment Form controls Text Variants (email, etc) Text area Radio Checkbox Select Motion Principles Timing Types Transitions Form controls, cont’d File upload Labels Floating labels Microcopy Required Validation Space Units / measurments Metrics and keylines Structure Photography Divider / rule Switch Slider Image Block Full bleed Inline with positions UI COMPONENTS Action bar/sheet Back to top Badges Breadcrumbs Calendar picker Caption Cards Chat (live) Code block Comments Contact us Cookie notification Data tables Dialog Drawer/accordion Filters Footer Footnotes Header Hero billboard Hero carousel Legend Loading / spinner Local navigation Maps Menu Messaging Toast Block Inline error Modal Nav Megamenu Pagination Progress bar Pull quote Ratings Reviews Rich text editor Search Sidebar Site/App navigation Social networking Status (alpha, beta,...) Tabs Tags / chips / pills Thumbnails / #-ups Tips / tutorial Toolbar Tooltips Video & media UI PATTERNS Authentication Create account Database connection Form structure Launch EDITORIAL Voice & tone Writing for the web Word list Capitalization Punctuation DOWNLOADS Templates (PSD,...) Swatch palettes Fonts Icons Code Permissions Purchase/checkout Settings Site / app structure Swipe to refresh BRANDING Identity Logo(s) Tagline(s) Partnerships Themes GETTING INVOLVED Request New Parts Give Feedback Request Audit Present at a Share Contribute PAGE TEMPLATES Home Category Product Dashboard Article RESEARCH & USERS User needs Personas Research techniques Surveys A/B, multivar. testing ABOUT THE PROGRAM Home page Principles / pillars Getting started FAQ Version history Search results Contact us Getting started Discussion Gallery PRACTICES Accessibility Prototyping Performance SEO Design thinking ABOUT THE TEAM Team Recruiting / jobs LAYOUT SYSTEMS Grids for sites Grids for apps Paneling/transitions Responsive/breakpoints Screen sizes CODING Style Browsers & devices Environments Prog. enhancement Version control UTILITIES Mixins Helpers Customize Variables / tokens YOUR NAME OTHER? DATEPARTS #3. ENSURE SKILLS REPRESENT PARTS Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  52. 52. MODEL 3: FEDERATED Team Models for Scaling a Design System bit.ly/8s-system-team-models Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  53. 53. The Salesforce Team Model for Scaling a Design System bit.ly/sf-system-team-model AT SALESFORCE, A “CYCLICAL” TEAM MODEL Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  54. 54. DRIVING INFLUENCING CONNECTING WATCHING IGNORING #4. FIND YOUR CONNECTOR Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  55. 55. @CAP’S SLIDING SCALE OF GIVING A F@#$ 0 2 4 6 8 10 Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  56. 56. @CAP’S SLIDING SCALE OF GIVING A F@#$ Hold on a second. I’m like a two-out-of- ten on this. How strongly do you feel? I’m probably a six-out-of-ten. Cool, then let’s do it your way. 0 2 4 6 8 10 Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  57. 57. I Interaction V Visual U User experience Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  58. 58. #5. DESIGNATE “GO TO”S, NOT DECIDERS C Content I Interaction V Visual X user eXperience Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  59. 59. #6. MIX DOERS WITH DELEGATORS D = Director Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  60. 60. MAKING ALIGNING DESIGN? BRANDPRODUCT DEV OPS Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  61. 61. Alignment work wasn't enjoyable. This Project Rocked! That Project Sucked! bit.ly/8s-projects-rocked-sucked Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  62. 62. Familiar role as… • Maker (design & dev) • Writer • Collaborator • Reviewer #7. EMBRACE NEW RESPONSIBILITIES New idenAty as… • Product Manager • Editor-in-chief • Seller • Evangelist • Connector • Aligner Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  63. 63. h6p://www.slideshare.net/kleinerperkins/design-in-tech-report-2016/26-OverviewGoogles_Products_Are_Perceived_as Top two ways to improve the design of a company’s products: 1. Have a CEO who makes product design a priority 2. Have an execuOve team that makes product design a priority #8. GET ENDORSED Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  64. 64. First things first: You must have total support from the top. [A Google-wide design iniAaAve] required the vision of a CEO who could rally the enAre company to make it happen. @jonwiley “ Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  65. 65. A style guide is an ARTIFACT of design process. A design system is a living, funded PRODUCT with a roadmap & backlog, serving an ecosystem. A Design System isn’t a Project. It’s a Product, Serving Products. bit.ly/8s-system-is-product Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016
  66. 66. THANKS! Enterprise UX.Beyond the Toolkit.Nathan Curtis.key - June 6, 2016

×