Internet Retailer Web Design 2014 - Product Page


Published on

This is a brief overview of questions you should ask yourself when reviewing your product detail page. The content was presented at the Internet Retailer Web Design conference.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Internet Retailer Web Design 2014 - Product Page

  1. 1. 9 Questions for your product page
  2. 2. To create a world where everyone can embrace their inner geek, express their passions, and connect with one another
  3. 3. 9 Questions for your product page 1. 2. 3. 4. 5. 6. 7. 8. 9. Who is your customer? Where did they come from? What type of device did they use? Do you know your user states? Does your imagery differentiate? Is your copy more than specs? How do you encourage brand engagement? Does data guide your decision process? Does your page load quickly?
  4. 4. 1. Who is your customer?
  5. 5. Un Unlikely Geek D Digerati Geek Ub Uber Geek P Pop Geek Ut Utility Geek
  6. 6. 2. Where did they come from? (And how should I message them?)
  7. 7. Geographic Targeting Targeted Promotional Messaging
  8. 8. Geographic Targeting Promotional Messaging 8
  9. 9. Channel Targeting Channel Specific Trust Message 9
  10. 10. 3. What type of devices are they using?
  11. 11. Emphasis on search over navigation Clear call to action Optimized inputs
  12. 12. Modified Nav, Search, and Cart Swipe enabled Image carousel Optimized inputs And larger buttons
  13. 13. We now have multiple device layouts/sizes to target – consider your content carefully 15
  14. 14. 4. Do you know your user states?
  15. 15. Anonymous User Login call to action Email Sign-up 17
  16. 16. Logged in user/non-Geek Points Call customers by name Email Sign-up Prompt 18
  17. 17. Logged in user w/Geek Points Recognized as Geek Points User 19
  18. 18. 5. Are you maximizing your imagery?
  19. 19. Shoot Apparel on Models
  20. 20. Lifestyle shots engage customers
  21. 21. Use images and video to differentiate Embedded video above fold
  22. 22. 6. Is your copy more than a list of specs?
  23. 23. Product copy is an opportunity to let your brand voice shine through
  24. 24. 7. How do you encourage brand engagement?
  25. 25. Social Sharing Customer submitted images
  26. 26. Embedded social comments bring authenticity to the brand
  27. 27. 8. Does data guide your design process?
  28. 28. Analytics • Form a hypothesis about your design change • Agree on what you will use to judge success whether conversion, RPV or even click through rates • Use A/B/MV testing to see how the customer responds • Let the analytics guide the design • Be consistent in your approach to interpreting the data
  29. 29. Original page emphasized what was out of stock vs in stock New Design presents the stock status in a cleaner presentation AB testing revealed that there was no significant difference between the two designs
  30. 30. 9. Is your page fast enough?
  31. 31. Why speed matters 2008 Aberdeen Study ‘ A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions’ 2009 Akamai Study • • • • • 47% of people expect a web page to load in two seconds or less. 40% will abandon a web page if it takes more than three seconds to load. 52% of online shoppers claim that quick page loads are important for their loyalty to a site. 14% will start shopping at a different site if page loads are slow, 23% will stop shopping or even walk away from their computer. 64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time. 2012 Tagman case study • Directly tied conversion rate/revenue to page performance for and substantiated the Aberdeen study
  32. 32. Site Monitoring • Evaluate internally vs externally served content – Pingdom, Alertsite, Keynote, Gomez, Neustar, etc. • Monitor page performance on different devices • Trend over time and overlay against traffic data • Not sure where to start? Use scoring sites – Yslow, Google PageSpeed Insights,
  33. 33. Opportunities • Evaluate page objects and look for opportunities to reduce page weight and server calls – Consolidate CSS/JS libraries – Use CSS Sprites for background images, buttons, etc. – Leverage a CDN - at least for static content • • • • • Leverage the local browser cache (expire headers) Leverage common libraries Consider tag management services Ensure 3rd party plugins are non-blocking on load Evaluate content areas and ensure you have a plan if the 3rd party fails to load
  34. 34. Summary 1. Use personas to help guide the creative discussion 2. Tailor your messaging based on the referral source 3. Optimize the page based on device capability (responsive/adaptive design or direct optimization) 4. Personalize content based on user state 5. Don’t scrimp on imagery – – – Shoot apparel on live models Leverage lifestyle imagery Invest in video for complex and/or best products 6. Use product copy to showcase your voice 7. Provide a forum for customer engagement – – Customer submitted content Social sharing 8. Leverage A/B testing to evaluate designs 9. Improve overall page load time to increase conversion
  35. 35. Questions? Steve Weiskircher @sweiskircher