Your SlideShare is downloading. ×
0
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Designing the mobile experience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing the mobile experience

918

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: …

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
918
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 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 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. 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
    • 30. The design process
    • 31. The design process✤ Sketch
    • 32. The design process✤ Sketch✤ Test
    • 33. The design process✤ Sketch✤ Test✤ Revise
    • 34. The design process✤ Sketch✤ Test✤ Revise✤ Iterate
    • 35. The design process✤ Sketch✤ Test✤ Revise✤ Iterate✤ Try and Fail, successfully.
    • 36. Design tools
    • 37. Design tools✤ Paper
    • 38. Design tools✤ Paper✤ Visio/Omnigraffle
    • 39. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote
    • 40. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote✤ Photoshop/Axure RP
    • 41. Design tools✤ Paper✤ Visio/Omnigraffle✤ Powerpoint/Keynote✤ Photoshop/Axure RP✤ Code
    • 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. Usability Testing - Methods
    • 44. Usability Testing - Methods✤ Test your design!
    • 45. Usability Testing - Methods✤ Test your design!✤ Test Methods
    • 46. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype
    • 47. Usability Testing - Methods✤ Test your design!✤ Test Methods ✤ Test on paper with a paper prototype ✤ Test on computer, using Keynote/powerpoint/Axure
    • 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. 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. 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. Usability Testing - Tools
    • 52. Usability Testing - Tools✤ Silverback (for Mac) ✤ Captures the screen and the webcam video
    • 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. 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. Some things to keep in mind..
    • 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. “Experience Sensitivity”
    • 58. “Experience Sensitivity”✤ Users are slow to praise, but quick to complain... and they’ll do it publicly ✤ Twitter ✤ Facebook ✤ Etc.
    • 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. The baseline has shifted... “History don’t repeat, but it sure does rhyme.”
    • 61. Design for the“Immediacy of Now”
    • 62. Design for the“Immediacy of Now”✤ The Immediacy of Now: The need for users to quickly accomplish an urgent task.
    • 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. 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. 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. “Ego-driven design”
    • 67. “Ego-driven design”✤ Many mobile and web apps appeal to user’s sense of self-importance, and self-worth ✤ Twitter ✤ Quora ✤ Instagram
    • 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. On design documentation
    • 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. 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. In closing...
    • 73. In closing...✤ “Great artists ship”
    • 74. In closing...✤ “Great artists ship” ✤ ... but they don’t ship before they’re done.
    • 75. In closing...✤ “Great artists ship” ✤ ... but they don’t ship before they’re done.✤ Example: the Color app
    • 76. The future is not whatit used to be... 23rd Century 21st Century
    • 77. Thank You!✤ http://www.josephdickerson.com✤ Twitter: Josephdickerson ✤ ...or you can just Google me...

    ×