Designing the mobile experience

8 weeks of customer love

@OptimiseOrDie

• User Experience dogsbody• Usability testing & User centred design• A/B and Multi-variate testing• Customer Research & Insight• Web Analytics• Browser and email compatibility• On-site search analysis• Site, Page and Campaign optimisation• Online self-servicing and contact deflection• Test design and execution• A long usable site portfolio• ROI on UX improvements• Over 16 years of boring meetings• CX Manager for Belron® (Autoglass®)• I get to do interesting stuff with crowds

Naked self promotion

Outline• Where did we start?• What did we find out?• How we built the site• The tools we used• Benefits of this method• Tips and Tricks• Hybrid web apps

Ego and Opinions?

Who designs the

mobile site ?

Who designs the

mobile site ?

CEO

Marketing

Web/Online

IT

Product

THE CUSTOMER

Pesky Meddling

Fools

Brand

Where did we start?

• 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 do some analysis first

Bango analysis

• Why Bango?• Solid device detection and analytics• Fast, very very fast• Extremely accurate worldwide• Fantastic reporting, filtering, data analysis• Global reach handled with ease• Cheap• Who is knocking on the door?

Analysis

• 33 countries, 17 languages• First pass – entry points• Analysed data for 3 month period• Filtered to phone, smartphone, tablet, games

console and media players• Some tweaking by hand for new devices (Samsung)• 4 days of solid work to crunch

Interesting stuff

• Apple is huge – everywhere (apart from USA)• Apple, Blackberry, Nokia, HTC are our key groups for volume• Smartphones rule the roost – older phones are long tail and very

fragmented• Android devices are small but growing very fast (HTC = 400% in 3

months)• The UK mobile traffic is 3 times larger than FR or DE • USA has over 50% of our worldwide traffic• We get 3% mobile traffic worldwide, 6% in the UK• If we convert @ 5% (easy) then 300k per month revenue• We have 444 devices to support in key mobile markets!• Some data (groan)

Device type mix

Mobile Devices % of all % mobile

Computer 96.82%

Smartphone 2.67% 84.21%

Phone 0.27% 8.40%

Media Player 0.16% 4.88%

Tablet 0.05% 1.48%

Games Console 0.03% 1.02%

Mobile OS %

Apple iPhone 80.13%

Symbian 12.31%

Android 6.16%

Windows Mobile 1.39%

% of site arrivals – by country

USA UK AUS World FR CA ES IT NL DE BE0.00%

1.00%

2.00%

3.00%

4.00%

5.00%

6.00%

7.00%

8.00%

9.00%

Device Mix - UK

Manufacturer % % of mobi Reach↓Apple 3.73% 61.75% 61.75%

