Mais conteúdo relacionado

Apresentações para você(20)

Similar a APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping(20)


Mais de European Innovation Academy(20)


APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping

  1. DESIGN HACKS!! Zahra Tashakorinia | APIA July 2018
  2. Hi, I AM ZAHRA.
  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 In 2007, 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-use are far more important when doing computing on a tiny screen.
  6. JourneyThroughPrototypes
  7. Whatisa prototype? § Anything tangible that 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 are many 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. BUILDTOTHINK Build to think
  10. 3 Stages of Prototyping
  11. DesignProcess Institute of Design 08.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 feedback earlier, 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.
  15. TidyTilt wasbornoffof prototyping! IIT Student Project > TT Design L abs,
  16. TidyTilt wasbornoffof prototyping!
  17. TidyTilt wasbornoffof prototyping!
  18. TidyTilt wasbornoffof prototyping! Designed as a school 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.
  20. InPractice
  21. Build it yourself Low 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 are your 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 can be 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. CrazyEights
  26. Brainstorming: IDEORules § One conversation at a time § Stay focused § Encourage wild ideas § Defer judgment § Build on ideas from other brainstormers
  27. ValuingIdeas § Define the importance 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 that you’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 representations of an interface’s intended layout, typically without its actual content § Good for evaluating content placement
  30. Storyboards § Inspired by storyboards 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 means sketching 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 opening scene: § 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 § Paper prototypes are an excellent choice for early design iterations.
  34. Paper Prototypes § Paper representations of an interface used to simulate interaction § Good for evaluating general concept, specific workflows, and usability content/uploads/2008/09/br_online_-_prototype.jpg
  35. Whypaperprototyping? § Faster to build § 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 § User Testing 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. User Testing
  38. § Introduction § Give a 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 clear about 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 they ask 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 a design 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, Fail Often Fail early,Try again
  43. § Once you have 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 up an 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 Minimum Viable Product
  46. The hardest part of design, especially consumer products is keeping features out.
  47. § Simplicity,isinitselfaproduct differentiator,andpursuingit canleadtoinnovation.” –DonNorman
  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. Design Thinking!