Prototyping for web and mobile workshop


Published on

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Test 123
  • 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
    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
    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
    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
    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 UX Pin MockFlow InvisionApp Solidify Proty Easel And many more…
    33. 33. Creating interactive prototypes using Fluid UI
    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: 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
    42. 42. Magitest App Mobile user testing (currently iOS only)
    43. 43. Further Reading Online Resources: 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