Our mobile workshop for the Communications Network 2013 Annual Conference in New Orleans.

1. Getting Going with Mobile
(What Your Users Really Want!)
Chris Wolz / Nam-ho Park
Forum One Communications

2. Introductions
Mobile Overview
Case Studies
Mobile Strategy
Let’s get to know each other

3. 3

4. 2011
h"p://www.charitywater.org
1994
1985
1979
London
1974
Sea1le
Yay!
2001
DC
NYC
1971
1976
Rabat
1981
2007
1970
Seoul
1969
2008
2009
Hanoi
4

5. Forum One Communications
http://www.forumone.com
5

6. Staff
Founded
Experience
Expertise
60 staff in DC, Seattle, San Francisco
1996 by 3 policy analysts and web
enthusiasts
More than 1,500 projects for more than
500 clients
Web strategy, User Experience, Open
Source Development, Mobile, Support
and Growth
6

7. 7

8. ‣
Why are you here?
‣
What do you want to get out of this
‣ workshop?
Who are you?
‣
What is the burning question you want
answered?
8

9. Questionnaire Results
“What are the key considerations
and questions to ask at the
beginning of a mobile initiative/
campaign.”
“I want to better understand
differences between mobile and
web, and how best to choose the
right applications.”
“What's current, how to do things better”
“Justification for
moving forward with
a mobile strategy.”
“Fuller understanding
of current mobile
habits and strategies
and a few action
items.”
“An understanding
of trends in mobile
content design.”
What do you hope to get out of the session?
9

10. Questionnaire Results
“MMS, varying platforms for
mobile marketing.”
“What's hot and what's up and coming”
“Responsive considerations
across OS platforms.”
“Responsive web design.”
What areas of are you most interested in?
10

11. Introductions
Mobile Overview
Case Studies
Mobile Strategy
The mobile landscape in a nutshell

12. Mobile Overview
Why should you care?
Mobile by numbers
Mobile devices & contexts
Mobile approaches

13. Photo: http://www.prospectmagazine.co.uk/2009/11/diary-5/
13

14. Photo:: http://www.kylebean.co.uk/portfolio/#mobileevolution
14

15. 15

16. Photo: Nam So-Yoen, Allmynews.com
16

17. Photo: http://www.boston.com/bigpicture/2011/11/egypt_erupts_with_fresh_protes.html
17

18. "There is no need for
any individual to own
a computer in his home"
- Ken Olsen, CEO of Digital Equipment Corporation
18

19. Seen your email traffic lately?
19

20. Mobile internet usage trend
20

21. “Mostly-mobile” internet users
those who use their
‣ Non-whites: AmongHispanics and 43% ofphone to
go online, six in ten
AfricanAmericans are cell-mostly internet users, compared
with 27% of whites.
users
‣ Young adults: Half of cell internetonline. ages 18-29
mostly use their cell phone to go
‣ The less-educated: Some 45% of cell internet use
users with a high school diploma or less mostly
their phone to go online, compared with 21% of
those with a college degree.
‣ The less-affluent: Similarly, 45% of cell internet of
users living in households with an annual income
less than $30,000 mostly use their phone to go
online, compared with 27% of those living in
households with an annual income of $75,000 or
more.
21

22. Sustained engagement
Photo: Chris Wolz
22

23. Speed of mobile innovation
Photo: fitbit.com
23

24. Mobile Overview
Why should you care?
Mobile by numbers
Mobile devices & contexts
Mobile approaches

25. The number of mobile-connected devices will
exceed the world's population in 2013
Photo: flickr - slickimages CC BY 2.0
Source: Cisco Global Mobile Data Traffic Forecast Update, 2012–2017
25

26. Source: Mary Meeker / Morgan Stanley Research. Data and Estimates as of 9/12
Photo: Unknown
Global smartphone + tablet > total PCs
Shipments (2010); Installed base (2013)
26

27. 819 million monthly active users who used
Facebook mobile products (June 30, 2013)
Photo: Flickr - Ed Yourdon CC BY-NC-SA 2.0
Source: Facebook
27

28. 56% of American adults have a smartphone
34% of American adults own a tablet computer
Photo: flickr - Ed Yourdon CC BY-NC-SA 2.0
Source: Pew Internet (May 2013)
39
28

29. 60% of US cell owners access internet,
52% send/receive email on their phones
Source: Pew Internet (Sept 2013)
Photo: stringberd (Flickr)
39
29

30. This is not a phone.
30

