Mobile presentation - Sydney Online Retailer - 26 Sep 2011

5 things you should know...
Before you waste money on mobile
Craig Sullivan
@OptimiseOrDie

Naked self promotion
@OptimiseOrDie
Conversion Rate Optimisation
A/B and Multi-variate testing
Cross channel optimisation
User CenteredDesign
Usability testing
Customer Research & Insight
Web Analytics
Browser and email compatibility
Contact deflection and online self service
Site search analytics
Site, Page and Campaign optimisation
Test design and execution
A long usable site portfolio
ROI on UX improvements
Over 18 years of boring meetings
Group CX Manager for Belron® (O’Brien ®)
I get to do it with crowds

"If you go to the men's washrooms at the Schiphol airport in Amsterdam, you may notice there's a fly in the urinals. It’s screen printed .
So what do you think most men do? That's right, they aim at the fly when they urinate.
They don't even think about it, and they don't need to read a user's manual; it's just an instinctive reaction that means 85% less spillage!
The interesting feature of these urinals is that they're deliberately designed to take advantage of this inherent human male tendency.“
This is my job.

“ Computer’s broken.
Can’t afford another computer.
Keep all my music, friends, photos and files on ‘ere.
Thisis my computer.”
Phil, 2007*
*Note : Phil doesn’t work for some trendy web development agency. where they experiment with facial hair and try for that trendy but well hard look,. He iswell hard.
Phil lives in Deptford, loves his hip-hop, nice phones and giving you this Vinnie Jones look…

Introduction
It’s like the wild west
What’s the debate?
It’s irrelevant:
Intent
Discovery (Angry Birds)
Context of use
The device they hold
Let’s start with that then!

Rule #1 – Know the Device
“Knowledge about devices that may be using or even lamely trying to use your web presence”

Rule #2 – Get good mobile analytics
Why do you need good analytics?
Huge range of handsets
Different specs, sizes, resolutions, model names.
Desktop = 4 or 5 browsers.
Mobile, lots of this:
[Mozilla/5.0 (Linux; U; Android 3.2; en-us; Transformer TF101 Build/HTJ85B) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13]
= Asus Eee Pad Transformer TF101

Mobile analytics
You need accurate device tracking
Handsets are always changing (upgrade, purchase)
Android models are hard to keep up with
I’m waiting to be impressed by other packages
From testing and hand wading through data, I know:
GA is great for analytics, but Bango is ace for devices
If you’re missing data, you’re guessing
!Tip – Check if you’re undercounting Android devices.

Bango analytics
http://bit.ly/nEf0Wk
Add a bango tag to your site entry pages
Will track smartphone, feature phone, tablet, media player and games consoles
They sniff the handset, operator, country and other data, to get the device nailed
Fast and reliable tags
Measure who is trying to use your site, please
!Tip – Check where your figures for iPods and iPads are!

Segmentation
For continual optimisation, you need to tap into analytics and segmentation
We found things like:
Mobile optimised site converts 3-4x better
iPhone converts 10-15% better than Android
Some BB models convert higher than iPhone
Devices with keyboards have lower bail on forms
Screen resolution is critical, device knowledge too

Rule #3 – Hunt Opportunity, not Myths
If you’ve analysed:
Traffic routes
Behaviour by segments/device classes
Funnel dropout rates
What devices knock on your door
Then you should be seeing growth!
Lets look at fresh stats from Sunday*
*Audience = 18+, driver, pulse but broad demog

Operating System
% of all unique visitors

Analysis of the data
Continuing huge traffic growth
Apple is huge everywhere (iPhone, iPad, some iPod)
Android growth rapid, leads in USA, Spain, others due
Other platforms are shrinking (Nokia, Blackberry, Other)
Growth areas – iOS, Windows Phone, Android, Tablets
Apple absolutely owns the tablet market
Tablets, though growing, are still only 8% of mobile visits in Australia. The big growth is smartphones.

