Beyond Usability

Design systems mean we’re more confident than we’ve ever been in designing usable products and services.

A good design system guides visual consistency and provides a library of proven interaction patterns – but a great design system helps UX professionals keep pace with the ever increasing speed at which product iterations can be put into the hands of users.

That’s all well and good, but how do we know what we’re putting out there is actually valuable to our users? That it meets expectations? That the product will remain cohesive as it grows? Traditionally, that’s been the realm of product managers and product owners.

This session focuses on where UX as a discipline is heading and how we can ensure our role keeps up and our skills get put to use designing products that are valuable as well as great to use.

I will set the scene by touching on the design system and usability frameworks Redgate has developed over the last year. I’ll demonstrate how the work has enabled teams to deliver features to mature products faster – and how an entirely new product can be stood up in less than 4 weeks. I’ll explain why then, as UX professionals, we need to evolve to be much more concerned about delivering value too.

You'll leave with a solid understanding of how design systems have contributed to a new set of challenges for the field of UX. You’ll also be armed with a number of suggestions that will ensure you’re able to evolve at the same pace and, most importantly, be known in your organisation for delivering usable, cohesive and valuable products to your users.

Transcript

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. @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. 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. 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. 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. Design Systems @touchdeluxe Introduction ▸ Design systems Beyond usability
7. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Salesforce https://developer.salesforce.com/lightning
8. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Airbnb http://airbnb.design/building-a-visual-language/
9. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Google Material Design https://material.google.com/
10. @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: Google Material Design https://medium.com/ge-design/ges-predix-design-system-8236d47b0891#.hth8jo41p
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. @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. @touchdeluxe Introduction ▸ Design systems Beyond usability atomicdesign.bradfrost.com
14. Building Redgate’s Design System, Honeycomb @touchdeluxe Introduction ▸ Design systems Beyond usability
15. @touchdeluxe Introduction ▸ Design systems Beyond usability A foundation to build on, some internal marketing and full support a C-level
16. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
17. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week Design Week
18. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
19. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
20. Preparation @touchdeluxe Introduction ▸ Design systems Beyond usability Current Future
21. @touchdeluxe Introduction ▸ Design systems Beyond usability Design Week
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. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 1 ~ 30 seconds ~ Choose an “atom”
24. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 2 ~ 5 minutes ~ Cut out all the examples of your chosen component
25. @touchdeluxe Introduction ▸ Design systems Beyond usability Task 3 ~ 4 minutes ~ Begin to group your components
26. Honeycomb honeycomb.red-gate.com @touchdeluxe Introduction ▸ Design systems Beyond usability
27. @touchdeluxe Introduction ▸ Design systems Beyond usability #Honeycomb We should have put a team on it full time
28. @touchdeluxe Introduction ▸ Design systems Beyond usability Implementation Avoid asserting the use of a single tech
29. @touchdeluxe Introduction ▸ Design systems Beyond usability What’s next in the sequence? 1 11 21 1211 111221 ….?
30. @touchdeluxe Introduction ▸ Design systems Beyond usability What’s next in the sequence? 1 11 21 1211 111221 31 22 11
31. @touchdeluxe Introduction ▸ Design systems Beyond usability Consistency for consistency’s sake…
32. @touchdeluxe Introduction ▸ Design systems Beyond usability
33. @touchdeluxe Introduction ▸ Design systems Beyond usability
34. @touchdeluxe Introduction ▸ Design systems Beyond usability
35. Critical mass of 3 @touchdeluxe Introduction ▸ Design systems Beyond usability Credit: https://www.youtube.com/watch?v=GA8z7f7a2Pk
36. Your new Design System (and how to take advantage of it) @touchdeluxe Introduction ▸ Design systems Beyond usability
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. @touchdeluxe Introduction ▸ Design systems Beyond usability
39. @touchdeluxe Introduction ▸ Design systems Beyond usability “...so what is it you do?” Good question
40. What to do? (now you’ve got all this time) @touchdeluxe Introduction Design systems ▸ Beyond usability
41. 1 Be responsible for team learning @touchdeluxe Introduction Design systems ▸ Beyond usability
42. @touchdeluxe Introduction Design systems ▸ Beyond usability Image credit: http://www.usaswimming.org/ViewNewsArticle.aspx?TabId=0&itemid=4368&mid=8712
43. @touchdeluxe Introduction Design systems ▸ Beyond usability Question assumptions and build team intrigue through question gathering
44. @touchdeluxe Introduction Design systems ▸ Beyond usability
45. @touchdeluxe Introduction Design systems ▸ Beyond usability
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. 2 Contribute to innovation @touchdeluxe Introduction Design systems ▸ Beyond usability
48. @touchdeluxe Introduction Design systems ▸ Beyond usability Credit: http://www.slideshare.net/ISITEDesign/delight-2013-jared-spool-of-uie
49. @touchdeluxe Introduction Design systems ▸ Beyond usability Image credit: https://twitter.com/wapadam/status/662606961800781824
50. 3 Uphold your principles @touchdeluxe Introduction Design systems ▸ Beyond usability
51. @touchdeluxe Introduction Design systems ▸ Beyond usability Principles Recover from mistakes Prevent them Imbue trust Facilitate conversation
52. In summary @touchdeluxe Introduction Design systems ▸ Beyond usability
53. Beyond usability UX Cambridge 2016 Jonathan Roberts User Experience Designer @touchdeluxe Thank you!