mobile right now: what a real customer’s mobile experience looks like

@yottaa @dougsillars @marlinmobile

What A Real Customer’s Mobile Experience Looks LikeMOBILE RIGHT NOWWebinar

www.yottaa.com | developer.att.com/ARO | www.marlinmobile.com

@yottaa @dougsillars @marlinmobilewww.yottaa.com | developer.att.com/ARO | www.marlinmobile.com 2

Your Presenters

Ariel WeilVP of Product Marketing & Management, Yottaa@aweil

Adrian MendozaCo-founder, Marlin Mobile@marlinUX

Doug SillarsPrincipal Architect, ARO Outreach team at AT&T@dougsillars

Agenda

• Delivery Challenges• Mobile is complex• A Customer Experience• Build a Mobile Profile• Location• Device Performance• Network Connectivity• Q&A

@yottaa @dougsillars @marlinmobile 4

End User Pain: Digital Experience Delivery Challenges

OF SMARTPHONE USERS EXPECT PAGES TO LOAD IN

UNDER 4sExpect mobile to be fasterthan desktop85% Will go to

a competitorto transact42% Will never

return tothe site

29%64%

According to Forrester research, Mobile is a part of virtually every online txn

End Users are still frustrated by a sub-par mobile experience

Online and mobile end user experience challenges impact conversions and revenue

There are a few solutions claiming to solve this problem

@yottaa @dougsillars @marlinmobile 6www.yottaa.com | developer.att.com/ARO | www.marlinmobile.com

What is a Digital Experience anyway?

One thing is consistent…

Site responsiveness is key to maximizing user experience across form factors

The end user experience with a digital brand or product

The problems are the similar for desktop and mobile applications

…but despite the rapid pace of innovation, the current state of mobile technology creates very

different problems.

Lets be honest, Mobile is complex…Every part of your mobile experience is in motion

Your Mobile Experience

and its growing.

.7 Billion

Getting Customer Usage

Who are Engaged Customers?

Buy MORE!

More likely to buy!

How to Get Customers Engaged?

48% customers abandon if dissatisfied with the performance of a mobile app

Customer Expectations - Loading

@yottaa @dougsillars @marlinmobilewww.yottaa.com | developer.att.com/ARO | www.marlinmobile.com

Customer Expectations - Apps

Building a mobile profile

Locatio

n Devic

Your Customerof

What You Can’t ControlLocation, Location, Location,

Speeds by Location

Top 5 Fastest Mobile locations

• Monticello, Kentucky - AT&T Mobility• Ceres, California - AT&T Mobility• Katy, Texas - T-Mobile• Sachse, Texas - T-Mobile• Livermore, California - T-Mobile

Why is Kentucky or California fast? Locations are now tied to a carriers load in that area as well as

infrastructure.

Mobile devices are more then just phonesPhones & Tablets

Devices by Screen Size

5 Most Common Phone screen sizes

• 480 x 800• 320 x 480• 540 x 960• 580 x 854• 240 x 320

5 Most Common Tablet screen sizes

• 720 x 1280• 1080 x 1920• 720 x 1184• 800 x 1280• 1080 x 1776

The iPhone 4s (640 x 960) and 5 (640 x

1136) ranked 13th & 14th

The iPad (768 x 1024) ranked 6th, while iPad retina tablets (1536 x

2048) ranked 5th

Devices by Performance

Top 5 Fastest Android Devices

• LG Optimus G• Acer Iconia• Google Nexus 10• Samsung Galaxy S III• Sony Ericsson Xperia

Mini Pro

Top 5 fastest iOS Devices

• iPhone 5• iPad 3• iPad mini• iPhone 4• iPhone 4s

Responsive Web Design

• One URL/One codebase• Media Queries allow code to adapt for different screen sizes.• Code tells browser how to build page based on screen width.• UI is improved on all devices. Next Step focus on serving UI by

different devices.

Desktop Tablet Phone

Optimizing the mobile web3 Tips you can use now!

Tip 1: Mobile Redirects are problems

The user is redirected through 3 URLs for the first 4 seconds

…so that after 10 seconds the browser still doesn’t have enough data to paint a screen for the user

Tip 2: Re-ordering page components

Site analytics are loading before content...so the business will clearly see bounce and abandon metrics.

This causes first paint to be delayed to > 15 seconds.

Tip 3: Resource dependencies further delay page load

Previously loaded tags are dependent upon other elements including CSS to fully load

This causes visually complete to be delayed to > 25 seconds.

