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.
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
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?
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.
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
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
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
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
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
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.”
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?
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
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