This document outlines Joseph Dickerson's presentation on designing the mobile experience. The agenda includes discussing foundations of mobile design, user-centered design through case studies, the design process, usability testing, considerations, and a Q&A. Dickerson describes his background and discusses starting by understanding business needs and customers. He emphasizes the importance of user research methods like interviews to understand users. The design process involves sketching, testing, revising, and iterating designs. Usability testing on prototypes is recommended. Some considerations include platform constraints and the "immediacy of now" where mobile usage is urgent. Dickerson closes by emphasizing shipping designs and examples like the popular Color app.

1. Designing the Mobile Experience
Joseph Dickerson

2. Agenda

3. Agenda
✤ Foundations

4. Agenda
✤ Foundations
✤ User-Centered Design

5. Agenda
✤ Foundations
✤ User-Centered Design
✤ Case study

6. Agenda
✤ Foundations
✤ User-Centered Design
✤ Case study
✤ The Design Process

7. Agenda
✤ Foundations
✤ User-Centered Design
✤ Case study
✤ The Design Process
✤ Usability testing

8. Agenda
✤ Foundations
✤ User-Centered Design
✤ Case study
✤ The Design Process
✤ Usability testing
✤ Some things to keep in mind...

9. Agenda
✤ Foundations
✤ User-Centered Design
✤ Case study
✤ The Design Process
✤ Usability testing
✤ Some things to keep in mind...
✤ Final Thoughts/Q&A

10. About me
✤ My name's Joe Dickerson
✤ User Experience Architect, Fiserv
✤ International and Fortune 500 financial services company based out of
the US
✤ Member of Fiserv’ Innovation and Experimentation Team
✤ 10+ years doing user-centered design and research
✤ In Australia working on the redesign of Westpac's online and mobile
presence

11. Foundations

12. Foundations
✤ First, know what you are designing

13. Foundations
✤ First, know what you are designing
✤ What are your business drivers?

14. Foundations
✤ First, know what you are designing
✤ What are your business drivers?
✤ Who are your customers?

15. Foundations
✤ First, know what you are designing
✤ What are your business drivers?
✤ Who are your customers?
✤ What are you trying to do?

16. Foundations
✤ First, know what you are designing
✤ What are your business drivers?
✤ Who are your customers?
✤ What are you trying to do?
✤ What is your “Vision”?

17. Foundations
✤ First, know what you are designing
✤ What are your business drivers?
✤ Who are your customers?
✤ What are you trying to do?
✤ What is your “Vision”?
✤ If you don’t know what you are doing, then how can you make sure
you’ve designed it right?

18. User-centered design

19. User-centered design
✤ Second, know your users

20. User-centered design
✤ Second, know your users
✤ Know what is important to them, how they use their devices

21. User-centered design
✤ Second, know your users
✤ Know what is important to them, how they use their devices
✤ How?

22. User-centered design
✤ Second, know your users
✤ Know what is important to them, how they use their devices
✤ How?
✤ User Interviews

23. User-centered design
✤ Second, know your users
✤ Know what is important to them, how they use their devices
✤ How?
✤ User Interviews
✤ Collaborative design “sketchstorms”

24. User-centered design
✤ Second, know your users
✤ Know what is important to them, how they use their devices
✤ How?
✤ User Interviews
✤ Collaborative design “sketchstorms”
✤ Observational research (Ethnographic study)

25. User-centered design
✤ Second, know your users
✤ Know what is important to them, how they use their devices
✤ How?
✤ User Interviews
✤ Collaborative design “sketchstorms”
✤ Observational research (Ethnographic study)
✤ Be open-minded, listen, and be prepared to be surprised...

26. User-centered design
✤ A comment from one of our interview
subjects during a research project:
✤ “I love my phone, it does everything I
need it to do. I could not think about
using another one. It’s perfect for me.”
✤ Talking about a smart phone, or the iPhone?
✤ …No.

27. User-centered design
✤ A comment from one of our interview
subjects during a research project:
✤ “I love my phone, it does everything I
need it to do. I could not think about
using another one. It’s perfect for me.”
✤ Talking about a smart phone, or the iPhone?
✤ …No.

28. Case study

29. Mobile Diary Study
✤ Interviewed 30 individuals in 4 different states
✤ 20 of these interview subjects documented their mobile usage over a week
✤ Over a week we cataloged and analysed the results
✤ Identified usage patterns
✤ Created representative personas
✤ Used all of this as a reference and an input into our design

32. The design process

33. The design process
✤ Sketch

34. The design process
✤ Sketch
✤ Test

35. The design process
✤ Sketch
✤ Test
✤ Revise

36. The design process
✤ Sketch
✤ Test
✤ Revise
✤ Iterate

37. The design process
✤ Sketch
✤ Test
✤ Revise
✤ Iterate
✤ Try and Fail, successfully.

38. Design tools

39. Design tools
✤ Paper

40. Design tools
✤ Paper
✤ Visio/Omnigraffle

41. Design tools
✤ Paper
✤ Visio/Omnigraffle
✤ Powerpoint/Keynote

42. Design tools
✤ Paper
✤ Visio/Omnigraffle
✤ Powerpoint/Keynote
✤ Photoshop/Axure RP

43. Design tools
✤ Paper
✤ Visio/Omnigraffle
✤ Powerpoint/Keynote
✤ Photoshop/Axure RP
✤ Code