So what about Mobile networks?What speed are your users on

Network connectivity in the US

2.5G: 3G: 4G:

GPRS EDGE

Network Conditions Vary

Throughput 100-400 Kbit/S 0.5 – 5Mbit/s 1-50 Mbit/s

Last Mile Latency:

300-1000ms 100-500 ms <100ms

UMTS HSPA+ LTE

Visualizing the difference

2 seconds

26 seconds?!

International Networks• American developers work in a bubble of the

fastest networks & cutting-edge handsets

30www.yottaa.com | developer.att.com/ARO | www.marlinmobile.com

Next Billion People Going Online

• Few PCs/landline. Mostly mobile.• Slow networks– Old technology– Low bandwidth– High congestion

• Small data plans - can get used up quickly• Power issues

– Radio hogging = battery drain– HUGE if you can only charge phone 1x a week

31www.yottaa.com | developer.att.com/ARO | www.marlinmobile.com

Network connectivity in the world

Should I Bother with 2G Users?

Success in developing world a primary factor

Network Conditions Vary

GPRS EDGE UMTS HSPA+ LTE

Is your app ready able to adapt and change based on the network conditions?

Your App needs to be Flexibly Network Awarewww.yottaa.com | developer.att.com/ARO | www.marlinmobile.com

Flexibly Network Aware Apps

• Application is aware of network conditions and displays/modifies content flexibly– Consider:• Bandwidth• Latency• Roaming

• Like RWD, app changes display/request characteristics in a flexible manner

Problem Summary: Build a profile of your unique customers

Gather mobile centric data– Use Analytics (flurry, crashlytics, google analytics)

Create a mobile profile– Are they on 3G or 4G?– Do they have good or bad connectivity? (latency)– Where are they located?– What devices are they one? (tablets, phones)

Use this as a starting point to optimize your apps and websites

Problem Summary: Build Flexibly Network Aware Apps

Apps that respond to network conditions For Slow networks– Deliver content appropriately– Shrink image sizes– Reduce video quality

• Defer video?

In high latency– Prefetch more content (to eliminate future lags)

Roaming– Data is likely high cost: consider reducing content

Promise: deliver a responsive mobile experience without additional infrastructure

Realities:– Context is key: Desktop cannot simply be

repurposed for mobile– Order is important: Organize page elements for

immediate engagement– Know the critical rendering path: Optimize order

of elements to eliminate experience gaps

Problem Summary: Context and load order are critical

AT&T Offers Mobile App Optimization Tools

AT&T Network Attenuator– Free tool with signed SDK agreement– Test various Network Conditions– http://Developer.att.com/Attenuator

AT&T ARO– Free Open Source– Test Network Performancehttp://Developer.att.com/ARO

Questions? Contact– Doug.Sillars@att.com @dougsillars

Yottaa Optimizes End User Experiences

Web server

PERFORMANCE

InstantONTM AppSequencingTM

ENGAGEMENT

ImpactAnalyticsTM

INSIGHT

Context Intelligence Architecture

Impact AnalyticsMachine Learning

Rule Engine

Global Elastic Network: 70+ POPs, Auto-Scale, Secure

Real time, automated optimizations drive online and mobile engagement

Dramatically improve performance and engagement to drive business impact

Marlin Mobile Offers a Free Mobile App SDK

Easy to install (iOS & Android)– Capture and View • Signals strength• Data technology (3G,4G)• Location• Apps running and installed• Battery state and level

Sign up for our free SDK (BETA)

www.marlinmetrics.com/sdk

Use it to create a mobile profile for your mobile app users and customers

Thank You

mobile right now: what a real customer’s mobile experience looks like

customer expectations

mobile

amp

location

california

www

devices

marlinmobile

Technology

from the customer’s perspective

mobile payments · g. mobile couponing & offers– banks...

mobile solutions architecture resource...

customers and customer’s exjkgugpectations

customer’s choice

assessment of customer’s financing requirements

in our customer’s words

improving the customer’s experience

enterprise networking · • secure personalize and...

leo surface coatings pvt. ltd.s...the paint shop people! l...

increasing your customer’s lifetime value

connection manager - emotum · mobile roaming the...

fact sheet customercenter™ mobile loyalty application ·...

small business · you have only three seconds to capture...

always the customer’s first choice

mobile responsive website & lead conversion software ›...

helping clients banking: from lending that looks at the...

location done right: from the customer’s perspective ·...

specialty course optimizing customer’s service...

a customer’s journey - parasoft