Hands on workshop:
prototyping for web
and mobile
Simon Phillips @uxfellow
What we will be covering
1. Introduction to prototyping
2. What goes into a design?
3. Hands on Prototyping exercises

4. ...
Why should you care?
Avoid this!
Test ideas early
“Prototyping is an effective way
of testing and validating
proposed functionality and
designs prior to in...
The Lean Startup model
The Lean UX approach

Make

Think

Check
The Lean UX approach
User Research

User flows

Contextual
Enquiry

Rapid Sketching

Competitor
analysis

Think

Make

Pap...
The UX Sweet Spot

User
Needs

The
Sweet
Spot!

Business
Needs
Tools of the trade
Sketching
Omnigraffle
Axure
What goes into a design?
Define BEFORE you Design
1. User Research

2. Content Strategy
3. Personas
4. Information Architecture

5. User Flows
1. User Research
• User research can be quick and dirty, or
detailed and exhaustive
• Talk to your customers, contextual
e...
2. Content Strategy
• Start with the content first!
• Allow your content to drive the structure of
your website or app
– N...
3. Proto Personas
Start with proto personas
that Capture basic
Assumptions
Our best guess
as to who is using
(or will use)...
4. Information Architecture
“The art and science of
structuring, organizing
and labeling information
to help people find
a...
5. User Flows
• Map the ideal user journey through your
website or app
• The touch points should ultimately shape
your MVP...
Example User Flow
Design Studio
Recipe App Objectives:
• Customers placing orders for
ingredients online
• Drive traffic by sharing of recipes
via social ...
Recipe App Requirements:
1. Quick and easy way to find a recipe

2. Users can access over 10,000 recipes
3. Promotional ar...
User Flow sketch exercise
•
•
•
•
•

Home screen
Category screen
Recipe detail screen
Shopping list screen
Check out scree...
The 6-8-5 sketch exercise
• Sketch 6 to 8 interface ideas
in 5 minutes
• Keep sketches rough!
• Goal is to collaborate eff...
Fold A4 paper 3 times
NOTE: If you can draw these you
can sketch any interface!
Critiquing designs with
your team
• Present your ideas with your team
• Talk about which ideas best address the
objectives...
Round 2
• 4 more interface sketches in 5 minutes
• Slightly more refined than before
• Review sketches with your team
Creating Interactive Prototypes
Online Tools

Fluid UI

HotGloo

Balsamiq

Proto.io

UX Pin

MockFlow

InvisionApp

Solidify

Proty

Easel

And many more…
Creating interactive
prototypes using Fluid UI
Fluidui.com
User testing
User Testing
Very easy read
Fantastic guide on
Guerrilla usability
Testing
Provides materials
that you could test
with tom...
Steve Krug Test Script
Usability test script
available for download:

http://www.sensible.co
m/downloads/testscript.doc
1. Test early

“Always test earlier than you
think you should”
Steer your thinking from real
world feedback
2. Test often

“One morning per month”
Keep testing quick, easy and
manageable
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 i...
4. Make small fixes
“When fixing an issue do the
least you can do”
Small tweaks can often make the most
impact
Silverback App

www.silverbackapp.com
Magitest App

Mobile user testing
(currently iOS only)
www.magitest.com
Further Reading
Online Resources:
uxapprentice.com
uxdesign.smashingmagazine.com
boxesandarrows.com
uxmatters.com

Recomme...
Thank you!
Simon Phillips

@uxfellow
Prototyping for web and mobile workshop
Upcoming SlideShare
Loading in...5
×

Prototyping for web and mobile workshop

260

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
260
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
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 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×