An all-day Mobile Strategy Seminar presented to the Wavefront AC community on August 14, 2012. The presentation goal was to provide an overview of the process to define mobile solutions for companies who have yet to enter into the space. Concepts introduced included:

1. Mobile Strategy
Defining a mobile strategy that works!

2. About OpenRoad
• OpenRoad builds websites, intranets, mobile experiences and web
applications.
• We offer strategy, user experience design, custom development,
and analytics & measurement services.

4. Intro to Selma
• 12 years experience in user experience design
• leads UX team at OpenRoad
• strategy, ui design, user research and evaluation
• mobile experience: 4 years at Nokia
• taughtfor 3 years at Langara College (Human
Factors & Information Design)

5. Topics Covered Today:
• Why Mobile
• Part 1: Defining Mobile Strategy
• Defining your Requirements
• Understanding Context of Use
• Native versus Mobile apps
• Measuring Success

6. Topics Covered Today:
• Part 2: User Experience Design for Mobile
• User’s expectations of digital experiences
• UI Principles for mobile
• Universal Design Challenges
• Mobile Device Considerations
• Part 3: Evaluating your mobile design

7. Why Mobile?

8. What is mobile?

9. How are people using mobile?
insights from webcredible mobile research study (UK, 2012)

10. Wasted time, out & about
“If something pops into my
mind, I will look it up.”
“I don’t want to sit and stare
at people, so i look at my
phone.”

11. Downtime at home
“When I’m at home on the
sofa I never get up to use my
laptop, I use my phone.”
“I browse offers on my
phone & then print them off
from my laptop”

12. Tackle a problem on the go

13. Useful tasks, shorter process

14. Part of a routine
“If I haven’t really used an app
within a month, I delete it.”
“I just counted, I have 183
apps...I only use 10 of them!”

15. Part of a routine

16. http://www.flickr.com/photos/dougcaldwell/4213877479

17. What problem is a mobile
solution going to solve?

18. Going ‘mobile’ is not always to
solution!

19. “Some companies will never get substantial mobile
use and should stick to making their desktop sites
less insufferable on small screens.”
- Jakob Nielsen, 2012

20. Part 1: Defining Your Mobile
Strategy

21. Value Proposition?
Optimized
Save Time?
functionality?
Avoiding Calling in? Customer Value Save Money?
Information when
Less Hassle?
they need it?
Provide a unique
experience?

22. Your mobile strategy
• Design for ‘fat thumbed’ people
• Start with your digital strategy
• Deliver a consistent brand experience

23. Defining Your Requirements
Business & User

24. Customer Business
Requirements Requirements
Business Seducible
Compromise Moments
Exploited
Maximum
Value
Won’t Do Will Do Won’t Do
http://www.openroad.ca/2011/07/21/visualizing-requirements-vs-scope/

25. Defining Business Requirements
• Review & align with company strategic plans
• Interview key stakeholders
• Brainstorming workshops
• Competitive landscape review

26. FUTURE
PRESENT

27. FUTURE
Service
Education
Financial &
Technology
Knowledge,
Innovation,
PRESENT People & Sharing

28. FUTURE
Service
Small Business
Account Management
Education
Fund
Review
Social Marketing
Business Tech
Community Engagement Intelligence Enabling
Serious Injury Prevention the Work
High-risk strategy
Innovation Financial &
Knowledge Technology
Transition
Health, Safety
Wellness & Security Sharing
Employee
Engagement Employee Leadership
in the Community
Knowledge,
Innovation,
PRESENT People & Sharing

29. FUTURE
Service
Small Business
Account Management
Education
Fund
Review
Social Marketing
Business Tech
Community Engagement Intelligence Enabling
Serious Injury Prevention the Work
High-risk strategy
Innovation Financial &
Knowledge Technology
Transition
Health, Safety
Wellness & Security Sharing
Employee
Engagement Employee Leadership
in the Community
Knowledge,
Innovation,
PRESENT People & Sharing

30. Understanding Your Users

32. It would be amazing
if I could...
I need to...
Uncover what people actually do
vs
what they say they will do
I want to...
This one feature
would be killer...

33. UCD Analysis Tools
• Observational research
• One-on-one interviews
• Surveys
Plus:
• Analytics review and analysis

34. Customer Business
Requirements Requirements
Business Seducible
Compromise Moments
Exploited
Maximum
Value
Won’t Do Will Do Won’t Do
http://www.openroad.ca/2011/07/21/visualizing-requirements-vs-scope/

35. Understanding Context Of Use
Defining your Mobile Strategy

36. What is Context of Use?

37. What is Context of Use?
Right thing

38. What is Context of Use?
Right thing
at the right time,

39. What is Context of Use?
Right thing
at the right time,
at the right place,

40. What is Context of Use?
Right thing
at the right time,
at the right place,
for the right person.

