Prototype it!

First step in creating your app :Prototype it!

Elina Kim, Rocio Montes

Rocio Montes

Senior Software Engineer in Quality @ Intuit

Rocio_montes@intuit.com

Elina Kim

Senior XD Prototyper @ Intuit

Elina_kim@intuit.com

Iterative Design Process

Adapted from “The Design Process”

Iterative Design Process

Adapted from “The Design Process”

“A prototype is an imperfect, rudimentary version of something designed to exhibit both form and function in a realistic way.”

Low-FidelityPrototypesLow-fidelity prototypes are about understanding users’ needs.

Mid-FidelityPrototypes

High-FidelityPrototypesHigh-fidelity prototypes are about delivering delightful experiences.

“The fidelity of your prototype should match the fidelity of your questions.”

Heather Daggett

Be Practical

Slide courtesy of Heather Daggett

Can we use a brighter image?

Beautiful!I love those icons

I really hate red

Can we make the photos bigger?

Slide courtesy of Heather Daggett

Slide courtesy of Heather Daggett

Slide courtesy of Heather Daggett

Can I save my changes?

This flow doesn’t make sense

How can I delete an item?

Why Should We Prototype?● “A picture is worth 1000 words. A

prototype is worth 1000 meetings.” (IDEO)

● Best way to explore, validate and refine ideas

● Makes the cost of mistakes cheap

Prototyping tools

Time to prototype!

ScenarioYour job here is to (very quickly) design an app that can be used to place an order at a Cafe. Then you will (very quickly) construct a prototype that can be used to test your design.

The app has to support the following:

● multiple drinks options in multiple sizes

● a confirmation of each drink before adding to the current order● calculation and display the price of each drink combination & total order● issue a confirmation of the total order before finally sending it to the barista

Thank you!

Rocio Montes

Senior Software Engineer in Quality @ Intuit

Rocio_montes@intuit.com

Elina Kim

Senior XD Prototyper @ Intuit

Elina_kim@intuit.com