Rule #4 – Be your own Mythbuster!
Let’s get a few things off my chest!
There are many myths around – let’s bust them!

Myth 1
“Mobile optimised websites are
just as good as apps”
Not true (yet).
You *can* do GPS, touch, pinch/zoom, phone and email
Run small databases, store offline data
Preferences, settings stored locally
Design web apps for offline use
Graphics and media handling superb
With Moore’s law, not long before gaming takes off
I’ve seen some brilliant stuff being worked on
Your mobile is more advanced than your desktop!

Integration with calendar, notes, contacts(1)
Audio, video playback
Store preference settings, data and web pages locally on the device(2)
Local databases (e.g. SQL)
Speech input(3)
Can do different keyboards for text, number, email and phone input(4)
Touch, Drag and Drop
Pinch and Zoom
Access to GPS location
Accelerometer (Gyro) functions
Upload files
Send email
Click/Tap to call

Myth 2
“You can’t deliver a slick experience
on a mobile optimised site”
Yes you can.
You don’t have quite the range that an app has
It’s much cheaper to change stuff though
Much more reactive to the business
It can be driven more readily from web business data
We leverage investment in an existing platform
Libraries like Jquery are good examples
Many sites now have excellent Uis – see google
Try list at end of slideshow

Myth 3
“We’d need to test on a huge range of handsets to reach a large audience. It’s too hard to do anything but just support the most popular models”
Last 3 months, we tested out > 95% of handsets
It’s a smartphone world, running one browser
1 stylesheet for iPhone/Android
1 stylesheet extension for Blackberry
1 stylesheet for older phones

Myth 4
“It’s hard or expensive to build
optimised mobile sites”
No – it’s quite easy, if you read the right books
Supporting wide numbers of handsets is straightforward
You don’t need special technology
It doesn’t cost lots of money, time, ‘experts’
You do need good developers
Invest in books, training, resources
Total time to first pilot = 8 weeks
User Centred Design kept it light, simple, fast

Myth 5
“My boss needs to buy me all these cool smartphones, for er, like testing and stuff. Yay!”
Nope. You can rent:
Phones, tablets – by the hour
Real devices, real networks
Best testing system of the year
www.deviceanywhere.com

Rule #5 – Performance is vital
“We need to concentrate on the brand guidelines, slickness and personality.”
Performance is vital on mobile
Affects conversion rates hugely
Strip out everything you can and optimise again and again
Use a CDN (e.g. Akamai, Level 3 to cache at a city level)
Keep graphics extremely low
The fallacy of the always on data connection
Use google site speed tags to measure real user speeds
Stop serving up unoptimised experiences or big pages!

Myth 6 - Example

So, how do you decide?
Ownership does not equal ‘surfing and buying’
Need research + analytics data – see earlier slide.
You need device and conversion data, not random time wasting
Remember to follow opportunity (think Amish DJ equipment store)
Use your own site traffic figures – these are useful
Our analysis:
Mobile web app, all markets (Q1-Q3 2011)
iOS app in key markets (Now)
Android app in high takeup markets (2012)
Nothing else worth doing, yet!

Insight - Inputs

User Centred Design
Research

Our Tools
Inputs
See slide

Mobile

What was happening at the time?
We want a mobile site now
We want zillions of zany apps
We want everything on everything for everywhere
£xxxM online channel
Mobile represents an opportunity (no kidding!)
Buy off the shelf?
Spend lots on consultants?
Go app crazy?
Lets set some ground rules...

Mobile Objectives
Support over 90% of handsets
High performance site, even in poor data conditions
Page weight 10-15k max for any page, 4-8k normal
Core functions only – concentrate on revenue, not fripperies or gimmicks
Optimal experience for device capabilities
Use phone hardware (GPS, Touch, Call, Email)
App like build, but for mobile site...

Mobile build
Four rounds of prototype testing
Rebuilt completely each time
Cross testing with other platforms
Synchronised with iPhone
Our first hybrid web app
Tested on 3 mths visit data for handsets – >95%
Designed with APIs...