41. http://www.giantant.com/antenna/2007/06/design-sketch-the-context-of-m.html

42. Uncovering context of use
• How are your consumers going to access the solution?
• Where are they going to be?
• What are they going to do?
• Why are they going to try and do those things?
• What are they using?

43. Example: Jamie Oliver Recipe
app

44. How Jaimie understood his
users & context of use
• Cooks that like step-by-step instructions are his
biggest audience
• When people are cooking, their hands are messy &
they won’t want to touch the screen to go to the
next step

48. Break

49. Key Performance Indicators

50. What are KPIs?
• “(KPIs) are simply a tool for assessing the impact of a particular
project or activity.
• While these are often numeric in nature (‘improve sales by 20%’)
they can also be qualitative (‘improve staff satisfaction levels’).
• In either case, metrics provide clear and tangible goals for a
project, and criteria for project success.”
-- James Robertson
“Metrics for knowledge management and content management”

51. What are KPIs?
“ Use rates, ratios, percentages and averages instead of raw
numbers
Leverage tachometers and thermometers and stoplights instead
of pie charts and graphs
Provide temporal context and highlight change instead of
presenting tables of data
Drive business-critical action”
-- Eric T Peterson
“The Big Book of Key Performance Indicators”

52. Example KPIs
• Average time to respond to e-mail inquiries
• Sales per visitor
• Average order size
• Percentage of content greater than 90 days old
• Percent new visitors
• Percentage of content rated 3 stars or higher
• Average number of edits prior to publish
• Average time spent on site
• Average cost per acquisition

53. Why KPIs?

54. What gets measured
gets done
Image: http://principle-driven.blogspot.com/2007/04/beyond-minimum.html

55. Benefits of KPIs
They allow:
• Targets to be set
• Success to be assessed
• ROI to be estimated
• Ongoing viability to be tracked
• Focus on our goals and priorities
• A way to hold ourselves accountable
• A foundation for a continuous
improvement process

56. Take aim at SMART objectives
• Specific – Objectives should specify what they want to achieve.
• Measurable – You should be able to measure whether you are
meeting the objectives or not.
• Achievable - Are the objectives you set, achievable and
attainable?
• Realistic – Can you realistically achieve the objectives with the
resources you have?
• Time – When do you want to achieve the set objectives?

57. Part 2: Mobile UI Design

58. User Expectations Of Digital
Experiences

59. Expectations for digital
interactions are set primarily by
desktop interactions

60. Search

61. Online Account Use

62. Navigation

63. Security

64. Defining Your Mobile Tasks
Difference between Desktop & Mobile solutions

65. Design for Simplicity
“Whenever the number of functions and required
operations exceed the number of controls, the
design becomes arbitrary, unnatural and
complicated”
- Donald Norman, 1993

67. Carrier 12:00 PM
Page Title
http://www.domain.com Google

68. Carrier 12:00 PM
Page Title
http://www.domain.com Google

69. Answer the questions:
What does ‘mobile’ mean for this product?
What are the priorities of features?

70. Define Core User Scenarios

71. Desktop -> Mobile Tasks
1. Create a page
2. Post a comment
3. Favourite a page
4. View a profile
5. Subscribe to a feed
6. Post a photo
7. Attach a document What will users do
8. Email a group
on their mobile?
9. Create a project collaboration area
10.Like a page
11.Delete a page
12.Update status
13.Fill in a form
14.Participate in a poll
15.Create a calendar event
16.Create a blog post
17.…….

72. ThoughtFarmer Core User Scenarios
• Search the people directory, find someone's cell phone, call it
• Read an email about a page, click the link, read the content on
mobile & comment on the page
• Search to find a page, view the page
• Update status
• View the activity feed

75. Important tasks should take up the most space
less visible
more By Many By Few
clicks
Frequent by
Frequent by few,
Frequent many
Suggested, few clicks
Visible, few clicks
Occasional by Occasional by
Occasional many few
Suggested, more Hidden, more clicks
clicks

76. Reduce Functionality

77. Mobile Design Challenges

78. Environment* Time*
Culture* Device*

79. Universal Design Challenges
• Mobile Device Considerations
• Device Usability
• Discoverability of application
• Annoyances imposed on others
• Part of a larger system

80. Mobile Device Considerations
UI Design
iOS Standards
Supported
Windows 7 Handsets
Development
Android Toolkits
Blackberry OS Open vs Closed

81. Software

82. Mobile Hardware

83. Mobile Device Usability:
beyond your control
• Keyboard Type
• Volume control
• Navigation
• hardware keys vs touch screen

84. Mobile Interaction Usability
1.Gestures
2.Postures
3.Tap Errors

85. Swipe

86. Awkward postures

87. Tap Errors

88. Discoverability of the
Application

89. Annoyances imposed on others

90. Part of a larger system
that has higher priority
functions

91. Native Versus Mobile App

