Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototyping for web and mobile workshop

  • Be the first to comment

Prototyping for web and mobile workshop

  1. 1. Hands on workshop: prototyping for web and mobile Simon Phillips @uxfellow
  2. 2. What we will be covering 1. Introduction to prototyping 2. What goes into a design? 3. Hands on Prototyping exercises 4. Testing and Validation
  3. 3. Why should you care?
  4. 4. Avoid this!
  5. 5. Test ideas early “Prototyping is an effective way of testing and validating proposed functionality and designs prior to investing in development.” - Jonathan Knoll & Russ Unger
  6. 6. The Lean Startup model
  7. 7. The Lean UX approach Make Think Check
  8. 8. The Lean UX approach User Research User flows Contextual Enquiry Rapid Sketching Competitor analysis Think Make Paper Prototyping Wireframes Card sorting Landing page Information Architecture Personas User Journeys Check User testing Google Analytics Heuristic Evaluation Surveys
  9. 9. The UX Sweet Spot User Needs The Sweet Spot! Business Needs
  10. 10. Tools of the trade
  11. 11. Sketching
  12. 12. Omnigraffle
  13. 13. Axure
  14. 14. What goes into a design?
  15. 15. Define BEFORE you Design 1. User Research 2. Content Strategy 3. Personas 4. Information Architecture 5. User Flows
  16. 16. 1. User Research • User research can be quick and dirty, or detailed and exhaustive • Talk to your customers, contextual enquiry, design research, stakeholder interviews etc • Gather Requirements - define what the site or application needs to do e.g. “Orders can be tracked by entering a tracking code online”
  17. 17. 2. Content Strategy • Start with the content first! • Allow your content to drive the structure of your website or app – Not the other way around! • Collect your content into a spreadsheet and create a plan for ongoing updates and maintenance. Kristina Halvorson http://www.contentstrategy.com
  18. 18. 3. Proto Personas Start with proto personas that Capture basic Assumptions Our best guess as to who is using (or will use) our product and why. Evolve the persona based on real user data Lean UX by Jeff Gothelf and Josh Seiden
  19. 19. 4. Information Architecture “The art and science of structuring, organizing and labeling information to help people find and manage it.” Louis Rosenfeld louisrosenfeld.com
  20. 20. 5. User Flows • Map the ideal user journey through your website or app • The touch points should ultimately shape your MVP • Design in flows rather than screens uxdesign.smashingmagazine.com/2012/01/04/stopdesigning-pages-start-designing-flows/
  21. 21. Example User Flow
  22. 22. Design Studio
  23. 23. Recipe App Objectives: • Customers placing orders for ingredients online • Drive traffic by sharing of recipes via social media • User generated recipes
  24. 24. Recipe App Requirements: 1. Quick and easy way to find a recipe 2. Users can access over 10,000 recipes 3. Promotional area for featured recipes 4. Users can contribute their own recipes 5. Users can share recipes 6. Users can add ingredients to a “Shopping list”
  25. 25. User Flow sketch exercise • • • • • Home screen Category screen Recipe detail screen Shopping list screen Check out screen • • • • Search function Social media integration Filter recipes by type Ratings reviews function
  26. 26. The 6-8-5 sketch exercise • Sketch 6 to 8 interface ideas in 5 minutes • Keep sketches rough! • Goal is to collaborate effectively across design and development teams http://www.slideshare.net/runger/big-d-sketchingkey
  27. 27. Fold A4 paper 3 times
  28. 28. NOTE: If you can draw these you can sketch any interface!
  29. 29. Critiquing designs with your team • Present your ideas with your team • Talk about which ideas best address the objectives • Identify features that work the best
  30. 30. Round 2 • 4 more interface sketches in 5 minutes • Slightly more refined than before • Review sketches with your team
  31. 31. Creating Interactive Prototypes
  32. 32. Online Tools Fluid UI HotGloo Balsamiq Proto.io UX Pin MockFlow InvisionApp Solidify Proty Easel And many more…
  33. 33. Creating interactive prototypes using Fluid UI Fluidui.com
  34. 34. User testing
  35. 35. User Testing Very easy read Fantastic guide on Guerrilla usability Testing Provides materials that you could test with tomorrow
  36. 36. Steve Krug Test Script Usability test script available for download: http://www.sensible.co m/downloads/testscript.doc
  37. 37. 1. Test early “Always test earlier than you think you should” Steer your thinking from real world feedback
  38. 38. 2. Test often “One morning per month” Keep testing quick, easy and manageable
  39. 39. 3. Small test groups “3 test candidates is a good start” 80% of issues will be revealed in 3 tests or more. 5 people is ideal
  40. 40. 4. Make small fixes “When fixing an issue do the least you can do” Small tweaks can often make the most impact
  41. 41. Silverback App www.silverbackapp.com
  42. 42. Magitest App Mobile user testing (currently iOS only) www.magitest.com
  43. 43. Further Reading Online Resources: uxapprentice.com uxdesign.smashingmagazine.com boxesandarrows.com uxmatters.com Recommended Reading: Lean UX by Jeff Gothelf and Josh Seiden Simple and Usable by Giles Colborne Any book by Steve Krug
  44. 44. Thank you! Simon Phillips @uxfellow

×