iPhone

iPhone
Four rounds of prototype testing
Synchronised with Mobile
Live in key markets
API’s added for affiliates & partners
New version in the works – hard slog generally...

Web based booking

Web based booking
Five rounds of prototype testing
One of the best prototype tests we’ve had
“A jargon free website” “Really easy to read and understand” “All my questions were answered”
Cross channel UCD - Designs in the good UX, improves each time, feeds other channels
New process - converts 12.5% higher through ‘checkout’
!Tip of the week – browser funnel comparison...

Summary - Benefits
Very fast build – post research, 10 weeks to build 3 cross platform sites
Focused on the user (but not driven by them)
Align business and tech capability with customer ‘models’
Rapid iterative design= fast feedback
Builds are woven around testing for maximum insight
Customer match is awesome, very awesome
Cross channel synergy really helps work out issues
Site works extremely well and makes lots of new money
Higher overall grasp of service, lifted barriers, less pain...
Streamlined mobile (7-10Kb page payload, works on huge range of devices, simple, fast, easy)
Lo budget testing can start with paper, webcam, $60!...

TrafficRouting
Please send visitors to the optimal site for their device
You can do this on your servers, but there is a lame easy way to do it, which makes the mobile site suck
It’s called page level redirection and is like being ‘passed around’ a call centre
Ask your tech guys to do server/network level redirects
We do device sniffing and route traffic at the network level, using Akamai
You need to ensure you ‘send’ the mobile, tablet, media player, games console or TV to the right optimised ‘site’.
Let customers ‘store’ their preference
Always let them have access to the ‘other’ site – e.g. desktop
We route iPad to our desktop site (for example)
Lame traffic routing can make customers go...

ROI calculations:
If you’ve got a mobile site you plan to optimise:
Get some good device and mobile analytics
Find out where people are going...
Ensure you get segments, not lumped in data
Find out how the segments convert (goals/outcomes)
Low converting segments – hunt them down, find out why!
Measure phone traffic using dynamic numbers
For example, Tablets/Mobile/Desktop – different Phone #
Use a dynamic wrapper for click/tap phone numbers
Contact channels – Offer click to tap calling, Ringback (if profitable), Chat (if tested), email form or link.
We get huge phone traffic contact from the mobile site. Why?
Why aren’t you offering a Facetime number for iPhone?

ROI calculations:
If you don’t yet have a mobile site:
Badger or get accurate stats on all devices and routes
Check your Google keyword stats for mobile searches
Make sure you are counting mobiles trying to use your site
Measure conversion rates of mobiles using the desktop site
Multiply this by 1.5, 2.5 and 3.5 times the conversion rate
Calculate the extra revenue opportunity as a ‘range estimate’
Build your mobile site using device and user insight
Measure conversion and revenue differences... - ROI
If you have traffic, you’re sitting on a huge opportunity
People aren’t going to try lots of apps – websites, more so
This stuff is not expensive or hard to build...

Belron Conversion ROI
12.4% from Web increase
3.5% increase in downstream conversion rate
30 seconds reduction in call time (1 sec = $30k AUD p.a.)
Faster booking time (< 8%)
Greater customer delight – feedback. Less questions and worries
5.5% increase in NPS (Customer sat) score
4% increase in online conversion from mobile optimised site
12.5% increase from Split Testing
Total increase in conversion (measured) = 32%
Actual increase in conversion = 41%
NO additional marketing spend needed
Web Channel : ROI positive within 2 weeks

Belron Mobile ROI
Delivered huge traffic and phone calls
In some places, >20% of revenues and conversions
We convert on some devices in double digits %
Feedback has been in volume, and excellent
We’re live in nearly 30 countries with apps AND mobile
Our app revenue is between 1/30th to 100th of the mobile site
Search traffic (intent), a discovery route (SEO and PPC) and an optimised site = 
Device compatibility = reach = delight = engagement = conversions
V2 in the works with picture upload, more features.
Revenue has been immense and one mobile site > DE online
Mobile Channel : ROI positive 3 days

