The presentation slides used for our mobile summit session at eTail West 2016.

1. USING RESPONSIVE DESIGN
TO CREATE THE BEST POSSIBLE ECOMMERCE EXPERIENCE
FOR YOUR CUSTOMERS
DOMINIC CZARNOTA & KUMAR PADMANABHAN

2. ABOUT US
 Largest online retailer for wall art and home décor
products
 Family of international brands
o ART, ALLPOSTERS, ZENFOLIO
 Over 12 million customers in 120 countries
 17 languages in 24 domains
2

3. WHY ARE WE HERE?
Share our experience
 Shared similar frustration with our
customers
 Used different approach for each brand
 Failed fast
 Mobile strategies
o m.dot strategy (ALLPOSTERS)
o In-house breakpoint and fluid strategy
(ART)
o Native apps
WHAT WE DID?
3

4. KEY TAKEAWAYS
 Start small
 More than one solution
o Responsive design options can coexist
 Less is more
 Minor incremental changes
 Test, Measure, Optimize, & Succeed
4

5. ALLPOSTERS APPROACH – TAKE 1
 Began in October 2012
 Screen-scraping approach
o Faster time to market
 Launched in 3 weeks
 Didn’t work quite well
o Tracking
o Performance
o Quality
 Terminated in March 2013
5

6. ALLPOSTERS APPROACH – TAKE 2
 Lessons learned
o Third-party service
o Underestimated the effort
 New approach: API driven
 Re-launched the site (February 2014)
 30% increase in conversion
 Rolling out more international domains
 Continuous optimization
6

7. ALLPOSTERS – BEFORE – HOME PAGE
7

8. ALLPOSTERS – AFTER – HOME PAGE
TAKE 2TAKE 1
8
TAKE 2

9. ALLPOSTERS – BEFORE – GALLERY PAGE
9

10. ALLPOSTERS – AFTER – GALLERY PAGE
TAKE 2TAKE 1 10

11. ALLPOSTERS – BEFORE – PRODUCT PAGE
11

12. ALLPOSTERS – AFTER – PRODUCT PAGE
TAKE 2TAKE 1 12

13. ALLPOSTERS – RECAP
 Think about your customer
 Use your metrics to create goals
 m. approach
o Get to market quickly
o Understand drawbacks
 Understand what third-party
services offer
 Less is more
13

14. ART – APPROACH
14
 Brand new mobile approach
o Responsive design (breakpoints)
 Goals
o Increase conversion
o React quickly
 Built proof of concept
 Started with homepage
o Enabled us to test the approach
o A/B tested the page performance
and customer response

15. ART – BEFORE – HOME PAGE
15

16. ART – AFTER – HOME PAGE
16

17. ART – APPROACH
 Next step: gallery page
o Follow the customer
o Most visited page (BOTS and customers)
 Took 3 weeks to iterate
o Develop rapidly (remove/hide features)
 Results
o ~20% increase in conversion
o Revenue per visit up ~47%
17

18. ART – BEFORE – GALLERY PAGE
18

19. ART – AFTER – GALLERY PAGE
19

20. ART – APPROACH – NEW PLATFORM
 Identified a business opportunity
o Increase service rate and visibility of our
offerings
 Goals
o Introduce new tech stack
o Performance
o Create seamless user experience
o New responsive approach
20

21.  New JavaScript web client platform
o Node.js, React.js, & Fluxible.js
 New responsive approach
o Breakpoint and fluid strategy
 Solved SEO problem (SPA)
o Fluxible for isomorphic capability
o Zero impact to SEO after launch
21
SPA - Single Page Application
ART – APPROACH – NEW PLATFORM

22. ART – NEW PLATFORM – RESULTS
 30% lift in conversion from mobile
 26% increase in service rate from tablet
 Desktop is trailing
o Identified what is not working
o Optimize and relaunch A/B tests
 Project payback is less than a year
 Mobile revenue tripled (it’s working)
22

23. ART – BEFORE – PRODUCT PAGE
23

24. ART – AFTER – PRODUCT PAGE
24

25. ART – AFTER – PRODUCT PAGE
25

26. ART – PRODUCT PAGE – MOBILE
26

27. ART – RECAP
 Homepage & Gallery page
o Breakpoint approach
 Product page
o Fluid & breakpoint approach
o New platform
 Follow your customer
 Less is more
o Hide features as needed
27

28. SUMMARY – TAKEAWAYS
28
 Start small
 More than one solution
o Responsive design options can coexist
 Less is more
 Minor incremental changes
 Test, Measure, Optimize, & Succeed

29. THANKS
29