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).

1. !1
MOBILE
PROTOTYPING
DONNA LICHAW
@DLICHAW
GREATNORTHELECTRIC.COM

2. 2
@dlichaw

3. 3

4. WHY PROTOTYPE?
!4

5. KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
WHY PROTOTYPE?
Bill Buxton, Sketching User Experiences
Design
“Branching Exploration”
v
Prototyping
“Incremental iterative refinement”

6. KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
WHY PROTOTYPE?
Bill Buxton, Sketching User Experiences
Design
“Getting the right design”
v
Prototyping
“Getting the design right”

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!

10. TYPES OF
PROTOTYPES
!10

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

14. INSERT CHAPTER TITLE
SWIPEABLE PHOTO GALLERY (SKETCHES)

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

20. MOBILE UI
PATTERNS
!20

21. IOS UI ELEMENTS

22. IOS UI ELEMENTS (CONT.)
Tables

23. IOS UI ELEMENTS (CONT.)

24. IOS VIEWS

25. TEMPORARY VIEWS

26. GESTURES

27. GESTURES (CONT.)

28. IOS ELEMENTS

29. ‣ http://pttrns.com
‣ http://www.mobile-patterns.com/
‣ http://inspired-ui.com/
MOBILE UI PATTERN GALLERIES

30. DESIGN
PRINCIPLES
!30

31. DESIGN PRINCIPLES
‣ Easier to scale up UIs than to scale down
‣ Provide continuity across devices and touchpoints

32. ‣ Focus on content over navigation
‣ Focus on primary tasks (1 per screen)
DESIGN PRINCIPLES

33. ‣ Provide clarity and focus
‣ You need to know what matters most
i.e. You need to really know your customers and your business
DESIGN PRINCIPLES

34. DESIGN PRINCIPLES

35. ‣ Auto-save
‣ Multi-tasking
‣ Let users pick up where they left off
‣ Same device
‣ Other devices
Other touch points
DESIGN PRINCIPLES

36. ‣ GPS - location
‣ Compass - direction
‣ Gyroscope - movement, acceleration
‣ Device (address book, phone, SMS, calendar integration)
‣ Input - Audio, video, image
‣ Bluetooth, RFID - connectivity and “Near Field Communication”
‣ Light sensors - environmental awareness
‣ Touch - gestures, direct manipulation (NUI)
DESIGN PRINCIPLES

37. ‣ GPS - location
‣ Compass - direction
‣ Gyroscope - movement, acceleration
‣ Device (address book, phone, SMS, calendar integration)
‣ Input - Audio, video, image
‣ Bluetooth, RFID - connectivity and “Near Field Communication”
‣ Light sensors - environmental awareness
‣ Touch - gestures, direct manipulation (NUI)
!
!
!
}
REIMAGINE
WHAT’S
POSSIBLE
DESIGN PRINCIPLES

38. CASE STUDIES
!38

39. LOW TO HIGH FIDELITY

40. INSERT CHAPTER TITLEHEY, WE HAVE AN IDEA! (SKETCH)

41. INSERT CHAPTER TITLE

42. INSERT CHAPTER TITLE

43. INSERT CHAPTER TITLE !43
BUT CAN IT TECHNICALLY WORK??

44. INSERT CHAPTER TITLEIS IT USEFUL? HELPFUL? DESIRABLE? !44

45. BUT, WAIT...THERE’S MORE

46. INSERT CHAPTER TITLEDOES IT LOOK GOOD? CONSISTENT UI? !46

47. INSERT CHAPTER TITLE
CAN IT WORK ON EVERY SCREEN ON THE
PLANET???

48. ...AND MORE

49. INSERT CHAPTER TITLEPROTOTYPING THE APP STORE SCREENFLOW

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

52. RAPID ITERATIVE PROTOTYPING IN THE WILD

53. INSERT CHAPTER TITLE

54. PROTOTYPING
TOOLS
!54

55. FLINTO

57. DEMO: POP APP

58. POP

59. POP

60. POP

61. PAPER

62. INSERT CHAPTER TITLE

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

64. EXERCISE: PAPER
PROTOTYPING
!64

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.

66. EXERCISE: SWIPEABLE
AND TAPPABLE
PROTOTYPES WITH
PHOTO GALLERY AND
POP APP
!66

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

69. THANK YOU.
DONNA LICHAW
@DLICHAW
GREATNORTHELECTRIC.COM