The 5 things again
Know the device mix
Get well configured mobile analytics
Hunt opportunity, not myth
Bust your own myths apart
Performance is vital for mobile
End device discrimination today!

Tips and Tricks
Research YOUR customers and what they have in their hands
Use device knowledge to drive opportunity and conversion
Get some brilliant coders
Use a top notch Usability agency
Employ a dedicated copy specialist
Listen to customers, not your inner geek
Get insight from your current stats
Use a testing service
Aim for performance, always always always
Performance design doesn’t mean poor design
How many searches on google vs. app store?
End device discrimination – you may not be noticing
Hybrid web apps are the future...

Wed 11:30 – Site split testing – ROI & Insights
Email
Twitter
Slideshare
: sullivac@gmail.com
: @OptimiseOrDie
: linkd.in/pvrg14
: slidesha.re/nlCDm6

Notes and Resources...

BOOKS
Mobile
Mobile Design & Development – Brian Fling
Programming the Mobile web – Maximiliano Firtman
Usability
Don’t make me think – Steve Krug
Homepage usability – Jakob Nielsen
Neuro Web design – Susan M. Weinschenk
Information Architecture – Morville and Rosenfeld
Web Analytics
Web analytics an hour a day – Avinash Kaushik
Advanced Web Metrics – Brian Clifton
with Google Analytics
Actionable Web Analytics – Jim Sterne
Optimisation and Testing
Always be Testing – Bryan Eisenberg
Landing Page Optimization – Tim Ash

BOOKS
Performance
High performance websites - Steve Souders
Website Optimization - Andrew B. King
Forms Design
Forms that Work - Caroline Jarrett
Filling in the blanks - Luke Wroblewski
Defensive design for the web - 37 signals
Search Analytics
Search Analytics - Hurol Inan
Search Analytics for your site - Louis Rosenfeld

ARTICLES
Users prefer browser for most activities:
http://www.emarketer.com/Article.aspx?R=1008010
Mobile by the numbers (infographic):
http://mashable.com/2011/03/23/mobile-by-the-numbers-infogrpahic
Twitter CEO – 55% log on with mobile, every day:
http://thenextweb.com/twitter/2011/09/08/twitter-100m-users-per-month-50-log-on-every-day-55-on-mobile/

Get the basics right for PPC and search optimisation:
http://searchengineland.com/3-mobile-campaign-mistakes-big-brands-make-how-to-profit-from-them-56531

Could mobile apps be an evolutionary dead end?:
http://adage.com/article/steve-rubel/mobile-apps-evolutionary-dead-end/229429/
Why separate Mobile & Desktop web pages?
http://www.lukew.com/ff/entry.asp?1390

5 innovative mobile marketing campaigns
http://mashable.com/2011/06/21/innovative-mobile-marketing-campaigns/

Make your mobile app more discoverable
http://mashable.com/2011/06/24/improve-mobile-app-discovery/

How can retailers appeal to mobile users in store?
http://econsultancy.com/uk/blog/7707-how-can-retailers-appeal-to-mobile-users-in-store

ARTICLES
5 ways mobile will transform commerce
http://mashable.com/2011/02/18/mobile-trends-commerce/

Best practices for mobile retail strategy:
http://www.emarketer.com/Article.aspx?R=1008221

Mobile is now 10% of all eBay sales – Sep 16th 2011:
http://thenextweb.com/uk/2011/09/16/mobile-now-accounts-for-over-10-of-all-sales-on-ebay-uk/

