Download to read offline
Uploaded byEuropean Innovation Academy
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
This document discusses design prototyping and the importance of testing ideas early. It provides three key points: 1) Prototyping allows designers to get feedback on ideas early in the design process when changes are cheaper to make. This helps uncover problems and leads to better products. 2) Low-fidelity prototypes like paper prototypes or wireframes can be used to test overall concepts and workflows before investing in more advanced prototypes. User testing of prototypes provides critical feedback. 3) An iterative process of prototyping, testing, refining and retesting ideas helps designers "fail fast" and home in on the best solutions through learning what doesn't work. This process of building to think is important for
More Related Content
Similar to APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
More from European Innovation Academy
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
- 1. DESIGN HACKS!! Zahra Tashakorinia| APIA July 2018
- 2.
- 3. Back in 2003,we weren’t all playing games on our phones.You still had to have two different devices: one for games and one for making calls. Nokia’s N-Gage was an attempt at combining phones and gaming, it was just a bad one! WHY?!
- 4. Today product definition In2007, the majority of first iPhone user were gamers! Now, the mobile games market is rising to new heights, and most of the growth is thanks to the iPhone. WHY?!
- 5. Simplicity and ease-of-useare far more important when doing computing on a tiny screen.
- 6.
- 7. Whatisa prototype? § Anything tangiblethat lets us explore an idea, evaluate it, and push it forward is a prototype. § In each case an idea has been given expression through an appropriate medium to show to others for feedback. § Prototyping is always inspirational - not in the sense of a perfected artwork but just the opposite: because it inspires new ideas. Tim Brown, IDEO
- 8. Whatisa prototype? § There aremany approaches to building prototypes for hardware products and software user interfaces. § UI prototypes can be as simple as a drawing on a piece of paper or as complex as web application § Or anywhere in between those extremes! § Acting it out the experience with a product or service is best way to refine it! § In prototyping one has to plan to throw
- 9.
- 10. 3 Stages ofPrototyping
- 11. DesignProcess Institute of Design08.24.10 10 Build it yourself Low cost Embrace failure Expect changes Build it with an expert High cost Integrated model Have an expert build it Framework
- 12. Whybother with prototypes? § Get feedbackearlier, cheaper § Experiment with alternatives § Easier to change to throw away
- 13. Benefitsof Prototyping § Low cost:requires little time, technical expertise § High return on investment: § Getting user feedback early in the design process § Uncovers problematic design choices before they are committed to code § Minimizes miscommunication between designers § Generally results in a better UI and product experience.
- 14.
- 15. TidyTilt wasbornoffof prototyping! IIT Student Project> TT Design L abs,
- 16.
- 17.
- 18. TidyTilt wasbornoffof prototyping! Designed as aschool project was one of the most funded successful design projects on Kickstarter Featured on WSJ, Wired magazine and ABC 7 News. I Co-founded TT Design Labs and partnered with Chinese manufacturer to launch 3 products and distributed them to 80+ countries.
- 19. BULID TO THINK THINKTO BUILD
- 20.
- 21. Build it yourselfLow cost Embrace failure Expect changes Build it TODAY’s FOCUSE Test Prototype Build Prototype Enhance Design
- 22. WHAT YOU NEED §Pen § Paper § Post in note
- 23. GatheringData § Who areyour users? What tasks are they trying to accomplish? § Don’t guess—do your research! § Observe users in their natural habitats § Check out solutions that already exist (even hacky ones) § Make sure you are focusing on a problem at the right level of detail § At this stage,don’t think“bicycle cup holders” § Think“helping cyclists stay hydrated without getting hit by a car”
- 24. Brainstorming Warm-Up § It canbe helpful to do some sort of warm-up before you start brainstorming § You could allot ~5 minutes to free-form chatter about related products or tasks § Or you could encourage your team to start thinking creatively and feeling comfortable sharing their thoughts with an associations game § Examples:“Songs David Hasselhoff should cover”, “Mythological animal which would be most lucrative to own”
- 25.
- 26. Brainstorming: IDEORules § One conversationat a time § Stay focused § Encourage wild ideas § Defer judgment § Build on ideas from other brainstormers
- 27. ValuingIdeas § Define theimportance of each idea: § Does it address the problem? § Will target users like it? § Are the technical requirements available? § Is it affordable to implement? § Rank ideas by importance § Pick the top N ideas
- 28. Low-Fidelity Prototypes § Now thatyou’ve got some ideas, you can start making a storyboards and paper prototypes. § It may seem difficult to represent something as complicated as a modern software interface with something as old school as paper
- 29. Wireframes § Visual representationsof an interface’s intended layout, typically without its actual content § Good for evaluating content placement
- 30. Storyboards § Inspired bystoryboards used by animators § Series of images which represent how an interface would be used to accomplish a task § Could be a narrative § Good for evaluating workflow
- 31. Storyboards § Storyboarding meanssketching an actual situation, showing how a user would use your solution (e.g. web, mobile app, product) - where (s)he clicks, what information (s)he enters, what (s)he thinks etc.
- 32. Storyboards Choose an openingscene: § How do customers find out that your solution exists? § Where are they and what are they doing just before they use your product?
- 33. Paper prototyping § Paperprototypes are an excellent choice for early design iterations.
- 34. Paper Prototypes § Paperrepresentations of an interface used to simulate interaction § Good for evaluating general concept, specific workflows, and usability http://felixberger.info/wp- content/uploads/2008/09/br_online_-_prototype.jpg
- 35. Whypaperprototyping? § Faster tobuild § Sketching is faster than programming § Easier to change § No code investment, no tooling– everything will be thrown away (except the design) § Focuses attention on big picture § Designer doesn’t waste time on details § Customer makes more creative suggestions § Only kindergarten skills are required Benefitsof Paper prototyping
- 36. User Testing § UserTesting is a method of soliciting feedback § You display whatever lo-fi prototype(s) you have developed for your product to a small group of peers § They share their immediate reactions to your ideas and weigh in on whatever open questions you have identified
- 37.
- 38. § Introduction § Givea general idea of what the user is going to do § DO NOT give an overall guide to the application § It is important to instruct the user to“Think out loud” § You may need to gently remind them of this during the session § Start with an easy task or two to put the user at ease § If the user sees something unexpected then ask what they did expect § Try making an on-the-fly design change Howto run a User Testing session
- 39. HowtoGetthe Mostfroma UserTesting § Be clearabout what sort of feedback you’re looking for § Overall idea? § Specific workflows or interactions? § Usability? § Technical feasibility? § Graphic design? § Answer questions and correct misconceptions, but do not argue in favor of your design § Show alternative designs if possible
- 40. HowtoGivea GoodCritique § If theyask for help § Do not give it to them. The idea is to see if the program design makes sense to them. § Let them make mistakes.This gives your design team places to consider changes. § If they get completely lost then help them get back on track. § Follow-up on problems and design ideas § Ask about recommendations
- 41. HowtoGivea GoodCritique § Hold adesign team post mortem meeting § Discuss the areas that the user seemed to have problems with or made suggestion about § Consider design alternatives § Iterative Refinement § Make design changes or changes to the scenarios before next session
- 42. Fail Fast, FailOften Fail early,Try again
- 43. § Once youhave developed a lo-fi prototype and solicited feedback on it through peer critique and user testing: § You may wish to create another lo-fi prototype (isn’t iterative design fun?) § Or you may be ready to move on to a hi-fi prototype § Which choice you make will be a function of how much of your original design you feel needs to change Hi-Fi Prototype
- 44. § Rustling upan interactive wireframe might sound like a daunting, time-consuming task. Don’t let it be. § In Marvel app or Justinmind, you can benefit from the pre-built widgets for both iOS and Android as well as the pre-made icons mixed with the drag- and-drop user interface means you don’t need to spend one second designing anything if you don’t want to— it’s all there for you to use. Hi-Fi Prototype
- 45. KEEP IT SIMPLE MinimumViable Product
- 46. The hardest partof design, especially consumer products is keeping features out.
- 47.
- 48.
- 49.
- 50. Minimum Viable Product(MVP) Before starting with product development make sure that the product that you will be building is really the minimum viable product (MVP). This means that you’ll have to answer “yes” to each statement below.
- 51.