Mobile is booming as a marketing channel - half of Tesco’s web traffic now comes via mobile as do a fifth of Domino’s Pizza orders. With our continued and growing attachment to our mobile phones and tablets, we get frustrated when the website or app we use does not perform as we expect. This seminar looks at the approach referred to as Mobile 1st which considers the content and design for the smaller screen before the desktop and we will be putting it to the test. Covering a variety of topics, including designing for touch devices; how to ensure a healthy conversion rate from your mobile channel; deploying web apps across devices using products such as PhoneGap or Appcelerat or Titanium; and the pros and cons of optimising design for all phone and tablet devices, this seminar also looks at specific topics such as image strategy for mobile and shares our views on the trends we are seeing in the mobile space.

2. 2nd Sept, 2013
Putting Mobile First
@precedent##PrecSem
John Campbell
Head of Mobile
Mark Baillie
Creative Director

5. Mobile whitepaper series

6. 1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First

7. A Changing World

8. A Changing World - Stats…

9. A Changing World – Google I/O

10. Todays news

11. A Changing World – Why are we here today

12. 2013
Asia Pacific Europe North America Middle East and Africa Latin America
A Changing World – Users of Mobile by Region 2012 - 2017
2012
Source: Portio Research
2017

13. A Changing World – What Do Your Customers Use?
Smart TV
Blackberry Windows
iOS
Android

14. A Changing World – Tablets

15. A Changing World – Tablets

16. A Changing World – The Surge Towards Tablet
GlobalUnitsShipped(MMs)
Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013)
Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13. Note: Notebook PCs include Net books

17. A Changing World – Tablets

18. A Changing World – Mobile Operating System by Region
EuropeAustralia
June 2012 to May 2013
Asia
iOS Android SymbianOS Other
Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/

19. 1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First

20. Take the time to
understand your user’s
behaviour and context.
What Are My Options?

22. Its is all about the customer experience.
THE ONLY SOURCE OF KNOWLEDGE IS EXPERIENCE. - Albert Einstein
EXPERIENCE IS NOT WHAT HAPPENS TO YOU. IT IS WHAT YOU DO WITH
WHAT HAPPENS TO YOU. - Aldous Huxley
WIDEN YOUR VIEW FROM GEN Y TO GENERATION C, NOT BOUND BY AGE OR
DEFINED BY INCOME. THEY LIVE AND BREATHE IN SOCIAL NETWORKS AND
USE THERE MOBILES AS WINDOWS TO THE WORLD– Brian Solis
To Gen C, experience is everything. What experience do you want your connected
customers to have?
DIGITAL TRANSFORMATION IS ABOUT FUNDAMENTAL CHANGE

23. Your experiences
?

24. 1. Typically has short bursts of activity
2. Often is time restricted
3. Is goal driven
4. Loves using his phone - joy of use
5. Tells others of a good experience
6. Needs a simple uncomplicated experience
What Are My Options? – Remember a Mobile User…

25. Take the opportunity
to innovate in design
and function.
What Are My Options?

27. What Are My Options? – Mathew Algie - Ethical Coffee
Campaign

28. What Are My Options?
Mobi
Responsive
Hybrid Apps
Native Framework Web App
Feed Aggregators

29. What Are My Options? – Roll It - App or Web?

30. 1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First

31. ‘
’
Design Considerations
Effective mobile designs not only
account for these one thumb/one eyeball
experiences but aim to optimize for them
as well.
Luke Wroblewski – Mobile First

32. Design Considerations – Common Language

33. Design Considerations – Hit Areas

34. Recognition
Putting a picture to either a person
or a place:
‘Meet Bob the new council
member for your area’
Or
‘Drop by the new office on
Flinders Lane’
Description
Where a specific item is better
described visually:
‘We will be rolling out new
wheely bins to replace our old
ones, they will look like this:’
Or
‘Our new Series 125fx is the
fastest widget on the market and
comes in blue!’
Design Considerations - Images

35. Balfour+Manson (Responsive)

36. Design Considerations – Responsive layouts

37. Design Considerations - Reach
Right hand
Easy
Average
Hard
Left hand
Easy
Average
Hard

38. Street Link (m. site)

39. How did you do?
26% pass

44. 1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First

45. The Optimum Approach - mobi

46. Tesco Compare (m. site)

47. The Optimum Approach - mobi

48. The Optimum Approach - mobi

49. What it’s good for:
• Providing focus and clear
structure
• Deploying without impact on
main website
• Delivering quickly
• Wide reach working via
browser
• Can be designed to
understand and respond to
screen size or orientation
Considerations:
• Careful consideration to
content impacting performance.
• Keep the design simply
effective
• You need to design for tablet
and phone to maximise
experience.
• Links to m. or mobi domain
name
The Optimum Approach - mobi

50. The Optimum Approach - Responsive

51. The Optimum Approach - Responsive

52. The Optimum Approach - Responsive

53. The Optimum Approach - Responsive

54. MDU (Responsive)

55. Tom Morris (Responsive)