31. Mobile Overview
Why should you care?
Mobile by numbers
Mobile devices & contexts
Mobile approaches

32. Credit: flickr - Xavier Encinas / CC License: BY-NC
39
32

33. 33

34. Questionnaire Results
iPad
iPhone
Kindle (Paperwhite/e-ink)
Android phone
Windows phone
Other
Microsoft Surface
Kindle Fire
0
1
2
3
4
5
6
Do you have and use any of these devices?
(7 Responses)
34

35. “Computers keep us
productive and
informed.”
Credit:3flickr363MeganMorris3/3CC3License:3NC6SA
Desktop
39
35

36. “Smartphones keep
us connected.”
Credit:3flickr363Yourdon3/3CC3License:3NC6SA
Smartphone
39
36

37. Tablet
“Tablets keep us
entertained.”
Credit: flickr - shareski / CC License: NC-SA
39
37

38. Questionnaire Results
33%
67%
Mostly at home
Equally at home and work
Mostly at work
Do you have and use any of these devices?
(7 Responses)
38

39. Hardware
Interac+on
Environment
Time2(peak)
User2Focus
Orienta+on
Sensors
Desktop
big$screen
power$supply
consistent$network
keyboard$and$mouse
si5ng$(chair$and$desk)
work$and$home
8am$:$7pm
extended$tasks
mul=:task
fixed
no
Tablet
medium&screen
ba-ery
inconsistent&network
direct&touch
relaxed
home
5pm&8&10pm
short&tasks
single&task
portrait&and&landscape
yes
Smartphone
small%screen
ba+ery
inconsistent%network
direct%touch
on%the%go
home,%idling,%work
all%day
short%tasks
single%task
portrait%and%landscape
yes
39

40. We also multi-screen by using more than
one device simultaneously
81%
66%
66%
New Multiscreen World Study (Google) http://bit.ly/18DGD2w
Multi-screen world
40

41. Mobile
41

42. Social
42

43. Informational
43

44. Mobile Overview
Why should you care?
Mobile by numbers
Mobile devices & contexts
Mobile approaches

45. Luke Wrobowski
“When a team designs mobile first, the end result is an
experience focused on the key tasks users want to
accomplish without the extraneous detours and general
interface debris that litter today's desktop-accessed
Web sites. That's good user experience and good for
business.”
Mobile First
45

46. ‣
‣
‣
‣
‣
‣
‣
Understanding mobile constraints
Taking advantage of mobile capabilities
Organizing navigation
Prioritizing content
Optimizing for mobile interaction
Mobile inputs & forms
Layout that make sense
Mobile First
46

47. Responsive Design
47

48. Responsive Design
48

49. Responsive Design
49
39

50. Native apps vs. mobile web
50

51. ‣
COPE
‣
CAPE
‣
Mobile content strategy
Find example
Mobile content strategy
51

52. WEBSITE
MOBILE
WEB
MOBILE
APPS
SOCIAL
MEDIA
TABLET
APPS
CONTENT
PRINT
MICROSITES
BLOGS
EMAIL
INTRANET
Karen McGrane http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-content-12133365
Mobile content strategy
52

53. Daniel Jacobson http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/
Mobile content strategy
53

54. Daniel Jacobson http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/
COPE - Create Once Publish Everywhere
54

55. Daniel Jacobson http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/
Mobile content strategy
55

56. Discussion
What is driving your interest in mobile?
What are barriers in your organization?

57. Questionnaire Results
“I just know it is becoming more
and more the way people get
information. Want to make sure
we are thinking about it.”
“Despite living in poverty, most of
the [users] we serve use mobile
devices (primarily phones). We
need to understand how best to
reach them through the devices
they use.”
“It's taking over the world – literally”
“We’ve been watching mobile
traffic to our web traffic
increase. It is the way things are
moving and it is important.”
“All other stakeholders,
including donors, are on
mobile devices.”
What is driving your current interest in mobile?
57

58. Questionnaire Results
“Limited internal capacity”
“Keeping the content up
to date and well curated.”
“Budget and the approval process.”
“No budget.”
“Small staff.”
“Limited communications staff (me).”
“Slow adoption by some users.”
“Cost.”
What are challenges in your organization
making better use of mobile?
58

59. Exercise
Who are your key audiences?
Sketch a typical user scenario

60. 60

61. For Key audience:
Storyboard: think motivations, context, information needs
1
2
3
4
5
6
7
8

62. 62

