Choosing a Mobile Design for Internet Retail

With the rapid and growing rise of mobile commerce in the United States and around the world, retailers of all sizes are finding value in targeting cellphone and tablet platforms. There exist numerous approaches which seek to guide the design and development of the mobile websites and native mobile applications which enable consumers to use their mobile devices to purchase from and interact with retailers online. These approaches fall largely into three major categories: responsive web design (RWD), mobile-first development, and native mobile application development. This document evaluates these strategies on the bases of user experience and business performance and provides recommendations for their implementation and adoption, with a specific focus on the Magneto e-commerce platform.

Transcript

1. Choosing a Mobile Design Strategy for Internet Retail Avi Romanoff August 2013 Friday, August 16, 13
2. The mission Friday, August 16, 13
3. The mission • What are the leading strategies for mobile commerce development? • Which is right for The Cadence Watch Company? • Which is right for other companies? • How do these strategies work with Magento? Friday, August 16, 13
4. The Market Source: Pew Internet & American Life, Gartner Friday, August 16, 13
5. The Market • It’s BIG • 56% of American adults own a smartphone (81% by 2015) • 34% of American adults own a tablet Source: Pew Internet & American Life, Gartner Friday, August 16, 13
6. The Market • It’s BIG • 56% of American adults own a smartphone (81% by 2015) • 34% of American adults own a tablet • And it’s ge ing bigger • 44% global growth in 2013 • 24% of US e-commerce is m-commerce by 2015 Source: Pew Internet & American Life, Gartner Friday, August 16, 13
7. How to proceed? Three primary strategies Friday, August 16, 13
8. How to proceed? Fully responsive web Mobile-first web Native apps Friday, August 16, 13
9. Fully responsive web Friday, August 16, 13
10. Fully responsive web • Circa May 2010 Friday, August 16, 13
11. Fully responsive web • Circa May 2010 • One website to rule them all: • smartphone = desktop = tablet Friday, August 16, 13
12. Fully responsive web • Circa May 2010 • One website to rule them all: • smartphone = desktop = tablet • CSS3 (No IE < 8) Friday, August 16, 13
13. Fully responsive web • Circa May 2010 • One website to rule them all: • smartphone = desktop = tablet • CSS3 (No IE < 8) • Code re-use, style re-use Friday, August 16, 13
14. Fully responsive web • Circa May 2010 • One website to rule them all: • smartphone = desktop = tablet • CSS3 (No IE < 8) • Code re-use, style re-use Friday, August 16, 13
15. Fully responsive web frameworks • Twi er Bootstrap • Most watched repo on GitHub • ZURB Foundation • Yahoo! Pure • Responsive is fast & easy Friday, August 16, 13
16. Responsive Magento Friday, August 16, 13
17. Responsive Magento • Easy to find on Magento Connect Friday, August 16, 13
18. Responsive Magento • Easy to find on Magento Connect • Pricing: $0-250 Friday, August 16, 13
19. Responsive Magento • Easy to find on Magento Connect • Pricing: $0-250 • Open-source & closed-source Friday, August 16, 13
20. Responsive Magento • Easy to find on Magento Connect • Pricing: $0-250 • Open-source & closed-source • Check GitHub first • h ps://github.com/zeljkoprsa/waterlee-boilerplate Friday, August 16, 13
21. Responsive Magento • Easy to find on Magento Connect • Pricing: $0-250 • Open-source & closed-source • Check GitHub first • h ps://github.com/zeljkoprsa/waterlee-boilerplate • Customization is hard (as always) Friday, August 16, 13
22. Why not responsive? Friday, August 16, 13
23. Why not responsive? • Browser compatibility Friday, August 16, 13
24. Why not responsive? • Browser compatibility • Master of none • (You can always always write separate web/desktop) Friday, August 16, 13
25. Why not responsive? • Browser compatibility • Master of none • (You can always always write separate web/desktop) • The difference isn’t screen size • It’s tap vs. click Friday, August 16, 13
26. Why not responsive? • Browser compatibility • Master of none • (You can always always write separate web/desktop) • The difference isn’t screen size • It’s tap vs. click • Speed (how fast is fast enough?) Friday, August 16, 13
27. How to proceed? ✓ Fully responsive web Mobile-first web Native apps Friday, August 16, 13
28. Mobile-first web Friday, August 16, 13
29. Mobile-first web • Build mobile web first, then build desktop web Friday, August 16, 13
30. Mobile-first web • Build mobile web first, then build desktop web • Embrace constraints • smartphone < tablet < desktop Friday, August 16, 13
31. Mobile-first web • Build mobile web first, then build desktop web • Embrace constraints • smartphone < tablet < desktop • Focus on core features Friday, August 16, 13
32. Mobile-first web • Build mobile web first, then build desktop web • Embrace constraints • smartphone < tablet < desktop • Focus on core features • Build up, not down Friday, August 16, 13
33. Mobile-first Magento? Friday, August 16, 13
34. Mobile-first Magento Nope :( Friday, August 16, 13
35. Mobile-first Magento Unless you want to... Friday, August 16, 13
36. Mobile-first Magento • Magento was not designed as mobile-first • Theming is extremely involved • You probably won’t start from scratch • No real support in the wild for this strategy • You probably don’t want to do this Friday, August 16, 13
37. Why not mobile-first? Friday, August 16, 13
38. Why not mobile-first? • It takes more time • Especially on Magento Friday, August 16, 13
39. Why not mobile-first? • It takes more time • Especially on Magento • You probably already have a website Friday, August 16, 13
40. Why not mobile-first? • It takes more time • Especially on Magento • You probably already have a website • Your developers work on both mobile & web Friday, August 16, 13
41. Why not mobile-first? • It takes more time • Especially on Magento • You probably already have a website • Your developers work on both mobile & web • Double work? Friday, August 16, 13
42. How to proceed? ✓ Fully responsive web ✓ Mobile-first web Native apps Friday, August 16, 13
43. Native apps Who? Friday, August 16, 13
44. Native apps 1% 3% 5% 39% 52% US Mobile OS Market Share (April 2013) Source: comScore Android iOS BlackBerry Windows Other Friday, August 16, 13
45. Native apps Friday, August 16, 13
46. Native apps • iOS & Android (mainly) Friday, August 16, 13
47. Native apps • iOS & Android (mainly) • Superior UX (feels like a phone app) Friday, August 16, 13
48. Native apps • iOS & Android (mainly) • Superior UX (feels like a phone app) • Superior performance Friday, August 16, 13
49. Native apps • iOS & Android (mainly) • Superior UX (feels like a phone app) • Superior performance • Superior features (full camera, location, etc) Friday, August 16, 13
50. Native apps • iOS & Android (mainly) • Superior UX (feels like a phone app) • Superior performance • Superior features (full camera, location, etc) • Superior integration (App store, home screen) Friday, August 16, 13
51. Native Magento apps Friday, August 16, 13
52. Native Magento apps • Magento Mobile Friday, August 16, 13
53. Native Magento apps • Magento Mobile • $699/year/platform (iPhone, iPad, Android) • $99 per additional deployment • $6,995/year/platform for the source code Friday, August 16, 13
54. Native Magento apps • Magento Mobile • $699/year/platform (iPhone, iPad, Android) • $99 per additional deployment • $6,995/year/platform for the source code • WYSIWYG • Admin panel integration • Basic color scheme and branding support Friday, August 16, 13
55. Native Magento apps What are they like? Friday, August 16, 13
56. Native Magento apps All apps downloaded from the iTunes U.S. store and tested on an iPhone 5 running iOS 6.1.4 on August 13th, 2013. Friday, August 16, 13
57. Native Magento apps • Only 18 on the U.S. iPhone App Store All apps downloaded from the iTunes U.S. store and tested on an iPhone 5 running iOS 6.1.4 on August 13th, 2013. Friday, August 16, 13
58. Native Magento apps • Only 18 on the U.S. iPhone App Store • 12 (66%) wouldn’t even open All apps downloaded from the iTunes U.S. store and tested on an iPhone 5 running iOS 6.1.4 on August 13th, 2013. Friday, August 16, 13
59. Native Magento apps • Only 18 on the U.S. iPhone App Store • 12 (66%) wouldn’t even open • 2 of the surviving 6 crashed All apps downloaded from the iTunes U.S. store and tested on an iPhone 5 running iOS 6.1.4 on August 13th, 2013. Friday, August 16, 13
60. Native Magento apps • Only 18 on the U.S. iPhone App Store • 12 (66%) wouldn’t even open • 2 of the surviving 6 crashed • Only 1 was optimized for iPhone 5 All apps downloaded from the iTunes U.S. store and tested on an iPhone 5 running iOS 6.1.4 on August 13th, 2013. Friday, August 16, 13
61. Native Magento apps • Only 18 on the U.S. iPhone App Store • 12 (66%) wouldn’t even open • 2 of the surviving 6 crashed • Only 1 was optimized for iPhone 5 • This is probably not Magento’s fault All apps downloaded from the iTunes U.S. store and tested on an iPhone 5 running iOS 6.1.4 on August 13th, 2013. Friday, August 16, 13
62. Why not native apps? Source: Forrester Friday, August 16, 13
63. Why not native apps? • Superior cost Source: Forrester Friday, August 16, 13
64. Why not native apps? • Superior cost • ~ $50,00-$150,000 • ...per app! Source: Forrester Friday, August 16, 13
65. Why not native apps? • Superior cost • ~ $50,00-$150,000 • ...per app! • Android, iOS, maintenance Source: Forrester Friday, August 16, 13
66. Why not native apps? • Superior cost • ~ $50,00-$150,000 • ...per app! • Android, iOS, maintenance • PhoneGap and Titanium might help... Source: Forrester Friday, August 16, 13
67. How to proceed? ✓ Fully responsive web ✓ Mobile-first web ✓ Native apps Friday, August 16, 13
68. This is CadenceWatch ✓ Fully responsive web ✓ Mobile-first web ✓ Native apps Friday, August 16, 13
69. Cadence Case Study Friday, August 16, 13
70. Cadence Case Study • Currently: • Magento theme for mobile users • Not responsive, not mobile-first • No plans for a native app Friday, August 16, 13
71. Cadence Case Study • Currently: • Magento theme for mobile users • Not responsive, not mobile-first • No plans for a native app • How’s has this been working for them? Friday, August 16, 13
72. Cadence Case Study No 33% Yes 67% Would you download a Cadence smartphone app? Friday, August 16, 13
73. Cadence Case Study 16% 22% 12% 20% 30% Why not? Use too infrequent/specific Prefer mobile browser Prefer PC/tablet Unspecified Other Friday, August 16, 13
74. Cadence Case Study No 20% Yes 80% Have you used your smartphone to order from online retailers? Friday, August 16, 13
75. Cadence Case Study No 50% Yes 50% Cadence has a mobile website. Have you ever used it? Friday, August 16, 13
76. Cadence Case Study Unlikely 13% Likely 87% How likely are you to use it in the future? Friday, August 16, 13
77. Cadence Case Study 26% 13% 19% 42% Why not? Prefer PC/Tablet Perfer desktop version (on mobile) I buy too infrequently Other Friday, August 16, 13
78. How to proceed? Three primary strategies Friday, August 16, 13
79. How to proceed? Fully responsive web Mobile-first web Native apps Friday, August 16, 13
80. Large businesses Friday, August 16, 13
81. Large businesses • Pull out all the stops • 10/10 of the top online retailers are Friday, August 16, 13
82. Large businesses • Pull out all the stops • 10/10 of the top online retailers are • If you have the budget, go mobile web & native Friday, August 16, 13
83. Large businesses • Pull out all the stops • 10/10 of the top online retailers are • If you have the budget, go mobile web & native • Mobile first probably not so useful Friday, August 16, 13
84. Large businesses • Pull out all the stops • 10/10 of the top online retailers are • If you have the budget, go mobile web & native • Mobile first probably not so useful • Responsive might be useful • Microso , Starbucks, etc. Friday, August 16, 13
85. Small businesses Friday, August 16, 13
86. Small businesses • Go responsive • Saves time & money • Mobile & web for the price of... 1 (and a bit) Friday, August 16, 13
87. Small businesses • Go responsive • Saves time & money • Mobile & web for the price of... 1 (and a bit) • If you’re not in a rush, go mobile first Friday, August 16, 13
88. Small businesses • Go responsive • Saves time & money • Mobile & web for the price of... 1 (and a bit) • If you’re not in a rush, go mobile first • When you have the money, go native • Android first • Then iOS Friday, August 16, 13
89. Thank you! Friday, August 16, 13