Leveraging the Power of Prototyping in UX → Matthias Ott @m_ott matthiasott.com

Matthias Ott User Experience Designer, UI Engineer, Speaker @m_ott https://matthiasott.com

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

Clients include

Workshops & Trainings UX and UI design, prototyping, responsive web design, and Adobe XD

Lectureship for Interface Prototyping Muthesius University of Fine Arts and Design, Kiel, Germany

https://matthiasott.com

https://

Prototyping

Photo by stephan sorkin

https://github.com/NVlabs/stylegan

Screen size Pixel density Color spaces Sensors Input types Connection speeds Browsers Screenreaders APIs Augmented Reality Virtual Reality Machine Learning / AI Voice UI Robotics …

Photo by Björn Antonissen

With great power…

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?

This problem is not new…

Charles and Ray Eames Ray and Charles Eames selecting slides for the exhibition, “Photography & the City”, 1968. © 2011 Eames Office, LLC.

Design is the application of technology and human intention to a problem. Khoi Vinh

Design means to…

Define the problem. Imagine the possibilities. Test a hypothesis. Repeat.

The “Double Diamond”

This process also fits the way humans think, btw…

The creative process is a dialogue.

Prototyping is a way to think with the materials we use to solve our problems.

Prototyping is a way to think with the materials we use to solve our problems. Prototyping lets you explore materials.

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 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.

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 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.

Prototyping Best Practices

6 Principles of Prototyping

Define Your Non-Negotiables Let the Product Drive Your Style Solve the Hardest Problems First Build Ugly Prototypes Converge Quickly or Reset Iterate Like Crazy Caitlin Kalinowski Head of VR Hardware at Oculus ☞ Six Steps to Superior Product Prototyping: Lessons from an Apple and Oculus Engineer https://firstround.com/review/ six-steps-to-superior-productprototyping-lessons-from-anapple-and-oculus-engineer/

6 Principles of Prototyping

Define Your Non-Negotiables Let the Product Drive Your Style Solve the Hardest Problems First Build Ugly Prototypes Converge Quickly or Reset Iterate Like Crazy

  1. Define Your Non-Negotiables What are the absolute must-haves? What are the primary objectives? Write them down.

6 Principles of Prototyping

Define Your Non-Negotiables Let the Product Drive Your Style Solve the Hardest Problems First Build Ugly Prototypes Converge Quickly or Reset Iterate Like Crazy

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/

6 Principles of Prototyping

Define Your Non-Negotiables Let the Product Drive Your Style Solve the Hardest Problems First Build Ugly Prototypes Converge Quickly or Reset Iterate Like Crazy

Effort Best approach to prototyping Sprinting to tackle big challenges 😓 Frontloading work, with the hardest tasks coming first Scoping and planning; picking off the easy tasks first Typical approach to prototyping Scaling or fixing bugs 😎 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/

6 Principles of Prototyping

Define Your Non-Negotiables Let the Product Drive Your Style Solve the Hardest Problems First Build Ugly Prototypes Converge Quickly or Reset Iterate Like Crazy

6 Principles of Prototyping

Define Your Non-Negotiables Let the Product Drive Your Style Solve the Hardest Problems First Build Ugly Prototypes Converge Quickly or Reset Iterate Like Crazy

Goal Solution in sight Iterations yield varied, substantial gains Start over and recheck assumptions: Iterations yield only slight incremental gains Attempt 1 Attempt 2 Attempt 3 Attempt 4 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/

6 Principles of Prototyping

Define Your Non-Negotiables Let the Product Drive Your Style Solve the Hardest Problems First Build Ugly Prototypes Converge Quickly or Reset Iterate Like Crazy

Prototyping Examples

Anything can be a prototype. Sketches Paper prototypes Sticky notes Personas User Flows Experience Maps Wireframes Animations Clickdummies Storyboards Website …

Collect ideas, categorize, prioritize

high Fidelity low narrow wide Scope

high Fidelity low narrow wide Scope

Ziel 1: Eine aktuelle Unternehmensmeldung aufrufen und Bilder dazu herunterladen 1) Suche 2) Newsroom / Presse 3) News-Detailseite Philip gibt in einer Suchmaschine „W&W presse“ ein. In der Ergebnisliste wählt er den ersten Link. Im Newsroom wählt er eine der aktuellsten Nachrichten aus. 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. Example: Fractal Ziel 2: Eine aktuelle Studie herunterladen Prototyping user flows

  1. Newsroom
  2. Publikationen
  3. Filter: Studien Philip kennt den Newsroom der W&W und ruft ihn direkt auf. Er klickt in der Subnavigation auf „Publikationen“. 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.

Sketches / Paper prototypes

Wireframes / Priority Guides

Component prototypes

CodePen prototypes

Typography prototypes

Typography prototypes

Animation prototypes

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 Voice UI prototypes

Voice UI prototypes: Start with dialogue flows

https://voiceprinciples.com/

A Prototyping Mindset

Prototyping for Designers Kathryn McElroy

Danke! 😅 @m_ott matthiasott.com