63. Introductions
Mobile Overview
Case Studies
Mobile Strategy
What are other organizations doing well?

64. Case Studies
Email on mobile
Responsive design
Mobile websites
Native apps / web apps
Mobile publication
Mobile giving
3rd party services

65. Pew Internet
Mobile Gov Blog
Email on mobile
ONE
66

66. Before
After
http://www.nten.org/articles/2012/the-age-of-mobile-email-has-arrived-are-you-ready
Email on mobile
67

67. Email on mobile
68

68. Email on mobile
69

69. ‣
Clear branding / header image
‣
Big text for quick scanning
‣
Images for better click-thrus
‣
Housekeeping in the footer
‣
Single column
Email on mobile
70

70. Case Studies
Email on mobile
Responsive design
Mobile websites
Native apps / web apps
Mobile publication
Mobile giving
3rd party services

71. Responsive Design
62
72

72. Responsive Design
73

73. http://www.responsinator.com/
Responsive Design
74
62

74. http://quirktools.com/screenfly/
Responsive Design
75

75. http://bit.ly/uvD115
Responsive Design
76

76. ‣
Navigation / buttons
‣
Homepage
‣
Content prioritization
‣
3rd party applications (flash, video, etc)
‣
Layout / grid
Responsive Design
77

77. Case Studies
Email on mobile
Responsive design
Mobile websites
Native apps / web apps
Mobile publication
Mobile giving
3rd party services

78. Mobile websites
79

79. http://m.goodwill.org
http://m.concern.net
http://m.montereybayaquarium.org
Mobile websites
80

80. http://cancer.org
Mobile websites
81

81. http://aarp.org
Mobile websites
82

82. http://m.npr.org
http://npr.org
Mobile websites
83

83. ‣
Audience-centric
‣
Use case focus
‣
Line between responsive, mobile web,
native app is blurring
Mobile websites
84

84. Case Studies
Email on mobile
Responsive design
Mobile websites
Native apps / web apps
Mobile publication
Mobile giving
3rd party services

85. One-way push
•
General info / news
•
Many-to-many interaction
Guides
•
Awareness / campaigns
•
•
Issue-focussed
community
•
Crowdsourced data
gathering / sharing
Information lookup
Two-way interaction
Stand-alone
•
Donation / fundraising
•
Monitoring / tracking
•
Citizen engagement
•
Fun / branding
•
Coordinating /
volunteering
App Typology / Goals
86

86. Seattle Art Museum
Gauguin & Polynesia iPhone App
Native apps / web apps
87

87. Center for Strategic & International Studies
iPhone App
Native apps / web apps
88

88. The World Bank
The World Development Report iPad App
Native apps / web apps
89

89. Native apps vs. mobile web
90

90. Native App
Mobile Web
• Quick, rich and interactive
• Takes advantage of rich phone
features (camera, GPS,
accelerometers etc)
• Launches immediately - no
internet connection needed
• Slower with limited interactivity
• Internet connection needed
• Less interactivity - works
through browser
• More investment
• Requires specialized skills harder to maintain
• Download to install, update
• Separate versions for each OS
• Less investment
• Requires web skills - easier to
maintain
• Updates instantly
• One code to for all OS
Good for rich interactivity and
security (games, specialized apps)
Good for access to general
information
Native apps vs. mobile web
91

91. ‣
‣
‣
‣
Is the goal for the app clearly defined? Who is the
audience? What do you want them to do?
Do I have high value content/service that will benefit
users on the go?
Will audiences see enough value to download the
app and sustain usage and engagement? (Are we
satisfied with short-term usage?)
Do I have a strategy for marketing and delivery of
the app to these users?
Native apps / web apps
92

92. Case Studies
Email on mobile
Responsive design
Mobile websites
Native apps / web apps
Mobile publication
Mobile giving
3rd party services

93. Volkswagen
Annual Report
‣
Content
Heifer International
Mobile Magazine
Mobile publications
94

94. Mobile publications
95

95. Case Studies
Email on mobile
Responsive design
Mobile websites
Native apps / web apps
Mobile publication
Mobile giving
3rd party services

96. Mobile giving
97

97. Network for Good / Donate Now
Mobile giving
98

98. PayPal
Mobile giving
99

99. Mobile giving
100

100. Case Studies
Email on mobile
Responsive design
Mobile websites
Native apps / web apps
Mobile publication
Mobile giving
3rd party services

101. 3rd party services
102

102. 3rd party services
103