92. Mobile adoption
http://www.businessinsider.com/the-one-chart-you-need-to-see-to-understand-mobile-2011-11

93. “Mobile apps currently have
better usability than mobile sites,
but forthcoming changes will
eventually make a mobile site the
superior strategy.”
Jakob Nielsen - Feb 2012
http://www.useit.com/alertbox/mobile-sites-apps.html

94. “Why would I download
an app that I am hardly
going to use?”
insights from webcredible mobile research study (UK, 2012)

95. Native App vs Mobile Web
App Web
• More responsive • Build once, run anywhere
• Follows native app • Better integration with
conventions hyperlinks
• Better integration with device • Easy deployment, no app
features stores
• More future proof

96. Mobile UI Design Principles

97. 1. Design for Simplicity
• Relate visual precedence to task importance
• Reduce functionality
• Keep navigation narrow and shallow
• Avoid extraneous information on each screen
• Reduce or remove preferences

98. 2. Design with Small Screen in
Mind
• Minimize user input
• Minimize vertical scrolling and avoid horizontal
scroll
• User hyperlinking effectively
• Provide useful error messages
• Prioritize the information on the screen

99. 3. Provide Useful Feedback
• Identify critical feedback
• Employ alternative feedback modalities intelligently
• Ensure quick system response time

100. 4. Maintain Existing Design
Standards
• Use Existing Standards
• Use Real World Metaphors

101. 5. Respect both the physical and
mental effort
• Use wizards to simplify complex interactions
• Design for efficiency

102. http://vimeo.com/6245088

103. Activity: Sketching A Mobile
Solution

104. Working in a group...

105. Randomly select a website from
the stack of cards...

106. You will have 20 minutes to...

107. • Identify key tasks to be supported on
mobile
• Identify
what tasks are not going to be
supported
• Identify highlevel business goals & user goals
• Sketch the mobile solution of a website.

108. Be ready to present your work!

109. Part 3:
Evaluating Your Mobile Design

110. Usability Testing
•A technique used to evaluate a product by testing
it on users

111. Many types of evaluations and
methods
Cognitive Comparative
Task Testing
Walkthrough Study
Heuristic Remote
Diary Studies
Evaluation Evaluations
Moderated Unmoderated

112. Heuristic Evaluation
• Systematicevaluation of an interface against a
standard set of usability rules
• Completed by 1 or more usability experts
• Findings& recommendations are given a usability
severity rating

113. Heuristic Comment Example
Indicates where on the
screenshot the heuristic was Heuristic Broken: Speak the User's Language
broken. 1
Summary: The App is requesting information
from the user but the user still has no
A summary of why the real idea of what the app does and
heuristic was broken: why they need to enter this
information.
Usability Impact: High
The impact of this problem
on the user's ability to Recommendation: Users will not give personal
complete the tasks they information unless they understand
are commonly trying to the value of an App.
complete.
Low impact indicates a
problem that does not
impair the user's ability to Recommendations on how to most
complete a task but does easily resolve the broken heuristic
slow them down. within the interface. Often
recommendations include minimal
Medium is a significant fixes along with larger but more
usability problem that the effective fixes.
user will eventually be able
to overcome.
High indicates a very
serious problem that could
stop the user completely
their task.

115. Usability Testing with End-Users

116. Logistics
• upto 1.5 hr sessions
•7 - 9 participants recruited to match target
demographics
• scenario based
• usability metrics measured: satisfaction & task
success

117. Only 7 - 9 participants?
Jakob Nielsen 2000

118. Test Early. Test Often.

119. UCD Phases
Analysis
Deployment Design
Implementation

120. Evaluate at each Phase
Concept evaluation
Analysis
Deployment Design
Continuous
mprovement Prototype
evaluation
Implementation
Beta
evaluation

121. Tour of Wavefront Usability
Facilities
(following summary)

122. Mobile Strategy Recap

123. Defining your mobile strategy
• Design for ‘fat thumbed’ people
• Start with your digital strategy
• Deliver a consistent brand experience

124. Answer this question
What problem is mobile going to
solve?

125. Strategy: Key Take Aways
• Understand what your users will do, not want they
want
• Align
with business goals to uncover seducible
moments
• Context of Use
• What gets measured gets done

126. Strategy: Key Take Aways
• Understand what your users will do, not want they
want
• Align
with business goals to uncover seducible
moments
• Context of Use
• What gets measured gets done

127. Design: Key Take Aways
• Usersdigital expectations are set by web
experiences
• Mobileapps may have better usability now, but
mobile websites may be a longer term solution
• Design for simplicity
• Focus on key user tasks on mobile

128. Usability: Key Take Aways
• Test early. Test often
• Integrate into part of development process
• Cheaper to change a concept, than change a
product

130. Selma Zafar
Senior UX Designer
selma@openroad.ca
@selmaz

131. Tour of Wavefront Usability
Facilities
Across the street