mobile first-edinburgh 030913

2nd Sept, 2013Putting Mobile First

@precedent##PrecSem

John CampbellHead of Mobile

Mark BaillieCreative Director

Mobile whitepaper series

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 - Stats…

A Changing World – Google I/O

Todays news

A Changing World – Why are we here today

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

A Changing World – What Do Your Customers Use?

Smart TV

Blackberry Windows

iOSAndroid

A Changing World – Tablets

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 – 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?

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

Your experiences

?

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

Balfour+Manson (Responsive)

Design Considerations – Responsive layouts

Design Considerations - Reach

Right hand

Easy

Average

Hard

Left hand

Easy

Average

Hard

Street Link (m. site)

How did you do?

26% pass

The Optimum Approach - mobi

Tesco Compare (m. site)

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

MDU (Responsive)

Tom Morris (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

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

The Optimum Approach – Hybrid Apps

St Andrews Link

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

‘

’

Making It Happen - Images

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

Thinking Mobile - map your strategy and the way forward

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?

Making It Happen – Resource and Process

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

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

mobile first-edinburgh 030913

Technology