103. 3rd party services
104

104. Discussion
Mobile web app, native app?
Responsive design?
Mobile emails, mobile pubs?
What is your approach / experience?

105. Questionnaire Results
Responsive design
Mobile website
Mobile app
Mobile email
0
1
2
3
Does your organization have...
(4 Responses)
106

106. Questionnaire Results
1 (unfamiliar)
2
3
4
5 (well-informed)
Mobile Content Strategy
29%
29%
Android vs. iOS
Responsive Design
14%
14%
43%
43%
43%
Mobile First
14% 14%
43%
43%
29%
14%
29%
Web app vs. Native app
29%
14%
14%
43%
Understanding of mobile
107

107. Discussion
What are some innovative uses of mobile
you have seen in this space?

108. Mobile Overview
Case Studies
Mobile Strategy
Crafting a practical mobile strategy

109. Mobile Strategy
Discovery
User workflow definition
Mobile approach
Roadmap

110. Discovery
Goals
Audiences
Content
Comparators
How does mobile align with your mission?
What does success look like?
Who are you trying to reach?
How do they interact online / on mobile?
What content is most valuable to the audiences?
How can you optimize your content for multiple
devices / channels delivery?
What are industry best practices?
What are best practices in our space?
112

111. Discovery
Audiences
Content
Comparators
Surveys, interviews
Focus groups
Personas
Content audit, content inventory
Server logs
Content strategy for mobile
Email templates
Responsive design
Innovative apps
113

112. Mobile Strategy
Discovery
User scenario
Mobile approach
Roadmap

113. 115

114. For Key audience:
Storyboard: think motivations, context, information needs
1
2
3
4
5
6
7
8

115. Mobile Strategy
Discovery
User workflow definition
Mobile approach
Roadmap

116. Mobile Approach
‣
Responsive design
‣
Mobile websites
‣
Native apps / web apps
‣
Mobile publication
‣
Mobile giving
‣
3rd party services
‣
Email on mobile
118

117. Mobile Apps
One-way interaction
Many-to-many interaction
•
General Info / News
•
Issue-focussed Community
•
Guides
•
•
Awareness / Campaigns
Crowdsourced Data gathering /
sharing
•
Information Lookup
•
Fun / Branding
Two-way interaction
•
Donation / Fundraising
•
Monitoring / tracking
Citizen Engagement
•
Stand-alone tools
Coordinating / Volunteering
•
119

118. Mobile Strategy
Discovery
User workflow definition
Mobile approach
Roadmap

119. ‣
‣
‣
‣
‣
‣
Making the case
We need to move to mobile because…?
Doing your research
Goals, audience, content, comparators?
Forming a team
Who is the champion? Who is your team?
Schedule and budget
What are time and budget constraints that will influences decisions?
Choosing strategy, platform, vendor
What is the best platform for our needs? Who can build it? What should I ask?
Evaluation, planning for the future
What does success look like?
It’s not over: Maintenance, content updates, analytics, evaluation?
Roadmap considerations
121

120. Discussion
What is your plan for next month, quarter, year?
What do you want to report back to this group?

121. Goals / Case for mobile
High value content
Key audiences
Comparators / examples
Roadmap worksheet
123

122. Laundry list
Effort
Value
Prioritized list
Roadmap worksheet
124

123. What’s your plan?
One month
One quarter
One year
what
what
what
who
who
who
Roadmap worksheet
125

124. Further (quick) reading
Books
Mobile First
Content Strategy
for Mobile
Mobile Frontier
New Multiscreen World Study (Google) http://bit.ly/18DGD2w
132

125. Further (quick) reading
Books
100 Things Every Designer
Needs to Know About People
133

126. Further (quick) reading
Mobile thought leaders
Luke Wroblewski
http://bit.ly/15DND2A
Karen McGrane
Scott Jensen
http://bit.ly/15DNzzX
http://bit.ly/15DNEDF
The firehose
Mashable.com/mobile http://mashable.com/mobile/
Idealware - mobile http://bit.ly/15DNRXr
134

127. Further (quick) reading
Key statistics
Pew Internet: Mobile http://bit.ly/15DN2Og
Cisco Mobile Traffic Forecast http://bit.ly/xDc6qP
Mary Meeker: Internet Trends http://slidesha.re/15DMUhT
135

128. Thank you
Chris Wolz
cwolz@forumone.com
Nam-ho Park
npark@forumone.com
@forumone http://forumone.com
136