Internet Retailer Web Design 2014 - Product Page
- 1. 9 Questions for your product page
- 2. To create a world where everyone can embrace their inner geek, express their passions, and connect with one another
- 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. 1. Who is your customer?
- 5. Un Unlikely Geek D Digerati Geek Ub Uber Geek P Pop Geek Ut Utility Geek
- 6. 2. Where did they come from? (And how should I message them?)
- 9. Channel Targeting Channel Specific Trust Message 9
- 10. 3. What type of devices are they using?
- 12. Emphasis on search over navigation Clear call to action Optimized inputs
- 13. Modified Nav, Search, and Cart Swipe enabled Image carousel Optimized inputs And larger buttons
- 15. We now have multiple device layouts/sizes to target – consider your content carefully 15
- 16. 4. Do you know your user states?
- 17. Anonymous User Login call to action Email Sign-up 17
- 18. Logged in user/non-Geek Points Call customers by name Email Sign-up Prompt 18
- 19. Logged in user w/Geek Points Recognized as Geek Points User 19
- 20. 5. Are you maximizing your imagery?
- 21. Shoot Apparel on Models
- 22. Lifestyle shots engage customers
- 23. Use images and video to differentiate Embedded video above fold
- 24. 6. Is your copy more than a list of specs?
- 25. Product copy is an opportunity to let your brand voice shine through
- 26. 7. How do you encourage brand engagement?
- 28. Embedded social comments bring authenticity to the brand
- 29. 8. Does data guide your design process?
- 30. 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
- 31. 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
- 32. 9. Is your page fast enough?
- 33. 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 GlassesDirect.com and substantiated the Aberdeen study
- 34. 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,
- 35. 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
- 36. 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