Prototyping is essential to designing memorable mobile user experiences, but can often be overlooked at the beginning of building a product. Learn the types of prototypes, tools, and best practices for mobile product design (including overview of mobile flow and UI best practices, patterns, and frameworks).
7. INSERT CHAPTER TITLEWHY PROTOTYPE? !7
‣ Communicate functionality
‣ Test ideas
‣ Refine ideas
‣ Refine user interfaces (screen and flow)
‣ Test usability
8. INSERT CHAPTER TITLEWHY PROTOTYPE FOR MOBILE? !8
‣ Flow is everything (actions span multiple screens)
‣ Animations carry meaning
‣ More expensive to code
‣ Harder to correct issues after the fact (App Store)
‣ It’s easy!
11. INSERT CHAPTER TITLE
STORYBOARDS
Good for:
‣ Getting started
‣ Product/process flows
‣ Covering touchpoints
‣ Product-market fit
Pros:
‣ Fast
‣ Cheap
‣ Easy
‣ Disposable
Cons:
‣ None
12. INSERT CHAPTER TITLE
PAPER PROTOTYPES
Good for:
‣ Brainstorming UIs
‣ Proofs of concept
‣ Quick user feedback
!
Pros:
‣ Fast
‣ Cheap
‣ Easy
‣ Disposable
Cons:
‣ Can’t work out details
‣ Can’t share remotely
‣ Difficult to update
13. INSERT CHAPTER TITLEPRINTOUTS (WIREFRAMES OR MOCKUPS)
Good for:
‣ UI consistency
‣ Screen flow
‣ User feedback
Pros:
‣ Detailed
‣ Faster than code
‣ Cheaper than code
Cons:
‣ Slower than sketching
‣ Rabbit hole
‣ Precious
15. INSERT CHAPTER TITLE !15
Good for:
‣ UI consistency
‣ Screen flow
‣ User feedback
Pros:
‣ Detailed
‣ Faster than code
‣ Cheaper than code
Cons:
‣ Miss UI and flow issues
uncovered with
printouts
SWIPEABLE PHOTO GALLERY
16. INSERT CHAPTER TITLECLICKABLE TAPPABLE PROTOTYPE
Good for:
‣ UI consistency
‣ Screen flow
‣ User feedback
‣ Proof of concept
‣ Living spec
Pros:
‣ Fast
‣ Cheap
‣ Easy
‣ Highly shareable
!
Cons:
‣ Slower than paper
‣ Precious-ish
17. INSERT CHAPTER TITLECONCIERGE !17
Good for:
‣ Proof of concept
‣ Product market fit
‣ User feedback
Pros:
‣ Fast
‣ Cheap
‣ Easy
Cons:
‣ Requires patience from
those who want to
jump into code
18. INSERT CHAPTER TITLE
STATIC HTML, RESPONSIVE
Good for:
‣ Troubleshooting
scalability issues
!
Pros:
‣ See what the user sees
!
Cons:
‣ Slow
19. INSERT CHAPTER TITLECODE + BACKEND !19
Good for:
‣ Proof of concept
‣ Troubleshooting
‣ Screen flow
‣ User feedback
‣ Living spec
Pros:
‣ Fast-ish
‣ Cheap-ish
‣ Easy-ish
!
!
Cons:
‣ Extra step
‣ Slow-ish
‣ Expensive-ish
‣ Difficult-ish
50. Why?
‣ Increased new user engagement by 80%
‣ Increased new user conversion to premium by 1000%
!
—> We wanted to make sure this was not just usable, but desirable
and delightful
51. Why prototype mobile first?
‣ Clarity and focus
‣ Limit feature creep
‣ Test in the wild
‣ Success is scalable
63. INSERT CHAPTER TITLE
Tool
Barrier to
Entry
Cost Time Devices Transitions Shareability
Code High Free High All Yes Remote
Axure Medium $289 Medium All Yes Remote
Keynotopia Medium $99 Low All No Remote
Flinto Low $8/mo Lower iPhone Yes Remote
POP App Lower Free Lower
iPhone
Android
Yes Remote
Photo Album Lower Free Lower iOS
Android
Sort of In-person
Paper Lowest Free Lowest All Yes In-person
PROTOTYPING TOOLS !63
65. INSERT CHAPTER TITLEEXERCISE: PAPER PROTOTYPE !65
‣ Break up into pairs.
‣ Create a paper prototype for a mobile photo-sharing tool.
‣ Invent your own photo app or prototype the iPhone camera app, Instagram,
Flickr, or an app of your choice.
‣ Combine two teams.
‣ Test your prototype on your new teammates.
‣ Make any modifications or revisions.
‣ Test your prototype one more time.
‣ Tools: index cards, Sharpies.
67. INSERT CHAPTER TITLEEXERCISE: SWIPEABLE AND TAPPABLE
PROTOTYPES
!67
‣ Split up into pairs (same as before)
‣ Photograph key screens from your paper prototype in order
‣ Swipe through your flows in the photo gallery app
!
‣ Go to iTunes App Store on your phone
‣ Search for “pop app”
‣ Download POP app
‣ Play along
‣ Stitch your key screens together using POP app
68. ADDITIONAL RESOURCES
‣ Mobile Frontier, Rachel Hinman
‣ (Rosenfeld Media, promo code: LICHAW)
‣ Tapworthy, Josh Clark
‣ Mobile First, Luke Wroblewski
‣ Responsive Design, Ethan Marcotte