44. Design tools
✤ Paper
✤ Visio/Omnigraffle
✤ Powerpoint/Keynote
✤ Photoshop/Axure RP
✤ Code
✤ Whatever tool works best for you - there is no magic bullet that makes your
designs better

45. Usability Testing - Methods

46. Usability Testing - Methods
✤ Test your design!

47. Usability Testing - Methods
✤ Test your design!
✤ Test Methods

48. Usability Testing - Methods
✤ Test your design!
✤ Test Methods
✤ Test on paper with a paper prototype

49. Usability Testing - Methods
✤ Test your design!
✤ Test Methods
✤ Test on paper with a paper prototype
✤ Test on computer, using Keynote/powerpoint/Axure

50. Usability Testing - Methods
✤ Test your design!
✤ Test Methods
✤ Test on paper with a paper prototype
✤ Test on computer, using Keynote/powerpoint/Axure
✤ Test on device - mockup/prototype (use camera roll)

51. Usability Testing - Methods
✤ Test your design!
✤ Test Methods
✤ Test on paper with a paper prototype
✤ Test on computer, using Keynote/powerpoint/Axure
✤ Test on device - mockup/prototype (use camera roll)
✤ Test on device - compiled code

52. Usability Testing - Methods
✤ Test your design!
✤ Test Methods
✤ Test on paper with a paper prototype
✤ Test on computer, using Keynote/powerpoint/Axure
✤ Test on device - mockup/prototype (use camera roll)
✤ Test on device - compiled code
✤ Works great if you are using an agile process

53. Usability Testing - Tools

54. Usability Testing - Tools
✤ Silverback (for Mac)
✤ Captures the screen and the webcam video

55. Usability Testing - Tools
✤ Silverback (for Mac)
✤ Captures the screen and the webcam video
✤ Morae (for PC)
✤ Great for devise testing
✤ You can use a web or video camera to capture the device

56. Usability Testing - Tools
✤ Silverback (for Mac)
✤ Captures the screen and the webcam video
✤ Morae (for PC)
✤ Great for devise testing
✤ You can use a web or video camera to capture the device
✤ Blueprint for the iPad
✤ Lets you create clickable prototypes that can "run" on the device

57. Some things to keep in mind..

58. Platforms
✤ There’s three major platforms, and a multitude of devices
✤ Should you target one platform, or many? App or Web?
✤ Focus on your customers and where they are - and let that drive your
decision
✤ Design knowing the constraints - and the usability issues - of the platform

59. “Experience Sensitivity”

60. “Experience Sensitivity”
✤ Users are slow to praise, but quick to complain... and they’ll do it publicly
✤ Twitter
✤ Facebook
✤ Etc.

61. “Experience Sensitivity”
✤ Users are slow to praise, but quick to complain... and they’ll do it publicly
✤ Twitter
✤ Facebook
✤ Etc.
✤ Expectations matter
✤ The “baseline” has shifted, and continues to do so
✤ Users are less patient - and they expect a responsive app that “just
works”

62. The baseline has shifted...
“History don’t repeat, but it sure does rhyme.”

63. Design for the
“Immediacy of Now”

64. Design for the
“Immediacy of Now”
✤ The Immediacy of Now: The need for users to quickly accomplish an
urgent task.

65. Design for the
“Immediacy of Now”
✤ The Immediacy of Now: The need for users to quickly accomplish an
urgent task.
✤ Mobile usage is often urgent and focused
✤ Understand and support this mode
✤ Context matters

66. Design for the
“Immediacy of Now”
✤ The Immediacy of Now: The need for users to quickly accomplish an
urgent task.
✤ Mobile usage is often urgent and focused
✤ Understand and support this mode
✤ Context matters
✤ Design to support the user’s core need, and don’t add superfluous
functionality that distracts from this core

67. Design for the
“Immediacy of Now”
✤ The Immediacy of Now: The need for users to quickly accomplish an
urgent task.
✤ Mobile usage is often urgent and focused
✤ Understand and support this mode
✤ Context matters
✤ Design to support the user’s core need, and don’t add superfluous
functionality that distracts from this core
✤ If you don’t know what that core need you’re servicing is, then what are
you creating?

68. “Ego-driven design”

69. “Ego-driven design”
✤ Many mobile and web apps appeal to user’s sense of self-importance, and
self-worth
✤ Twitter
✤ Quora
✤ Instagram

70. “Ego-driven design”
✤ Many mobile and web apps appeal to user’s sense of self-importance, and
self-worth
✤ Twitter
✤ Quora
✤ Instagram
✤ This is a huge opportunity to tap into
✤ Make the app you are designing personal

71. On design documentation

72. On design documentation
✤ Focus on designing the optimal experience - not on documentation
✤ Document as much as you need to, and no more
✤ Use whatever tool allows you to be most efficient at documenting your
design

73. On design documentation
✤ Focus on designing the optimal experience - not on documentation
✤ Document as much as you need to, and no more
✤ Use whatever tool allows you to be most efficient at documenting your
design
✤ Great article: Lean UX: Getting Out of the Deliverables Business
✤ http://tinyurl.com/3dctgls

74. In closing...

75. In closing...
✤ “Great artists ship”

76. In closing...
✤ “Great artists ship”
✤ ... but they don’t ship before they’re
done.

77. In closing...
✤ “Great artists ship”
✤ ... but they don’t ship before they’re
done.
✤ Example: the Color app

78. The future is not what
it used to be...
23rd Century 21st Century

79. Thank You!
✤ http://www.josephdickerson.com
✤ Twitter: Josephdickerson
✤ ...or you can just Google me...