How DiscoveryStore.com used Web 2.0 technologies to improve the purchase process

1. Succeeding in Today's Dynamic Business Climate
How DiscoveryStore.com used Web 2.0
technologies to improve the purchase process
Chris McFadden: Director, E-Commerce Systems Development
Larry Rosen: E-Commerce Development Lead
Discovery Communications, LLC

2. About Discovery
• Discovery Communications, LLC (“Discovery”) is
the number-one nonfiction media company
reaching more than 1.5 billion cumulative
subscribers in over 170 countries.
• Discovery's 100-plus worldwide networks (14
US) include Discovery Channel, TLC, Animal
Planet, Planet Green, Discovery Kids, The
Science Channel, and Discovery Health.
2

3. Discovery Commerce & DiscoveryStore.com
• Discovery Commerce helps consumers live a life of
Discovery by offering high-quality merchandise that
informs, excites and entertains.
• The division’s channels include a robust e-commerce
business, seasonal catalogs, DRTV, and domestic
licensing partnerships.
• At the DiscoveryStore.com customers can shop for an
expanded assortment of exclusive Discovery
merchandise including DVDs, Toys, and fan-gear.
• DiscoveryStore.com has more than 12 million unique
visitors annually, and reaches even more consumers
through a flourishing affiliate network and partnerships
with leading e-commerce sites such as Amazon.com.
3

4. Web 2.0 Enhancements
1. Customer Ratings &
Reviews
2. Add to Cart Pop-over
3. Dynamic Shopping Cart
4. Persistent Cart in Top
Hat
5. Single Page Checkout
tag cloud by Markus Angermeier
4

5. Customer Ratings & Reviews
5

6. Customer Reviews: Upgraded with Bazaarvoice
• Replaced home-grown rating and review functionality this year;
New functionality includes:
– Customers have profiles with all their submitted reviews
– Badging of reviewers: expert, top 10, staff, etc.
– Upload customer images and videos
– Finer tuned ratings: went from half star to tenths of star
– Multi-dimensional reviews based on product type
• Quality
• Educational Value
• Entertainment Value
• Construction
• Ease of Use
• Value Added Benefits
– New microsite with additional SEO benefits
– Outsourced moderation
– Ratings and reviews best practices
– Share products and reviews on Facebook, Digg, Delicious
6

7. Customer Reviews: Product Page
7

8. Customer Reviews: Microsite
8

9. Product Reviews: Lessons Learned
• Switching from unauthenticated to authenticated users
suppressed review volume
• Review quality and character count increased
• Integration using Javascript tags was relatively
straightforward but required collaborative UI design effort
• User registration integration was required with additional
validation
• Summary rating data needs to be imported to display on
product listing pages and for merchandising rules
• Reverse proxy resolved domain name issues:
– reviews.shopping.discovery.com/path? ->
shopping.discovery.com/reviews/path?
9

10. Checkout Redesign
10

11. Checkout Redesign: Goals
• Increase average order size
• Decrease cart and checkout abandonment
• Simplify and streamline checkout
• Create a more engaging user-experience
• Minimize business logic changes
11

12. Checkout Redesign: Approach
• Started analysis/design in Q1 2007
• Outsource the UI design and wire-frames
• Use in-house staff for implementation
• Review and prototype technology choices
– Dojo, Ajax, WCv6 FP2
• Minimize interdependencies to allow phased in
approach
• Do extensive testing at all stages of project
• Ensure both flows run concurrently
• Implement A/B testing to measure results
12

13. Checkout Redesign: Product Page
Features:
1. Add All Batteries
checkbox
2. Gift Wrap
checkbox
3. Accessories
checkboxes
Demo
13

14. Checkout Redesign: Add To Cart Popup
Features:
1. Add to Cart pop-over
– customer remains
on same page
2. Add All Batteries
checkbox
3. Gift Wrap checkbox
4. Show accessories
with options
5. Change quantity
6. Persistent cart
updates
7. Continue Shopping or
go to Checkout
14

15. Checkout Redesign: Shopping Cart
Features:
1. Add All Batteries
checkbox
2. Gift Wrap checkbox
3. Change quantity
4. Persistent cart
updates
5. Shipping & Tax
estimator
6. Coupons entry
7. Cart up-sells: rollover
and add to cart
8. Print cart
15

16. Checkout Redesign: Single Page Checkout
Part 1: Address Entry
Features:
1. Login or guest
2. Mini-cart displays cart
contents, shipping,
estimated tax & order
total
3. Ajax address
validation, no full page
refreshes
4. Remaining sections
remain hidden until
address is entered
16

17. Checkout Redesign: Single Page Checkout
Part 2: Shipping & Payment
Features:
1. No full page refreshes
2. Easy shipping options with
costs
3. Alternative payments: Gift
Cards, Bill Me Later & PayPal
17

18. Checkout Redesign: Order Confirmation
Features:
1. Printable receipt
2. Display full details of order
and line items
3. Allow creation of account for
guest users to save
information for next time
18

19. Checkout Redesign: Technology Choices
• WCv6 FP2 Web 2.0 components
– Upgrade to WCv6 and FP2 did not happen until July ‘08
– New components did not match our design requirements
– Programming model would require modification of business logic
– Additional overhead was not desirable
• Dojo Toolkit
– Too big and complex for our needs
– No previous experience with the toolkit
– Limited documentation available, no vendor support, and lack of
other books and online references
Custom Ajax solution using JavaScript, Ajax, and CSS
– Simple, lightweight, standards based solution
– Use existing unchanged business logic
– Use partial page refreshes - JSP fragments generate HTML
– JavaScript/CSS control display and event logic
19

20. Checkout Redesign: Lessons Learned
• Phase in major functionality incrementally as they are
completed and tested
• Be sure to A/B test –newer is not always better since
your existing checkout may be more mature, error free,
and more familiar to customers
• Prototype the basic functionality as early as possible to
determine technology choices: expect some trial and
error
• Allocate sufficient time for project due to criticality and
complexity of checkout process and the new technology
• Usability testing is vital in finding road-blocks in
purchasing flow
• Adjust implementation approach based on performance
impact
• Do extensive browser compatibility testing since
JavaScript is very browser dependent.
20
– Use analytics to determine which browsers to test

21. Checkout Redesign: Lessons Learned cont.
• Use small server side JSP fragments and partial page
refreshes to render sections of page
– This is faster, more reliable, and less browser dependent than
parsing XML with JavaScript to update HTML
• Chaining refreshes prevents timing issues on complex
pages such as a single page checkout
– More reliable than sending multiple requests and listening for
multiple responses
– Easier to develop and debug than event driven components
• Use of Ajax works well when using Akamai or other
caching on catalog pages
• Structure JavaScript code for readability
– Include all JavaScript in separate include files
• Provide some feedback to user such as “Loading..” when
making Ajax calls.
21

22. Checkout Redesign: Testing Approach
• Usability Testing
– External expert review of wireframes
– Wireframe testing in usability lab
– Live alpha testing in lab
• Functional Testing
– Test case creation and execution by internal QA
– Functional and browser compatibility testing by
external QA vendor in production
• A/B Testing
– Using web analytics to measure AOV & conversion
• Load testing using third-party
22

23. Questions?
• Chris McFadden: chris_mcfadden@discovery.com or
• Larry Rosen: larry_rosen@discovery.com
23