Leveraging the Power of Prototyping in UX

A look at the state of the design profession, why prototyping is the right tool to cope with the ever-increasing complexity around us, principles for successful prototyping, and a few possible areas to leverage the power of prototypes.

Transcript

1. Leveraging the Power 
 of Prototyping in UX → Matthias Ott
2. Matthias Ott User Experience Designer, 
 UI Engineer, Speaker 
 @m_ott
 https://matthiasott.com
3. UX Design Research, Information Architecture,
 Agile Product Development, User Testing Prototyping Low- to high-fidelity, with code, 
 iterative, collaboratively UI Design Modular UI Design, Design Systems UI Engineering / Frontend Design Semantic HTML, modern CSS, 
 and resilient JavaScript for 
 performant, accessible user interfaces
4. Clients include
5. Workshops 
 & Trainings UX and UI design, 
 prototyping, 
 responsive web design, 
 and Adobe XD
6. Lectureship for 
 Interface Prototyping Muthesius University 
 of Fine Arts and Design, Kiel, Germany

7. https://matthiasott.com
8. https://
10. Prototyping
14. Photo by stephan sorkin
16. https://github.com/NVlabs/stylegan
17. Screen size
 Pixel density
 Color spaces
 Sensors
 Input types
 Connection speeds
 Browsers Screenreaders
 APIs
 Augmented Reality
 Virtual Reality Machine Learning / AI Voice UI Robotics
 …
18. Photo by Björn Antonissen
21. With great power…
22. How can companies and designers keep track of emerging technologies and come up with innovative solutions that solve real problems and create business value while respecting ethical norms?
23. This problem is not new…
24. Charles and 
 Ray Eames Ray and Charles Eames selecting slides for the exhibition, “Photography & the City”, 1968. © 2011 Eames Office, LLC.
28. Design is the application of technology and human intention to a problem. Khoi Vinh
29. 1. Define the problem. 2. Imagine the possibilities. 3. Test a hypothesis. 4. Repeat. Design means to…
30. The “Double Diamond”
31. This process also fits the way humans think, btw…
36. The creative process is a dialogue.
37. Prototyping is a way to think with the materials we use to solve our problems.
38. Prototyping is a way to think with the materials we use to solve our problems. Prototyping lets you explore materials.
39. Prototyping is a way to think with the materials we use to solve our problems. Prototyping lets you explore materials. Prototyping lets you create variants – cheap.
40. Prototyping is a way to think with the materials 
 we use to solve our problems. Prototyping lets you explore materials. Prototyping lets you create variants – cheap. Prototyping lets you validate ideas and assumptions.
41. Prototyping is a way to think with the materials 
 we use to solve our problems. Prototyping lets you explore materials. Prototyping lets you create variants – cheap. Prototyping lets you validate ideas and assumptions. Prototypes create a common understanding.
42. Prototyping is a way to think with the materials 
 we use to solve our problems. Prototyping lets you explore materials. Prototyping lets you create variants – cheap. Prototyping lets you validate ideas and assumptions. Prototypes create a common understanding. Prototyping helps you gain design maturity.
43. Prototyping Best Practices
44. 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes 5. Converge Quickly or Reset 6. Iterate Like Crazy Caitlin Kalinowski Head of VR Hardware at Oculus 6 Principles of Prototyping https://firstround.com/review/ six-steps-to-superior-product- prototyping-lessons-from-an- apple-and-oculus-engineer/ ‛ Six Steps to Superior Product Prototyping: Lessons from an Apple and Oculus Engineer
45. 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes 5. Converge Quickly or Reset 6. Iterate Like Crazy 6 Principles of Prototyping 1. Define Your Non-Negotiables
46. What are the absolute must-haves? What are the primary objectives? Write them down. 1. Define Your Non-Negotiables
47. 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes 5. Converge Quickly or Reset 6. Iterate Like Crazy 6 Principles of Prototyping 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style
48. Caution Speed Constantly check and recheck all assumption Choose your top (five) priorities.
 Only focus on them. Critical for • Medical products • Anything that poses a health 
 or safety issue • High-volume products Critical for • Beating a competitor to market • Low-volume products Source: Six Steps to Superior Product Prototyping: Lessons from an Apple and Oculus Engineer, First Round Review, 2017
 https://firstround.com/review/six-steps-to-superior-product-prototyping-lessons-from-an-apple-and-oculus-engineer/