56. What it’s good for:
• Reflows the same content
from the website
• Content is presented on all
devices and screen sizes.
• Architecture of the site
remaining the same
• Single update of content
Considerations:
• Cannot apply a different tone of
voice for mobile usage.
• Experience not built around the
user or context
• Requires to think in % and not
fixed width
• Supported screen size has to
be chosen
The Optimum Approach - Responsive

57. ‘
’
The Optimum Approach - Responsive
It's cheap but degrading to reuse content
and design across diverging media
forms like print vs. online or desktop vs.
mobile. Superior UX requires tight
platform integration.
Jakob Neilsen – 21st May 2012

58. The Optimum Approach - Responsive

59. Are apps going out
of fashion?
The Optimum Approach – What do you think?

60. Yes No
The Optimum Approach – What do you think?

61. The Optimum Approach - Frameworks

62. The Optimum Approach – Hybrid Apps

63. St Andrews Link

64. What it’s good for:
• Lets you develop once and
deploy many
• Cross device support
widening reach
• A balance between rich design
and reach
• Simplifying the interface whilst
enabling functionality
• Deployment via app stores
Considerations:
• Will not be a rich interface
• Restricted in functions
• Balance between features and
reach
• Typically uses HTML5 and
JavaScript.
The Optimum Approach - Frameworks

65. The Optimum Approach – Native Apps

66. The Optimum Approach – Native Apps

67. The Optimum Approach – Native Apps

68. The Optimum Approach – Native Apps

69. The Optimum Approach – iButterfly

70. Leeds College of Music

71. What it’s good for:
• Provides a rich interface
• Uses the full phone feature set
• Designed around the user
• Optimal performance
• Provides joy of use
• Can differentiate your brand
Considerations:
• Needs to be developed for
each device type
• Designs typically can be
shared
• Data is a key consideration for
unconnected use
The Optimum Approach - Native

72. The Optimum Approach

73. The Optimum Approach - Feeds

74. 1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First

75. From the ground up:
• Custom approaches
• Considered context
• Specific content
From pre-existing:
• Desktop applied to mobile
• Stress / break points
• Reworked content
Making It Happen - Content

76. Making It Happen – Content: Mobile First

77. Making It Happen – Content: Adapting content

78. Don’t just follow the web
Move from a 4 to 6 step process

79. Making It Happen – UI Flow

80. User journey mapping

84. ‘
’
Making It Happen - Images
What about performance?
Won’t a lot of images slow down the
mobile experience?

85. Thinking Mobile - map your strategy and the way forward

86. Making It Happen – Images

87. ‘
’
Making It Happen – Data Integration
Users are sympathetic to poor network
coverage and adjust their expectations
when WIFI isn’t available.

88. ‘
’
Making It Happen – Data Integration
Users are NOT sympathetic to poor
network coverage and adjust their
expectations when WIFI isn’t available.

89. 1. Ensure your existing web API
does not bundle unnecessary
data with requests for data
2. Expand your API to deal with
short, quick requests and
hook it into your CMS solution
as soon as possible
3. FEO is vital. Use mobile
optimisation and analytics
tools to see where your
delivery speeds can be
improved
4. Track user interaction in your
app using an analytics tool
Making It Happen – Data Integration – 4 Key points

90. Making It Happen – Data Integration

91. ‘
’
Making It Happen – Resource and Process
The more channels I run, the more
resource I’ll need, right?

92. Making It Happen – Resource and Process

93. Making It Happen – Resource and Process

94. 1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First

96. Considering the Future – Lifestyle Health Bands

97. Considering The Future

98. Considering The Future – Remember it’s a Phone!

99. ‘
’
Considering The Future
If you want the Internet to be
everywhere it has to be visible nowhere.
It has to be
unseen, unnoticed, undiscussed.
David St. Charles - Integrated Systems Inc. (Wired 1996)

100. SpaceBook is a speech-driven, hands-
free, eyes-free device for pedestrian navigation
and exploration.
Considering The Future - PrecedentLabs

101. Considering The Future – PrecEvents – Out of the Box!

102. Considering The Future – New mobile platforms in 2013

103. Considering The Future – New mobile platforms in 2013

104. • Connected devices
• Mobile payments and e-wallet
• Mobile advancement - wearable devices (NFC)
• Lounge computing - socially integrated TV
• Move towards social business
• Smart content with personalisation & aggregation
• Self service applications
Considering The Future - Our view of the digital trends for
2013 ‘14

105. Don’t disappoint
Don’t be afraid to innovate
Don’t delay in providing a solution
( think-apply-review-refine )
Considering The Future – Finally…

106. Think big.
Start small.
Act Quickly.
Smart thinking wins…
Considering The Future – Finally…

110. 120 experts
Strategy & research
Branding & communications
User-centred design
Development & hosting
Digital marketing

111. Years24 Experience
Quality
Stability
Loyalty
Results

112. LONDON
EDINBURGH
CARDIFF
PERTH
MELBOURNE
HONG KONG

113. Who we work with

115. Find our Precedent group
on LinkedIn for a chance to
find out more about our
seminars, network, share
ideas and quiz the Precedent
team on seminar issues and
more!
and follow us on
twitter.com/Precedentcomms
for Precedent news, seminar
info and general observations.