Mobile Optimization that Actually Works
-
Upload
optimizely -
Category
Mobile
-
view
381 -
download
0
Transcript of Mobile Optimization that Actually Works
![Page 1: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/1.jpg)
Mobile Op*miza*on That Actually Works
Kyle Duford eCommerce Director Chrome Industries
@kyleduford
Peter McLachlan Founder and CPO
Mobify @b1tr0t !
![Page 2: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/2.jpg)
Chrome Industries
Kyle Duford eCommerce Director Chrome Industries
@kyleduford
![Page 3: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/3.jpg)
Why Mobile
![Page 4: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/4.jpg)
“One day, all this informa<on —telecommunica<on, connec<vity
— will be in your pocket.
![Page 5: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/5.jpg)
Prolifera<on of Devices
![Page 6: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/6.jpg)
Everyone’s Doing It
Tweet Update Snap Chat Text Call Search Read !
![Page 7: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/7.jpg)
Part of the Equa<on
![Page 8: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/8.jpg)
Types of Mobile
GOLITE.COM! TREKBIKES.COM!
PINCH&AND&ZOOM&
THENORTHFACE.COM! PATAGONIA.COM!
M.SITES'
BURTON.COM!RAPHA.CC!
RESPONSIVE)
![Page 9: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/9.jpg)
Using Data to Understand Mobile
• CONSISTENCY IN ALL ELEMENTS • General look and feel • Path to purchase • Search • Naviga*on • Merchandising (eCommerce sites) • Photos • Descrip*ons • Calls to ac*on
![Page 10: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/10.jpg)
• Run sta*s*cal analysis on anything (and everything) • Because data doesn’t care if you’re mobile – It just documents and logs
• Then check to see where the points differ, if any, from desktop, tablet
• Develop your hypothesis • Test
Data is S<ll King
![Page 11: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/11.jpg)
Tes<ng
• Iden*fy problem/issue • Hypothesize • Ideas • Tes*ng • Analyze • Implement or re-‐test
![Page 12: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/12.jpg)
Using Data to Understand Mobile
• NO SECRET TO BUILDING TEAMS • No need for a special “Mobile Ops Team” • Think like a customer • Use your devices for UAT tes*ng • Give the ability to try, fail and learn
![Page 13: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/13.jpg)
Test. Learn. Repeat.
![Page 14: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/14.jpg)
Mobify
Peter McLachlan Founder and CPO
Mobify @b1tr0t !
![Page 15: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/15.jpg)
eCommerce Web Experience Acceleration Platform
![Page 16: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/16.jpg)
Mul<-‐device web: eCommerce
55%45%
Smartphone / TabletDesktop
Source: IBM “Thanksgiving Digest”
For many eCommerce sites, smartphone + tablet traffic has reached or exceeded 45% of total traffic.
By the end of 2014 we expect these channels to represent the majority of visits to most eCommerce sites
![Page 17: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/17.jpg)
Time spent by device for eCommerce
41%
59%
Smartphone / TabletDesktop
Source: Business Insider
Even though smartphone + tablet visitors represent 45% of traffic, they can account for 59% of *me spent on your website
This emphasizes the importance of the user experience on these channels
![Page 18: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/18.jpg)
Conversion rates: US retail eCommerce Cyber Monday 2013
0.0%
1.5%
3.0%
4.5%
6.0%SmartphoneTabletDesktop
Source: IBM Digital Analytics Benchmark
Cyber Monday data from 2013 reveals the untapped opportunity of tablets for eCommerce
Cyber Monday 2013 eCommerce conversion rates by plaUorm
![Page 19: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/19.jpg)
28%
72%
Source: Google Mobile Playbook
Google’s data shows that 72% of tablet owners make purchases from their device on a weekly basis
Conversion rates: Black Friday
![Page 20: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/20.jpg)
Emerging opportunity: the tablet
“As the tablet market matures, the advantages of desktop and laptop browsing will erode… To engage customers who use tablets, companies should adopt tablet-‐specific strategies instead of offering experiences iden*cal to those of smartphones or desktops and laptops.”
!
-‐ Adobe 2013 Mobile Consumer Survey Results
![Page 21: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/21.jpg)
Why A/B test? A refresher
• A/B tes*ng is a discount leading indicator: it is a crucial part of a robust internal UX process • A/B tes*ng tells you the “what”, and helps your UX analysts & designers find the “why” and the “how” through rapid experimenta*on and quan*ta*ve analysis !
![Page 22: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/22.jpg)
Strategies for mul<-‐screen tes<ng
Two main strategies • Test the change on all screen sizes at the same *me • Test the change on a specific group of screen sizes: “breakpoints”
![Page 23: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/23.jpg)
Tes<ng on all screen sizes at the same <me
• May or may not be technically feasible • Will provide cross-‐channel feedback • but also cross-‐channel noise
![Page 24: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/24.jpg)
Tes<ng on all screen sizes at the same <me
Feasibility • Possible only if UX change is relevant across all screen sizes • Only applicable if there is uniform UX between views at different screen sizes
![Page 25: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/25.jpg)
Tes<ng on all screen sizes at the same <me
Advantages • Provides cross-‐channel data • shorter total test dura*on
• May offer some maintenance advantages
![Page 26: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/26.jpg)
Tes<ng on all screen sizes at the same <me
Disadvantages
• Costly for • resources • *me to design test
• Technically challenging • changes must work & be QA approved across breakpoints
• or be designed & tested as separate HTML snippets
![Page 27: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/27.jpg)
Tes<ng at a single breakpoint
• Focus your test, taking into account: • probable user context & intent • interac*on metaphor • device capabili*es • device limita*ons
• Can be a complete template varia*on or minor UX change
![Page 28: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/28.jpg)
Feasibility • Can be done regardless of whether you have a unified UX across smartphone/tablet/desktop • Works for Responsive Web Design, Separate Mobile Websites or RESS approaches to suppor*ng mobile !
Tes<ng at a single breakpoint
![Page 29: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/29.jpg)
Advantages • Focus on probable visitor context • Focus on probable visitor use case • Fewer developer resources to deploy any given test • Less QA required to deploy a test • Succeed or fail faster !
Tes<ng at a single breakpoint
![Page 30: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/30.jpg)
Disadvantages • Can result in diverging requirements for different screen sizes that are difficult to merge back into your codebase • though an adap*ve templa*ng solu*on can help you “power up” your templates
!
!
Tes<ng at a single breakpoint
![Page 31: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/31.jpg)
What should you test? A few hints…
![Page 32: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/32.jpg)
Larger targets
![Page 33: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/33.jpg)
Removed hover events
![Page 34: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/34.jpg)
Results
For Coastal Contacts, through analysis in Google Analy*cs, Mobify’s team iden*fied that smartphone visitors seemed confused about naviga*on.
An A/B test of a simplified naviga*on structure revealed that smartphone conversions could be improved by as much as 50% with an improved naviga*on structure
![Page 35: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/35.jpg)
Closing <ps
• Always A/A test • Don’t jump to conclusions too early • If at first it fails… try again • Smaller changes: segment by device type & screen-‐size for each test
![Page 36: Mobile Optimization that Actually Works](https://reader030.fdocuments.us/reader030/viewer/2022032700/55d4f903bb61eb6e1f8b46c3/html5/thumbnails/36.jpg)
Mobile Op*miza*on That Actually Works
Kyle Duford eCommerce Director Chrome Industries
@kyleduford
Peter McLachlan Founder and CPO
Mobify @b1tr0t !