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 usability

455 views

Published on

From the talk of the same name given first at UX Cambridge 2016.
An exploration into the creation of a design system, and the unexpected consequences for the field of UX.

Published in: Design
  • Be the first to comment

Beyond usability

  1. 1. Beyond usability 🚀 UX Cambridge 2016 Jonathan Roberts User Experience Designer @touchdeluxe “I invented the term [User Experience] because I thought human interfaces and usability were too narrow” - Don Norman (http://adaptivepath.org/ideas/e000862/)
  2. 2. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Airbus and David Benjamin/The Living, an Autodesk Studio https://medium.com/ideas-by-design/why-design-is-going-to-become-a-team-sport-for-humans-machines-9ba22e1a4aa3#.cogyvwtto http://www.autodesk.com/customer-stories/airbus?_ga=1.196619116.1704246085.1473709732
  3. 3. An overview About this talk, what we’re going to cover ↓ Design systems Why they’re necessary, how to start building one and mistakes to avoid ↓ Beyond usability What you should be doing with your new design system powers @touchdeluxe ▸ Introduction Design systems Beyond usability
  4. 4. Me I’ve been designing products for ~10 years, mostly enterprise software and consumer IoT products, always client-side within the engineering/product team @touchdeluxe ▸ Introduction Design systems Beyond usability
  5. 5. Redgate Software-for-software-people, in Cambridge Usability was always the a differentiator… ...now it’s a basic expectation @touchdeluxe ▸ Introduction Design systems Beyond usability
  6. 6. Design Systems @touchdeluxe Introduction ▸ Design systems Beyond usability
  7. 7. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Salesforce https://developer.salesforce.com/lightning
  8. 8. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Airbnb http://airbnb.design/building-a-visual-language/
  9. 9. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Google Material Design https://material.google.com/
  10. 10. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Google Material Design https://medium.com/ge-design/ges-predix-design-system-8236d47b0891#.hth8jo41p
  11. 11. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Mina Markham https://medium.com/git-out-the-vote/pantsuit-the-hillary-clinton-ui-pattern-library-238e9bf06b54#.wci8t5uz1
  12. 12. @touchdeluxe Introduction ▸ Design systems Beyond usability Consistency “It’s a coordinated effort to apply a common design style to everything we do” Credit: https://www.red-gate.com/blog/building/honeycomb-design-style
  13. 13. @touchdeluxe Introduction ▸ Design systems Beyond usability atomicdesign.bradfrost.com
  14. 14. Building Redgate’s Design System, Honeycomb @touchdeluxe Introduction ▸ Design systems Beyond usability
  15. 15. @touchdeluxe Introduction ▸ Design systems Beyond usability A foundation to build on, some internal marketing and full support a C-level
  16. 16. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
  17. 17. @touchdeluxe Introduction ▸ Design systems Beyond usability Design WeekDesign Week
  18. 18. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
  19. 19. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
  20. 20. Preparation @touchdeluxe Introduction ▸ Design systems Beyond usability Current Future
  21. 21. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
  22. 22. Component cut-up workshop (the 10 minute version 🕑) @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517#.amctpik38
  23. 23. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 1 ~ 30 seconds ~ Choose an “atom”
  24. 24. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 2 ~ 5 minutes ~ Cut out all the examples of your chosen component
  25. 25. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 3 ~ 4 minutes ~ Begin to group your components
  26. 26. Honeycomb honeycomb.red-gate.com @touchdeluxe Introduction ▸ Design systems Beyond usability
  27. 27. @touchdeluxe Introduction ▸ Design systems Beyond usability #Honeycomb We should have put a team on it full time
  28. 28. @touchdeluxe Introduction ▸ Design systems Beyond usability Implementation Avoid asserting the use of a single tech
  29. 29. @touchdeluxe Introduction ▸ Design systems Beyond usability What’s next in the sequence? 1 11 21 1211 111221 ….?
  30. 30. @touchdeluxe Introduction ▸ Design systems Beyond usability What’s next in the sequence? 1 11 21 1211 111221 31 22 11
  31. 31. @touchdeluxe Introduction ▸ Design systems Beyond usability Consistency for consistency’s sake… 😓
  32. 32. @touchdeluxe Introduction ▸ Design systems Beyond usability
  33. 33. @touchdeluxe Introduction ▸ Design systems Beyond usability
  34. 34. @touchdeluxe Introduction ▸ Design systems Beyond usability
  35. 35. Critical mass of 3 @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: https://www.youtube.com/watch?v=GA8z7f7a2Pk
  36. 36. Your new Design System (and how to take advantage of it) @touchdeluxe Introduction ▸ Design systems Beyond usability
  37. 37. @touchdeluxe Introduction ▸ Design systems Beyond usability Think abductively The most likely one is probably the right one Resource: http://www.jonkolko.com/writingAbductiveThinking.php
  38. 38. @touchdeluxe Introduction ▸ Design systems Beyond usability
  39. 39. @touchdeluxe Introduction ▸ Design systems Beyond usability “...so what is it you do?” Good question
  40. 40. What to do? (now you’ve got all this time) @touchdeluxe Introduction Design systems ▸ Beyond usability
  41. 41. 1 Be responsible for team learning @touchdeluxe Introduction Design systems ▸ Beyond usability
  42. 42. @touchdeluxe Introduction Design systems ▸ Beyond usability Image credit: http://www.usaswimming.org/ViewNewsArticle.aspx?TabId=0&itemid=4368&mid=8712
  43. 43. @touchdeluxe Introduction Design systems ▸ Beyond usability Question assumptions and build team intrigue through question gathering
  44. 44. @touchdeluxe Introduction Design systems ▸ Beyond usability
  45. 45. @touchdeluxe Introduction Design systems ▸ Beyond usability
  46. 46. @touchdeluxe Introduction Design systems ▸ Beyond usability Resource: http://www.slideshare.net/johannakollmann/understanding-systems Credit: http://proceedings.informingscience.org/IS2002Proceedings/papers/Horan133Newan.pdf
  47. 47. 2 Contribute to innovation @touchdeluxe Introduction Design systems ▸ Beyond usability
  48. 48. @touchdeluxe Introduction Design systems ▸ Beyond usability Credit: http://www.slideshare.net/ISITEDesign/delight-2013-jared-spool-of-uie
  49. 49. @touchdeluxe Introduction Design systems ▸ Beyond usability Image credit: https://twitter.com/wapadam/status/662606961800781824
  50. 50. 3 Uphold your principles @touchdeluxe Introduction Design systems ▸ Beyond usability
  51. 51. @touchdeluxe Introduction Design systems ▸ Beyond usability Principles Recover from mistakes Prevent them Imbue trust Facilitate conversation
  52. 52. In summary @touchdeluxe Introduction Design systems ▸ Beyond usability
  53. 53. Beyond usability 🚀 UX Cambridge 2016 Jonathan Roberts User Experience Designer @touchdeluxe Thank you!

×