A presentation at In-house event @ Siemens Healthineers in in Erlangen, Germany by Matthias Ott
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
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
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
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.
for free. You
can too.