You did your job. You intrigued your prospect. You captured their attention. Your call to action worked and they want to buy. Now. So they do it from their phone. Oops. Too bad you spent all of your time and effort designing that slick user interface that doesn’t work in mobile environments. Simply put, responsive design is critical to eCommerce success. Don’t believe us? Check out this presentation. You’ll be convinced and informed to respond yourself.

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