Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing

568 views

Published on

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
568
On SlideShare
0
From Embeds
0
Number of Embeds
252
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing

  1. 1. Responsive Design:Where, Why and How
  2. 2. Insert photo of speakerhere891 pixels h x 688 pixels wSenior Director, User ExperienceMagentoTonya Browning
  3. 3. Insert photo of speakerhere891 pixels h x 688 pixels wSenior Manager, Visual DesignMagentoErin Tozour
  4. 4. Insert photo of speakerhere891 pixels h x 688 pixels wManaging DirectorGorilla GroupBob Meyer
  5. 5. Insert photo of speakerhere891 pixels h x 688 pixels wDirector of Digital Marketing andE-Commerce at Peter MillarSarah Ward
  6. 6. Insert photo of speakerhere891 pixels h x 688 pixels wEVP, Co-FounderLyons Consulting GroupDavid Barr
  7. 7. Insert photo of speakerhere891 pixels h x 688 pixels wFounder,Gravity DepartmentBrendan Falkowski
  8. 8. Insert photo of speakerhere891 pixels h x 688 pixels wManaging DirectorGorilla GroupBob Meyer
  9. 9. Gorilla Group• Magento Gold Partner since 2008• Partner of the Year and Partner Excellence recipient• Design, Development, Strategy, Managed Services,Extensions• Bring true Responsive Design to the Magento Enterpriseplatform
  10. 10. Peter Millar• Fast-growing lifestyle brand of American luxury sportswear• Founded in 2001• Division of Richemont
  11. 11. The Engagement Conundrum• Reaching customers beyond the desktop isessential• The question is: how?
  12. 12. Mobile SitesMobile sites and Apps can make sense in some cases, butbring with them a number of potential drawbacks:• Separate design & development costs; separate codebases(desktop & mobile)• Ongoing maintenance and support needs• Look and function well only on those devices for which theywere created• Numerous SEO implications
  13. 13. Smartphone AppsMobile sites and Apps can make sense in some cases, butbring with them a number of potential drawbacks:• Over-crowded and fragmented marketplaces• Low user adoption / repeat usage• Ongoing development needs; frequent OS updates
  14. 14. Responsive DesignResponsive design offers a new, and constantly evolving,approach to cross-device engagement• Requires a single design/development instance• Single content set• Present “intentional experiences” across devices andplatforms• Numerous SEO and Social Sharing benefits• Lower lifetime maintenance costs
  15. 15. Project: Peter Millar• Needs: upgraded design and user experience;improve site performance; sustainable strategy forcross-channel engagement• Brand ambassadors on the fairways are a naturaldriver of mobile traffic• Limited internal IT resources• Magento and responsive design proved to be an idealsolution
  16. 16. Post-Launch Results• Desktop, tablet, and smartphone metrics have been upacross the board.• Mobile visits up 110%; total site visits 70%• AOV up 20%• 33% increase in conversion rate from organic search
  17. 17. Insert photo of speakerhere891 pixels h x 688 pixels wEVP, Co-FounderLyons Consulting GroupDavid Barr
  18. 18. • Ecommerce Digital Agency• Over 160 professionals within Retail Strategy, UX/CreativeDesign, Implementation, Hosting and Support• Magento Innovator of the Year and Partner Excellencerecipient• Responsible for some of Magento’s most successful, robustand sophisticated implementations and ecommerce sites• Customer centric in all we do
  19. 19. Behavior of US Mobile Users*• 50% use their smartphone to look up restaurants/bars• 31% to research or book travel• 76% watch video on their device• 80% visit social networks• 46% use mobile phones to research future purchases* Google, Dec 2012
  20. 20. The Case for Responsive Design• Mobile is critical and m.dot as secondary site was commonprior to 2012. RD is the current standard.• Apps can provide deep features but are not ideal for customeracquisition – RD will work for first time shoppers on multipleplatforms without download commitment of Apps• RD allows for iterative approach as new devices are releasedor approaches required (e.g., new form factors like “Fablet”)• RD provides upside of flexible experiences for consumers,with additional benefit of a single site for SEO and marketing• RD likely more costly up front, but less in the long run
  21. 21. lyonscg RD Process• Retail Strategy Analysis• Customer demographics and browse/buy behaviors• UX Analysis• Define a set of breakpoints based on target sizes withfeatures and content per size in mind• UX Production• Content diagrams in low and/or high fidelity dependingon the audience• UX production• Create detailed wireframes for the most restrictivebreakpoint and key pages (small first, then add)
  22. 22. What does it look like?
  23. 23. What does it look like?
  24. 24. Situation• Vanity is a fast-fashion brand with ~200 stores in 27 states• lyonscg Retail Strategy team analyzed existing static site• Mobile visits were on hockey stick growth curve• Mobile conversions were lacking• Younger demographic increasingly attempting purchase oniPhone and iPad without success
  25. 25. Responsive Design Results
  26. 26. Responsive Design Launch Results• iPhone is #1 source at 36% of trafficand increasing• 226% increase in YOY mobile traffic• 68% increase in mobile conversion• 314% increase in YOY mobile revenue• 20% increase in overall site conversion
  27. 27. Responsive Design Considerations• Analyze device traffic and click path behavior• Consider your vertical or category• Electronics vs. apparel feature sets and navigationelements have different needs• Browse vs. filter vs. search vs. locate• Consider your selling channels (store, catalog, online)• Brands with many stores require different engagementon tablet vs. mobile (more consideration of localization)• Tablet behavior = more “shopping” and often convert higherthan PC which builds the case for RD
  28. 28. Responsive Design Considerations• Development effort for RD > traditional site• Templates exist but don’t factor in all Magento functions• Templates are evolving quickly to meet huge demand• Plan for creative and development updates if usingtemplates• Multi-site deployments need design and technical disciplineas effort grows exponentially (2-4x)• RD is most effective when incorporated into a full siteredesign vs. bolting on to an existing website
  29. 29. Summary• Analyze• Manage to your audience (browse, filter, search, locate)• Plan for additional effort required for both creative anddevelopment• Single code base has many benefits• RD provides for a seamless brand experience on all devices– with focused experiences available per device type• Most effective as part of full site redesign
  30. 30. Brendan FalkowskiFounderGravity DepartmentFalkowski
  31. 31. GravityDept.com
  32. 32. Design Consulting For
  33. 33. Acumen Theme• Used by 1200+ stores• 3 years of updates• Ready-to-launch frontend• Made for customizationhttp://gravitydept.com/to/acumen-magento
  34. 34. Magento CertificationAdvisory Board Member
  35. 35. A day in the life
  36. 36. How much doesresponsive design cost?
  37. 37. $5,000?$20,000?$100,000?
  38. 38. Design is not a commodity.Design is a process.
  39. 39. “I don’t know...yet.”
  40. 40. Forming A Budget
  41. 41. 1. Evaluate Your Position2.3.
  42. 42. 1. Evaluate Your Position2. Set Goals and Ideals3.
  43. 43. 1. Evaluate Your Position2. Set Goals and Ideals3. Make the Business Case
  44. 44. Needs assessments helpyou budget realistically.
  45. 45. What is responsivedesign’s value?
  46. 46. Creating value beatsavoiding cost.
  47. 47. Device Spectrum3″ 5″ 7″ 10″ 13″ 15″ 24″ 30″Smartphone Tablet Laptop Desktop
  48. 48. Resource RequirementsExpensiveFixedWidth SiteResponsive Site
  49. 49. 3″ 5″ 7″ 10″ 13″ 15″ 24″ 30″Smartphone Tablet Laptop DesktopResponsive SiteFixed Width Site
  50. 50. EconomicalMobileSiteFixedWidth SiteResponsive SiteResource Requirements
  51. 51. 3″ 5″ 7″ 10″ 13″ 15″ 24″ 30″Smartphone Tablet Laptop DesktopResponsive SiteFixed Width SiteMobile Site
  52. 52. High ValueMobileSiteiPhoneAppAndroidAppiPadAppFixedWidth SiteResponsive SiteResource Requirements
  53. 53. 3″ 5″ 7″ 10″ 13″ 15″ 24″ 30″Smartphone Tablet Laptop DesktopResponsive SiteFixed Width SiteMobile SiteiPhone AppAndroid AppiPad App
  54. 54. Should capabilitiesvary by context?
  55. 55. Content Parity:Access to the same informationregardless of device.
  56. 56. Functional Parity:Access to the same featuresregardless of device.
  57. 57. Don’t limit accessbased on screen size.
  58. 58. Resource Allocation
  59. 59. When should you invest ina multi-device frontend?
  60. 60. 10% – 40%range of mobile visitors
  61. 61. 20% – 25%average mobile visitors
  62. 62. Which browsers / devicesshould you support?
  63. 63. Support:Dedicating resourcesto a platform.
  64. 64. Support is not:• Blocking unsupported platforms• Every platform is identical
  65. 65. IE8 and OperaNot supported, still functional
  66. 66. Data ≠ Analysis
  67. 67. Good + WidespreadBrowsers• Revenue majority• Expanding segment• High growth potential90%
  68. 68. Good + WidespreadBrowsers• Revenue majority• Expanding segment• High growth potential• Revenue minority• Shrinking segment• Low growth potentialBad + UnderusedBrowsers90% 10%
  69. 69. ROI from90%Loss of10%>
  70. 70. Mobile is yourbiggest opportunity.
  71. 71. Process Changes
  72. 72. ResponsiveDesign FundamentalsResponsiveCommerce12 months 6 monthsOvercoming the Skills Gap
  73. 73. Estimate: 3 monthsTimeline for Skinny TiesActual: 8 months
  74. 74. http://www.netmagazine.com/features/top-25-responsive-sites-2012
  75. 75. Choose a design / frontendpartner wisely.
  76. 76. Case Study:Skinny Ties
  77. 77. skinnyties.com
  78. 78. gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
  79. 79. October 7Year Over Year ResultsMarch 255 ½ months
  80. 80. Quantity78.0%Average OrderValue20.8%Transactions57.8%
  81. 81. 90.6%Revenue
  82. 82. RevenuePhone + Tablet211.8%RevenueLaptop + Desktop77.6%
  83. 83. RevenueiPad224%RevenueiPhone473%RevenueAndroid187%
  84. 84. 5.3xValue of iPhone vsAndroid shoppers
  85. 85. For the SEO Folks
  86. 86. Revenue fromOrganic Search73.4%Visits fromOrganic Search79.8%
  87. 87. Sustained growth or a flash?
  88. 88. Quantity78.0%Average Order Value20.8%Transactions57.8%Revenue – iPad224%Revenue – iPhone473%Revenue – Android187%YOY Impact of Responsive Designfor Skinny Ties
  89. 89. Conclusions
  90. 90. Responsive design is nota novelty or trend.
  91. 91. It’s good design and smartbusiness.
  92. 92. Tomorrow, 11:15amTechnical Track
  93. 93. Q & A

×