Prototyping a Mobile App (Workshop)

Slides from my workshop at ACT-W 2015.

This workshop is about understanding user experience (UX), what tools to use to wireframe and prototype, how to iterate on a design, and how to validate an interface.

Transcript

1. Workshop: Prototyping a Mobile App
2. 1. Understand Design Thinking + User Experience 2. UX Process 3. Prototyping Tools 4. Lots of Hands-on Activities!!! Today’s Goals
3. “Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.” –Ivan Chermayeff
4. 1. Understand the problem 2. Brainstorm solutions 3. Decide on a user story 4. Prototype 5. Validate your solution with testing Process Source: http://www.gv.com/sprint/
5. The Basics
6. “Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.” –Steve Jobs
7. User Experience (UX) is the establishment of a philosophy about how to treat people. User Experience
8. Design thinking is a proven and repeatable problem-solving protocol that any business or profession can employ to achieve extraordinary results. What is Design Thinking?
9. MVP = Minimun Viable Product The minimum viable product is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort.
10. Case Study: Sprig
11. 1. Understand the problem 2. Brainstorm solutions 3. Decide on a user story 4. Prototype 5. Validate your solution with testing Process Source: http://www.gv.com/sprint/
12. Exercise Time
13. 1. Understand the problem 2. Brainstorm solutions 3. Decide on a user story 4. Prototype 5. Validate your solution with testing Process Source: http://www.gv.com/sprint/
14. Exercise Time
15. “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” -Antoine de Saint Exupery
16. User stories are the part of an agile approach that helps shift the focus from writing about requirements to talking about them. All agile user stories include a written sentence or two and, more importantly, a series of conversations about the desired functionality. User Stories
17. A persona represents a cluster of users who exhibit similar behavioral patterns in their purchasing decisions, use of technology or products, customer service preferences, lifestyle choices, and the like. Behaviors, attitudes, and motivations are common to a "type" regardless of age, gender, education, and other typical demographics. In fact, personas vastly span demographics. Persona
19. 1. Understand the problem 2. Brainstorm solutions 3. Decide on a user story 4. Prototype 5. Validate your solution with testing Process Source: http://www.gv.com/sprint/
20. Exercise Time
21. Prototyping
22. Why Prototype?
23. –Frank Lloyd Wright “You can use an eraser on the drafting table or a sledge hammer on the construction site.”
24. Development is Expensive
25. A wireframe is a visual representation of the content of a page or app. It is a visualization tool and process for presenting proposed functionality, structure, and content of a web page, website, or application. Wireframes
28. A mockup is a model or replica of a machine or structure, used for instructional or experimental purposes. A UI mockup consists of one or several static pictures that resemble the future UI of the application in as many aspects as possible Mockups
31. A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. Prototypes
34. Wireframe = Representation Mockup = Shape/Size/Colors Prototype = Function What are the Differences?
35. Lo to Medium Fidelity Balsamiq http:// balsamiq.com/ Flinto https:// www.flinto.com/ Proto IO http://proto.io/ Moqups https:// moqups.com/ Pop. (iPhone/Android App) Mockups.me http:// www.mockups.me/ App Cooker http:// www.appcooker.com/ Fluid UI https:// www.fluidui.com/ UX Pin http://uxpin.com/
36. Medium to High Fidelity Axure http://axure.com OmniGraffle http://www.omnigroup.com/omnigraffle/ InVision http://www.invisionapp.com/ Justinmind http://www.justinmind.com/ ProtoShare http://www.protoshare.com/
37. High to Very High Fidelity Sketch Photoshop Illustrator Keynote, PowerPoint (Keynotopia for templates) HTML + CSS (+ JS)
39. 1. Understand the problem 2. Brainstorm solutions 3. Decide on a user story 4. Prototype 5. Validate your solution with testing Process Source: http://www.gv.com/sprint/
40. Exercise Time
41. Fidelity is Less Important When Validating an Idea
42. My Process Pen + Paper Wireframe - Balsamiq Lo-Fi Prototype - InVision HiFi Mockup - Keynote, Justinmind, Photoshop HiFi Prototype - Keynote, Justinmind, HTML/CSS/JS, Photoshop + InVision
43. –Jony Ive “There are 9 rejected ideas for every idea that works.”
44. Understand What You’re Building Before Committing to High-Fidelity
45. 1. Understand the problem 2. Brainstorm solutions 3. Decide on a user story 4. Prototype 5. Validate your solution with testing Process Source: http://www.gv.com/sprint/
46. Exercise Time
47. Homework
48. More Reading How to Decide What Ideas to Prototype: http://www.fastcodesign.com/1672929/how-to-decide-what-ideas-to-prototype How to Prototype Websites on Paper: http://www.creativebloq.com/ux/how-prototype-websites-paper-31514246 Helpful Rapid Prototyping Methods and Tools: http://chiefdisruptionofficer.com/helpful-rapid-prototyping-methods-and-tools- to-bring-digital-ideas-to-life-fast/ A Lean UX Design Process: http://www.anniestudio.org/a-lean-ux-design-process/
49. Questions?
50. Thank you! Caterina Paun @caterinasworld