HTML5 and webapp resources
http://www.diveintohtml5.org/detect.html#modernizr
http://tutslist.com/65-useful-html5-tutorials/
http://www.webdesignersblog.net/inspiration/45-inspirational-examples-html5-websites/
http://shop.oreilly.com/product/0636920020011.do?sortby=publicationDate
http://woorkup.com/2010/08/25/10-useful-frameworks-to-develop-html-based-webapps-for-touch-devices/
http://web.appstorm.net/roundups/100-web-apps-to-rule-them-all/
http://technolog.msnbc.msn.com/_news/2011/04/01/6389383-facebook-mobile-now-with-250-million-users-gets-a-makeover
http://networkeffect.allthingsd.com/20110125/facebook-sets-mobile-sights-on-html5/
http://techblog.netflix.com/2010/12/why-we-choose-html5-for-user.html
http://www.readwriteweb.com/archives/linkedin_overhauls_mobile_experience_launches_an_h.php
http://www.smashingmagazine.com/tag/html5/

EXAMPLE SITES
Example mobile optimised sites:

http://touch.linkedin.com
http://m.bbc.co.uk
http://m.facebook.com
http://m.guardian.co.uk
http://m.dropbox.com
http://m.flickr.com
http://m.foursquare.com
http://mobile.twitter.com
http://m.gmail.com
http://maps.google.com
http://amazon.co.uk
http://m.johnlewis.com
http://m.marksandspencer.com
http://m.tesco.com
http://m.asos.com
http://m.sainsburys.co.uk
http://m.next.co.uk
http://m.republic.co.uk
http://m.imdb.com
http://m.wikipedia.org
http://m.engadget.com
http://m.youtube.com
http://m.vimeo.com
http://wap.ebay.co.uk
http://basecamphq.com
http://m.autoglass.co.uk
http://m.yahoo.com
http://www.barclays.mobi
http://m.bmw.com
http://mobile.paypal.com
http://m.cnn.com

DESIGN RESOURCES

The best mobile articles this year – some brilliant guides here:
http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
http://www.smashingmagazine.com/2011/07/18/seven-guidelines-for-designing-high-performance-mobile-user-experiences/
http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-your-website/

45 excellent design resources for all phone platforms:
http://www.mobilexweb.com/blog/guidelines-mobile-web-design

Designing for different screen sizes:
http://www.uxmatters.com/mt/archives/2010/10/going-mobile-designing-for-different-screen-sizes-promoting-your-mobile-app.php

20 HTML5 design examples – work great on mobile + elsewhere:
http://blog.genggao.net/inspiration/showcase-20-beautifully-designed-html5-websites-media-queries/

Video, Courses, Resources – all on Mobile – from the master, Luke W:
http://shop.oreilly.com/product/0636920020776.do
http://www.lukew.com/presos/preso.asp?26
http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf
http://www.lukew.com/ff/archive.asp?tag&mobile

DESIGN RESOURCES

Designing HTML emails for mobile reading:
http://webdesignerwall.com/general/make-your-html-email-5-times-more-mobile-friendly
The mobile web use experience:
http://www.slideshare.net/nickf/mobile-web-user-experience
http://www.foolproof.co.uk/context-%E2%80%93-the-future-of-mobile/

Design frameworks:
http://jquerymobile.com/
http://jquerymobile.com/test/
http://www.sencha.com/products/touch/
http://jqtouch.com/
http://code.google.com/p/iui/
http://www.smashingmagazine.com/2011/08/24/freebie-responsive-jquery-slider-plugin-flexslider/

Webcredible : The Mobile advantage:
http://www.slideshare.net/webcredible/webcredible-the-mobile-advantage

Prototyping, Kits, Cutouts, Designs:
http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
http://developer.yahoo.com/ypatterns/about/stencils/
http://www.teehanlax.com/blog/ipad-gui-psd/
http://graffletopia.com/stencils/413
http://uxpin.com/mobile-kit.html
http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
http://www.matcheck.cz/androidguipsd/

Uxbooth : Mobile design:
http://www.uxbooth.com/blog/considerations-for-mobile-design-part-1-speed/
http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/
http://www.uxbooth.com/blog/considerations-for-mobile-design-part-3-behavior/

Google head of mobile : 8 out of 10 not ready for mobile:
http://www.brandrepublic.com/news/1075050/eight-10-brands-not-ready-mobile/

