Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing the mobile experience

1,350 views

Published on

In this presentation Joseph Dickerson, UX Architect for Fortune 500 Company Fiserv, discusses best practices in UX design for mobile with some practical examples and approaches. Topics covered:

- How to do mobile ethnographic research, to understand mobile personas and usage patterns
- Designing for the "immediacy of now", "ego-centric design" and for context of use
- Designing for device constraints
- Mobile usability testing and documentation

Published in: Technology, Business
  • Be the first to comment

Designing the mobile experience

  1. 1. Designing the Mobile Experience Joseph Dickerson
  2. 2. Agenda
  3. 3. Agenda✤ Foundations
  4. 4. Agenda✤ Foundations✤ User-Centered Design
  5. 5. Agenda✤ Foundations✤ User-Centered Design ✤ Case study
  6. 6. Agenda✤ Foundations✤ User-Centered Design ✤ Case study✤ The Design Process
  7. 7. Agenda✤ Foundations✤ User-Centered Design ✤ Case study✤ The Design Process✤ Usability testing
  8. 8. Agenda✤ Foundations✤ User-Centered Design ✤ Case study✤ The Design Process✤ Usability testing✤ Some things to keep in mind...
  9. 9. Agenda✤ Foundations✤ User-Centered Design ✤ Case study✤ The Design Process✤ Usability testing✤ Some things to keep in mind...✤ Final Thoughts/Q&A
  10. 10. About me✤ My names 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 Westpacs online and mobile presence
  11. 11. Foundations
  12. 12. Foundations✤ First, know what you are designing
  13. 13. Foundations✤ First, know what you are designing ✤ What are your business drivers?
  14. 14. Foundations✤ First, know what you are designing ✤ What are your business drivers? ✤ Who are your customers?
  15. 15. Foundations✤ First, know what you are designing ✤ What are your business drivers? ✤ Who are your customers? ✤ What are you trying to do?
  16. 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. 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. 18. User-centered design
  19. 19. User-centered design✤ Second, know your users
  20. 20. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices
  21. 21. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices✤ How?
  22. 22. User-centered design✤ Second, know your users ✤ Know what is important to them, how they use their devices✤ How? ✤ User Interviews
  23. 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. 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. 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. 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. 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. 28. Case study
  29. 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
  30. 30. The design process
  31. 31. The design process✤ Sketch
  32. 32. The design process✤ Sketch✤ Test
  33. 33. The design process✤ Sketch✤ Test✤ Revise
  34. 34. The design process✤ Sketch✤ Test✤ Revise✤ Iterate
  35. 35. The design process✤ Sketch✤ Test✤ Revise✤ Iterate✤ Try and Fail, successfully.
  36. 36. Design tools
  37. 37. Design tools✤ Paper
  38. 38. Design tools✤ Paper✤ Visio/Omnigraffle
  39. 39. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote
  40. 40. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote✤ Photoshop/Axure RP
  41. 41. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote✤ Photoshop/Axure RP✤ Code
  42. 42. 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
  43. 43. Usability Testing - Methods
  44. 44. Usability Testing - Methods✤ Test your design!
  45. 45. Usability Testing - Methods✤ Test your design!✤ Test Methods
  46. 46. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype
  47. 47. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype ✤ Test on computer, using Keynote/powerpoint/Axure
  48. 48. 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)
  49. 49. 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
  50. 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) ✤ Test on device - compiled code ✤ Works great if you are using an agile process
  51. 51. Usability Testing - Tools
  52. 52. Usability Testing - Tools✤ Silverback (for Mac) ✤ Captures the screen and the webcam video
  53. 53. 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
  54. 54. 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
  55. 55. Some things to keep in mind..
  56. 56. 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
  57. 57. “Experience Sensitivity”
  58. 58. “Experience Sensitivity”✤ Users are slow to praise, but quick to complain... and they’ll do it publicly ✤ Twitter ✤ Facebook ✤ Etc.
  59. 59. “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”
  60. 60. The baseline has shifted... “History don’t repeat, but it sure does rhyme.”
  61. 61. Design for the“Immediacy of Now”
  62. 62. Design for the“Immediacy of Now”✤ The Immediacy of Now: The need for users to quickly accomplish an urgent task.
  63. 63. 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
  64. 64. 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
  65. 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✤ 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?
  66. 66. “Ego-driven design”
  67. 67. “Ego-driven design”✤ Many mobile and web apps appeal to user’s sense of self-importance, and self-worth ✤ Twitter ✤ Quora ✤ Instagram
  68. 68. “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
  69. 69. On design documentation
  70. 70. 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
  71. 71. 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
  72. 72. In closing...
  73. 73. In closing...✤ “Great artists ship”
  74. 74. In closing...✤ “Great artists ship” ✤ ... but they don’t ship before they’re done.
  75. 75. In closing...✤ “Great artists ship” ✤ ... but they don’t ship before they’re done.✤ Example: the Color app
  76. 76. The future is not whatit used to be... 23rd Century 21st Century
  77. 77. Thank You!✤ http://www.josephdickerson.com✤ Twitter: Josephdickerson ✤ ...or you can just Google me...

×