Blackberry 1.15% 19.11% 80.86%Nokia 0.47%` 7.84% 88.70%HTC 0.21% 3.44% 92.13%

Sony Ericsson 0.18% 2.98% 95.11%T-Mobile 0.09% 1.44% 96.54%Samsung 0.08% 1.38% 97.93%

Sony (PS3/PSP) 0.05% 0.85% 98.78%Motorola 0.01% 0.23% 99.00%

Palm 0.01% 0.22% 99.22%Other 0.05% 0.78% 100.00%TOTAL 6.04%

Device Mix - FR

Manufacturer % % of mobi Reach↓Apple 2.27% 73.16% 73.16%Nokia 0.27% 8.56% 81.72%

Samsung 0.12% 3.84% 85.57%HTC 0.10% 3.27% 88.84%

Blackberry 0.09% 2.94% 91.78%Sony Ericsson 0.06% 2.07% 93.86%

Sony (PS3/PSP) 0.04% 1.13% 94.98%LG 0.04% 1.13% 96.11%

Acer 0.02% 0.66% 96.77%Nintendo 0.01% 0.21% 96.98%

Other 0.09% 3.02% 100.00%TOTAL 3.10%

Yeah, so what?

• We need to find out handsets but what metric?• By country mix?• By worldwide?• Just build for Apple?• In the end, a key market perspective• Top handset list to aim for drawn up (weighted)• Device clustering (webkit/good coding)• 88% of our worldwide traffic can be served by hitting the 19

handsets that represent 92% of our key market arrivals• 19 handsets!• In practice, clustering helps us reach over 95%

Our handset mix

Device Share Reach Cluster possible?Apple iPhone 60.26% 60.26% Y

Apple iPod Touch 5.18% 65.44% YRIM BlackBerry 9700 2.83% 68.27% YRIM BlackBerry 8520 2.34% 70.61% Y

Nokia N97 2.28% 72.89% YRIM BlackBerry 8900 2.15% 75.04% Y

Nokia 5800d 1.76% 76.80% YRIM BlackBerry 9000 1.72% 78.53% Y

Nokia E71 1.64% 80.17% YApple iPad 1.45% 81.63% NNokia N95 1.01% 82.63% Y

HTC HD2 (windows) 0.96% 83.59% YSony Playstation 3 0.86% 84.45% N

HTC Desire 0.79% 85.25% YHTC Magic 0.61% 85.86% YHTC Hero 0.55% 86.41% Y

T-Mobile G1 0.50% 86.91% YNokia N900 0.41% 87.32% Y

Samsung GT i5700 - Spica (Galaxy lite) 0.41% 87.73% YPalm Pre 0.34% 88.07% Y

What next?

• Your mix will be different• Don’t look at market stats – misleading• Visits do not mean conversion• Remember that conversion varies (FR 11%, DE 3% for

the same device)• Graceful degradation opted for• Time to get cracking!

The sweet spot!

Business Capability

Business Capability

Tech Capability

Business Capability

Customer Mental Models

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• Rapid build via iterative, User Centred Design process• Core functions only – concentrate on revenue, not gimmicks• Optimal experience for device capabilities• Use phone hardware (GPS, Touch, Call, Email)• App like build, but for mobile site

UCD lifecycle (2 week iteration)

Wireframe

Prototype

TestAnalysis

ConceptResearch

What did we use?

Balsamiq Concept-share

HTML prototype

Usability Testing

Washup and Prioritise

Paper, Excel, Word

BangoMarketSurveys

Stats

• 8 weeks build• 8 Usability tests, 48 handsets• iPhone app and main site reworked at same time• 50+ software builds• One usability test per week• Cross testing synergies – solve problems in more than one

place• Improve non mobile platform from mobile work!• No more ‘stick it in the menu’

Benefits

• Very fast build – post research, 8 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 iterations = fast feedback• Builds woven around testing for maximum insight• Customer match is awesome, very awesome• New models – Leave at branch, Leave keys at home• It does what it says on the tin• High performance (low Kb, low calls, device capability match)

Tips and Tricks

• Research YOUR customers and what they have in their hands• Get some brilliant coders• Use a top notch Usability agency• Employ a dedicated copy specialist• Listen to customers, not your inner geek• Get intent from your current site• Take advantage of clustering• Use a testing service and BUY handsets• Aim for performance, always always always• Performance does not mean poor design• Hybrid web apps are the future

Hybrid web apps

• You can do hardware features using a website• GPS, Touch, Call now – all used by this site• Hybrid web apps allow you to have the simplicity of an app,

but without the hassle and time to market• You can do this stuff on Android, Apple, Blackberry• Cool tricks can be done like the google ‘bump’• Techniques like Ajax can be used to drive data• Performance is paramount but possibilities endless• You can compile hybrid web apps -> Apple, Android etc.• See me for a list of resources here

Plans…

• Mobile site and app – Launch 3 weeks• Rollout to key markets• Research• Review and iterate another build• Back to the lab again – UCD ROCKS!• More hybrid stuff• Follow the money!• Update next year?

Further reading…

Email : Sullivac@gmail.com

Twitter : @OptimiseOrDie

uk.linkedin.com/in/craigsullivan

Any questions...

Reading material...

Additional books

UsabilityDon’t make me think – Steve KrugHomepage usability – Jakob NielsenNeuro Web design – Susan M. WeinschenkInformation Architecture – Morville and Rosenfeld

Web AnalyticsWeb analytics an hour a day – Avinash KaushikAdvanced Web Metrics with Google Analytics – Brian CliftonActionable Web Analytics – Jim Sterne

Optimisation and TestingAlways be Testing – Bryan EisenbergLanding Page Optimization – Tim Ash

•

Additional books

Performance

High performance websites - Steve SoudersWebsite Optimization - Andrew B. King

Forms Design

Forms that Work - Caroline JarrettFilling in the blanks - Luke WroblewskiDefensive design for the web - 37 signals

Search Analytics

Search Analytics - Hurol Inan