WOW - CAN THEY ACTUALLY DO THAT?

I didn’t know they could do that on a mobile!

Accelerometer support in Safari for iOS 4.2:
http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html
http://cubiq.org/device-motion-websockets-node-js-tech-demo

You can do touch, pinch, and zoom too - load these on an iPhone:
http://cubiq.org/rotating-wheel-for-your-iphone-webapps
http://cubiq.org/iscroll-4
http://html5rocks.com

Where all the GPS stuff started:
http://smithsrus.com/gps-geolocation-in-safari-on-iphone-os-3-0/

How to use W3C or Google Gears calls to scrape the GPS from devices:
http://code.google.com/apis/gears/api_geolocation.html
http://dev.w3.org/geo/api/spec-source.html

Google are on their 3rd generation of mobile web app site that uses device GPS:
http://google-latlong.blogspot.com/2011/05/google-maps-on-your-mobile-browser.html

GPS demonstrations:
http://m.autoglass.co.uk/index.php?id=5469
http://maxheapsize.com/static/html5geolocationdemo.html?utm_source=twitterfeed&utm_medium=twitter
http://maps.google.com

File uploads from a browser:
http://www.parorrey.com/blog/technology/how-to-fix-iphoneipad-mobile-safari-greyed-out-and-disabled-file-upload-control/

PERFORMANCE OPTIMISATION
Mobile device quick test – uses real phones as a ‘slave’:
http://www.blaze.io
Mobile performance from Maxmiliano Firtman:
http://www.mobilexweb.com/blog/mobile-web-html5-performance-optimization#more-88
http://assets.en.oreilly.com/1/event/60/Mobile%20Web%20_%20HTML5%20Performance%20Optimization%20Presentation%201.pdf

Office Depot – Simplicity and performance:
http://www.mobilecommercedaily.com/2011/09/16/aldo-office-depot-execs-mobile-is-very-different
Why mobile apps suck when you’re mobile:
http://blog.davidsingleton.org/mobiletcp
http://www.slideshare.net/sthair/measuring-mobile-performance-ldnwebperf-version

Optimising Web and Mobile site performance by Google & Compuware:
http://www.slideshare.net/Gomez_Inc/optimizing-web-and-mobile-site-performance-using-page-speed

Mobile performance resources – infographics, real data, superb insights: Joshua Bixby:
http://www.youtube.com/watch?v=Z-BCsgo9sDc&list=PLD1D3B0B233F2AD66&index=16
http://www.webperformancetoday.com/2011/07/20/new-findings-mobile-web-users-are-more-disappointed-than-ever/
http://www.webperformancetoday.com/?s=mobile

PERFORMANCE OPTIMISATION (...cont)
Some articles of note on performance optimisation – do read them!
http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-your-website/

DEVICE TESTING
http://www.deviceanywhere.com
http://www.perfectomobile.com
http://www.developer.nokia.com/Devices/Remote_device_access/
http://www.mobilexweb.com/emulators

DEVICE DETECTION
http://www.bango.com
http://www.scientiamobile.com/products
http://www.deviceatlas.com

STATS
A heap of mobile stats, for the unconverted amongst you:
http://www.mobileinc.co.uk/2010/01/mobile-statistics-galore/
Mobile industry predictions:
http://www.chetansharma.com/2011_Mobile_Industry_Predictions_Survey.pdf

Wed 11:30 – Talk on A/B and split testing $
Email
Twitter
Slideshare
: sullivac@gmail.com
: @OptimiseOrDie
: linkd.in/pvrg14
: slidesha.re/nlCDm6

http://paper.li	129
http://twitter.com	2
http://www.linkedin.com	2
https://twitter.com	1
http://us-w1.rockmelt.com	1
http://a0.twimg.com	1

Mobile presentation - Sydney Online Retailer - 26 Sep 2011

by Craig Sullivan

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 136

Statistics

Mobile presentation - Sydney Online Retailer - 26 Sep 2011 Presentation Transcript