49. 6 Principles of Prototyping 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes 5. Converge Quickly or Reset 6. Iterate Like Crazy 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First
50. Effort Typical approach 
 to prototyping Frontloading 
 work, with the 
 hardest tasks 
 coming first Time Best approach 
 to prototyping Scoping and planning; picking off the easy 
 tasks first Sprinting to tackle big challenges Scaling or 
 fixing bugs Source: Six Steps to Superior Product Prototyping: Lessons from an Apple and Oculus Engineer, First Round Review, 2017
 https://firstround.com/review/six-steps-to-superior-product-prototyping-lessons-from-an-apple-and-oculus-engineer/
52. 6 Principles of Prototyping 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes 5. Converge Quickly or Reset 6. Iterate Like Crazy 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes
54. 6 Principles of Prototyping 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes 5. Converge Quickly or Reset 6. Iterate Like Crazy 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes 5. Converge Quickly or Reset
55. Goal Attempt 1 Solution in sight Iterations yield varied, substantial gains Attempt 3 Attempt 4 Start over and recheck assumptions: Iterations yield only slight incremental gains Attempt 2 Time Source: Six Steps to Superior Product Prototyping: Lessons from an Apple and Oculus Engineer, First Round Review, 2017
 https://firstround.com/review/six-steps-to-superior-product-prototyping-lessons-from-an-apple-and-oculus-engineer/
56. 1. Define Your Non-Negotiables 2. Let the Product Drive Your Style 3. Solve the Hardest Problems First 4. Build Ugly Prototypes 5. Converge Quickly or Reset 6. Iterate Like Crazy 6 Principles of Prototyping
58. Prototyping Examples
59. Sketches Paper prototypes Sticky notes Personas User Flows Experience Maps Wireframes Animations Clickdummies Storyboards Website … Anything can be a prototype.
60. Collect ideas, categorize,
 prioritize
61. low Fidelity Scope narrow wide high
62. low Fidelity Scope narrow wide high
63. Example: Fractal Ziel 1: Eine aktuelle Unternehmensmeldung aufrufen und Bilder dazu herunterladen Ziel 2: Eine aktuelle Studie herunterladen 1) Suche 1) Newsroom 2) Newsroom / Presse 2) Publikationen 3) News-Detailseite 3) Filter: Studien Philip gibt in einer Suchmaschine „W&W presse“ ein. In der Ergebnisliste wählt er den ersten Link. Philip kennt den Newsroom der W&W und ruft ihn direkt auf. Er klickt in der Subnavigation auf „Publikationen“. Im Newsroom wählt er eine der aktuellsten Nachrichten aus. Er landet auf der Seite mit einer Auflistung aller Publikationen in chronologischer Reihenfolge. Die Liste der Publikationen filtert er nach „Studien“. Er wählt eine Studie aus der Liste und lädt sie herunter. Auf der Detailsseite der Nachricht erhält er nicht nur den Text an sich, sondern anbei auch ein Diagramm und Bilder. Er klickt auf den Download-Link für ein ZIP mit allen Bildern zur Meldung. Prototyping 
 user flows
64. Sketches / Paper prototypes
65. Wireframes / Priority Guides
66. Component prototypes
67. CodePen prototypes
68. Typography prototypes
69. Typography prototypes
70. Animation prototypes
71. Voice UI prototypes
72. Voice UI prototypes ✅ Keep interactions brief ✅ Clearly present options ✅ Limit to 3 choices at a time ✅ Ask for information one piece at a time ✅ Indicate when the user needs to provide info ✅ Don’t assume users know what to do or what will happen
73. Voice UI prototypes: Start with dialogue flows
74. https://voiceprinciples.com/
76. Prototyping A Mindset
77. Prototyping for Designers Kathryn McElroy
78. Danke! @m_ott
 matthiasott.com