2. Hi.
Matthew Bertulli
CEO and Co-Founder
Demac Media
@mbertulli
Ben Burmaster
President and Founder
Snuggle Bugz
@SnuggleBugz

4. About us

5. Some
Of Our
Clients

7. • Canada’s Baby Store
• Began selling online in 2008
• Magento Enterprise
• Trajectory growth of 300-400%
• By 2012, 1/3 of traffic was mobile

8. Some Context (our story)
• Combined redesign with improved infrastructure / server
environment to support responsive
• Lots of bumps & bruises and the lessons that come from them
• Cornerstone piece of long term “omni-channel” strategy
We’re going to use the
2013 SnuggleBugz.ca
responsive redesign project
and results to give some
context to this talk.

9. 6 MONTHS
1,500+ HOURS

10. NEARLY HALF OF
CONSUMERS USE MULTIPLE
DEVICES WHEN SHOPPING
* Internet Retailer

11. Today’s Theme
Responsive design has a
“multiplier effect” on many parts
of your business both good and bad.

12. Mobile as %
of Revenue
Did going responsive even
have an impact on mobile
as a % of total revenue?
August (pre-responsive)
December (post-responsive)

13. Mobile
Conversion
Rate
December 2013:
• Significant increase in
mobile conversion rate
as compared to tablet
and desktop.
• 52.51% increase.
• Largest increase in
mobile CR of 2013.

14. User Interaction parity across devices.
Problems arising from responsive redesign.
Consistency across communication channels.
Overhead of running responsive.
1 Responsive requires far more planning.
2
3
4
5
THE 5 THINGS…

15. 1
Responsive requires
far more planning.

16. 1. Responsive Design in eCommerce
Requires a lot more planning.
Responsive Requires More Planning1
Part 1: What are the desired outcomes from going responsive?
Part 2: What impact is a responsive site going to have on my business
back-office functions?
Part 3: Small changes can have massive impact on a regular site.
Every change now requires you to think of more screen sizes.
Part 4: Can easily spend hundreds / thousands of hours fine tuning user
interactions on each screen size. What are your limits?

17. 1. Responsive Design in eCommerce
Requires a lot more planning.
Responsive Requires More Planning1
You start your planning with user interactions.
What are they? How many?
Normal Sites
• Content Pages / Templates
• Registration / Login
• Account Management

18. 1. Responsive Design in eCommerce
Requires a lot more planning.
Responsive Requires More Planning1
eCommerce Sites
• Content Templates
• Registration / Login
• Shopping Cart
• Wish List
• Registry
• Checkout
• Rewards Points
• Account Management
• Order Management
• Product Reviews
• Product Listing Templates

19. 1. Responsive Design in eCommerce
Requires a lot more planning.
Responsive Requires More Planning1
Can a responsive redesign impact your business in
the back office?
Key: Your customers “touch” much more than your site.
Marketing
Processes
Customer
Service
Fulfillment
Retail Store
Impact

20. 2
User Interaction
parity across devices.

21. 1. Responsive Design in eCommerce
Requires a lot more planning.
User Interaction Parity2
Example: Think about how hard it is to pay on your phone! (digital wallet)
What is the best
way to handle
user interaction
parity?
Are there features
& functionalities
that belong on only
certain devices /
screen sizes and not
others?
Core differences in
the types of user
interactions.
(hover/mouse over,
drop down menus,
right click, complex
fields etc…)
ONE TWO THREE

22. 1. Responsive Design in eCommerce
Requires a lot more planning.
SnuggleBugz – Since Launching Responsive
User Interaction Parity2

23. 3
Problems arising from
responsive redesign.

24. 1. Responsive Design in eCommerce
Requires a lot more planning.
Challenges & Problems Encountered3
Screen sizes… oh screen sizes!! 130+ of them..
The first week post-launch was pretty hard on our
customer service team. Lots of inbound requests as
a result of new site problems.
Forgotten features…
yup, even after a lot of planning.

25. 1. Responsive Design in eCommerce
Requires a lot more planning.
Challenges & Problems Encountered3
• Snuggle Bugz had 5 employees dedicated to responsive testing once it was
deployed
• Reimagination of the desktop navigation

26. 4
Consistency across
communication channels.

27. 1. Responsive Design in eCommerce
Requires a lot more planning.
Communication Channel Consistency4
Responsive
Emails
More than doubled the amount of time required to
design and build an email message.
• Had to re-think everything.
• Totally new approach.
Image hosting overhaul
• SVG graphics and scripts
• Utilizing smybolset icon fonts

28. 1. Responsive Design in eCommerce
Requires a lot more planning.
Communication Channel Consistency4
Examples of Responsive Email Display

29. 1. Responsive Design in eCommerce
Requires a lot more planning.
Communication Channel Consistency4
Examples of Responsive Email Display

30. 5
Overhead of
running responsive.

31. 1. Responsive Design in eCommerce
Requires a lot more planning.
Overhead of Running responsive5
Customer
Service
Customer service and in-store associates now need to
have an understanding of responsive in order to handle
requests effectively.

32. 1. Responsive Design in eCommerce
Requires a lot more planning.
Overhead of Running responsive5
Multiple Images &
Key Site Assets
Train Your Team
in Responsive
• Produce Multiple
or Produce Smart
• What is it?
• Common problems

33. 1. Responsive Design in eCommerce
Requires a lot more planning.
Overhead of Running responsive5
Content Type Section Priority
Logo Branding Site Wide 1
New Products Rev Gen Site Wide 1
Customer Reviews Informative Page Specific 3
A new content strategy was developed to rank pieces of the
page and how they’re arranged since every device has
varying real estate.

34. 1. Responsive Design in eCommerce
Requires a lot more planning.
Overhead of Running responsive5
IE8 and Earlier
• Lack of support for CSS media queries
• We monitored our GA traffic to decide if this was a good use of
resources
• Usage of IE8 was 2.8% for February 2014
• National average for February 2014 is 4.34% according to Awio
Web Services

35. ?
Questions?
Hello@demacmedia.com
Matthew Bertulli
Demac Media
@mbertulli
Ben Burmaster
Snuggle Bugz
@SnuggleBugz