Turning Your Idea Into a Design

Transcript

1. Turning Your Idea Into a Design Caterina Paun @caterinasworld
2. Idea
3. Research Design Test Process
4. MVP = Minimum 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.
6. $$$$ $ $ $ $$ $$$
7. $ $$ $$ $$$ $$$$ $$$$ $ $ $ $$ $$$ $$$
8. “Want to increase innovation? Lower the cost of failure.” -Joi Ito
9. Design Sprints
10. A design sprint is a flexible product design framework that serves to maximize the chances of making something people want. It is an intense effort conducted by a small team where the results will set the direction for a product or service. Also knows as product sprints, design studios, etc. Design Sprint
11. “Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.” –Ivan Chermayeff
12. 1. Understand the problem. 2. Diverge. (brainstorm what’s possible) 3. Converge. (rank solutions) 4. Prototype. (create a minimum viable concept) 5. Test. (observe what works for users.) 6. Iterate… (perhaps with another design sprint)
15. 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/
16. The User Experience Basics
17. User Experience User Experience (UX) is how a person feels when interfacing with a system. The system could be a website, a web application or desktop software and, in modern contexts, is generally denoted by some form of human-computer interaction (HCI).
18. “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
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. Case Study: Sprig
21. Exercise Time
22. 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/
23. Exercise Time
24. “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
25. 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
26. 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
28. 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/
29. Exercise Time
30. Wireframes vs. Mockups vs. Prototypes
31. Why Prototype?
32. –Frank Lloyd Wright “You can use an eraser on the drafting table or a sledge hammer on the construction site.”
33. Development is Expensive
34. 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
37. A mockup mockup consists of one or several static pictures that resemble the future UI of the application in as many aspects as possible Mockups
40. 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
44. Wireframe = Representation Mockup = Shape/Size/Colors Prototype = Function What are the Differences?
45. 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/
46. 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/
47. High to Very High Fidelity Sketch Photoshop, Illustrator Keynote, PowerPoint (Keynotopia for templates) HTML + CSS + JS
49. 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/
50. Exercise Time
51. Fidelity is Less Important When Validating an Idea
52. My Process Pen + Paper Wireframe - Balsamiq Lo-Fi Prototype - Keynote HiFi Mockup - Photoshop, Sketch HiFi Prototype - Keynote, Justinmind, HTML/CSS/JS, Photoshop + InVision, FramerJS
53. –Jony Ive “There are 9 rejected ideas for every idea that works.”
54. Understand What You’re Building Before Committing to High-Fidelity
55. 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/
56. Exercise Time
57. Homework
58. More Reading How to Decide What Ideas to Prototype: http://www.fastcodesign.com/1672929/how-to-decide-what- ideas-to-prototype 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/
59. More Reading… Books
60. Questions?
61. Thank you! Caterina Paun @caterinasworld