Mobile First London 13 August

13th Aug, 2013Putting Mobile First

@precedent##PrecSem

John CampbellHead of Mobile

Mark BaillieCreative Director

Mobile whitepaper series

1. Optimising Mobile

2. Targeting Mobile

3

1. A Changing World 2. What Are My Options?3. Design Considerations4. The Optimum Approach5. Making It Happen 6. Considering The Future

Putting Mobile First

A Changing World

A Changing World – Google I/O

A Changing World - Stats…

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

Aus-tralia

Brazil China India Italy Russia South Korea

Turkey UK US0%

10%20%30%40%50%60%70%80%90%

100%SMS Web Browsing Email Social Networking Apps Streaming Music Instant Messaging Video/Mobile TV

A Changing World – Activities performed by Smartphone Users at Least Once a Month

Source: Nielsen, (February 2013) via: mobiThinking

A Changing World – The Surge Towards TabletGl

obal

Uni

ts S

hipp

ed (M

Ms)

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

A Changing World – What Do Your Customers Use?

Smart TV

Blackberry Windows

iOSAndroid

A Changing World – Tablets



A Changing World – Mobile Operating System by Region

EuropeAustralia

June 2012 to May 2013

Asia

iOS Android SymbianOS

Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/



Take the time to understand your user’s behaviour and context.

What Are My Options?

1. Typically has short bursts of activity2. Often is time restricted3. Is goal driven4. Loves using his phone - joy of use 5. Tells others of a good experience6. Needs a simple uncomplicated experience

What Are My Options? – Remember a Mobile User…

Take the opportunity to innovate in design and function.


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


Mobi

Responsive

Hybrid Apps

Native Framework Web App

Feed Aggregators

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



‘

’

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

Design Considerations – Common Language

Design Considerations – Hit Areas

RecognitionPutting 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’

DescriptionWhere 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

Design Considerations – Responsive layouts

Design Considerations - Reach

Right hand

Easy

Average

Hard

Left hand

Easy

Average

Hard



The Optimum Approach - mobi



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 - Responsive




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


‘

’


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


The Optimum Approach – Hybrid Apps

Are apps going out of fashion?

The Optimum Approach – What do you think?

Yes No

The Optimum Approach – What do you think?

The Optimum Approach - Frameworks

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

The Optimum Approach – Native Apps




The Optimum Approach – iButterfly

Leeds College of Music

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

The Optimum Approach

The Optimum Approach - Feeds



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

Making It Happen – Content: Mobile First

Making It Happen – Content: Adapting content

Don’t just follow the webMove from a 4 to 6 step process

Making It Happen – UI Flow

User journey mapping

NARRATING THE STORIES IS CRUCIAL TO GATHERING SUPPORT FOR BIGGER CHANGE

Creating engaging online experiences for ACI ‘s customers, James Downes, UX Director, Precedent 2012

Digital glass

What happens the morning after?

So many ways to enjoy

Advice from the community

The barman’s guide in your pocket

Virtual cheers

Digital tastingGiraffes on the loose

Match my mood to a drink

Cross link blogs

Get better advocates

Cooking with whisky What would Dr Bill say?

The Sixteen…

A moment of calm

Whisky doesn’t equal drunk

Augmented drink finder

Wearable tech

Tweet my glass!

How do I get started?

Acoustic zoning

Will it blend?

The Labrador effect

A slice of class

Mapping the way forward

‘

’

Making It Happen - Images

What about performance? Won’t a lot of images slow down the mobile experience?

Making It Happen – Images

‘

’

Making It Happen – Data Integration

Users are sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.

‘

’


Users are NOT sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.

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


‘

’

Making It Happen – Resource and Process

The more channels I run, the more resource I’ll need, right?





Considering the Future – Lifestyle Health Bands

Considering The Future

Considering The Future – Remember it’s a Phone!

‘

’

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)

SpaceBook is a speech-driven, hands-free, eyes-free device for pedestrian navigation and exploration.

Considering The Future - PrecedentLabs

Considering The Future – PrecEvents – Out of the Box!

Considering The Future – New mobile platforms in 2013

Considering The Future – New mobile platforms in 2013

• 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

Don’t disappointDon’t be afraid to innovateDon’t delay in providing a solution( think-apply-review-refine )

Considering The Future – Finally…

Think big.Start small.Act Quickly.Smart thinking wins…

Considering The Future – Finally…

120expertsStrategy & researchBranding & communicationsUser-centred designDevelopment & hostingDigital marketing

Years24Experience QualityStabilityLoyalty Results

LONDON

EDINBURGH

CARDIFF

PERTH

MELBOURNE

HONG KONG

Who we work with

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/Precedentcommsfor Precedent news, seminar info and general observations.

Technology

Mobile First London 13 August