Precedent latest "Putting Mobile First" seminar run in Melbourne on the 4 & 5th June and Perth on the 7th June. John Campbell and Rufus Spiller presented

1. 4th June, 2013
Putting Mobile First
@precedentau ##PrecSem
John Campbell
Head of Mobile
Rufus Spiller
Creative Director

2. 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

3. A Changing World

4. A Changing World – Google I/O

5. A Changing World - Stats…

6. 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

7. Australia Brazil China India Italy Russia South
Korea
Turkey UK US
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
SMS Web Browsing Email Social Networking Apps Streaming Music Instant Messaging Video/Mobile TV
Activities performed by Smartphone Users at Least Once a
Month
Source: Nielsen, (February 2013) via: mobiThinking

8. 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

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

10. A Changing World – Tablets

11. A Changing World – Tablets

12. A Changing World – Tablets

13. 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/

14. 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

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

17. 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…

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

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

21. What Are My Options?
Mobi
Responsive
Framework
Native

22. What Are My Options?

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

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

25. 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

26. ‘
’
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

27. Design Considerations – Common Language

28. Design Considerations – Hit Areas

29. 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

30. Design Considerations – Responsive layouts

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

32. 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

33. The Optimum Approach - mobi

34. The Optimum Approach - mobi

35. The Optimum Approach - mobi

36. 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

37. The Optimum Approach - Responsive

38. The Optimum Approach - Responsive

39. The Optimum Approach - Responsive

40. The Optimum Approach - Responsive

41. 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

42. ‘
’
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

43. The Optimum Approach - Responsive

44. The Optimum Approach – Hybrid Apps

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

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

47. The Optimum Approach - Frameworks

48. 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

49. The Optimum Approach – Native Apps

50. The Optimum Approach – Native Apps

51. The Optimum Approach – Native Apps

52. The Optimum Approach – Native Apps

53. The Optimum Approach – iButterfly

54. 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

55. The Optimum Approach

56. The Optimum Approach - Feeds

57. The Optimum Approach - Feeds

58. 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

59. 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

60. Making It Happen – Content: Mobile First

61. Making It Happen – Content: Adapting content

62. Making It Happen – UI Flow

63. Typical Assets
• Logos
• Iconography
• Image galleries
• Product shots
• multiple sizes needed
Making It Happen – Image Support

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

65. Making It Happen – Images

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

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

68. 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

69. Making It Happen – Data Integration

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

71. Making It Happen – Resource and Process

72. Making It Happen – Resource and Process

73. Making It Happen – Resource and Process

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

76. Considering the Future – Lifestyle Health Bands

77. Considering The Future

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

79. ‘
’
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)

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

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

82. Considering The Future – New mobile platforms in 2013

83. • 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

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

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

87. Years24 Experience
Quality
Stability
Loyalty
Results

88. Experts100 Strategy and research
Branding and communications
User centered design
Development and hosting
Digital marketing

89. Sectors6 Education
Membership organisation
Third sector
Financial services
Health
Destinations