Hi.
Matthew BertulliCEO and Co-Founder
Demac Media
@mbertulli
Ben BurmasterPresident and Founder
Snuggle Bugz
@SnuggleBugz
About us
Some Of Our Clients
• Canada’s Baby Store• Began selling online in 2008• Magento Enterprise• Trajectory growth of 300-400%• By 2012, 1/3 of traffic was mobile
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.
6 MONTHS 1,500+ HOURS
NEARLY HALF OF
CONSUMERS USE MULTIPLE
DEVICES WHEN SHOPPING
* Internet Retailer
Today’s ThemeResponsive design has a
“multiplier effect” on many parts of your business both good and bad.
Mobile as % of RevenueDid going responsive even have an impact on mobile as a % of total revenue?
August (pre-responsive)
December (post-responsive)
Mobile Conversion RateDecember 2013:• Significant increase in
mobile conversion rate as compared to tablet and desktop.
• 52.51% increase. • Largest increase in
mobile CR of 2013.
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…
1Responsive requires far more planning.
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?
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
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
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
2User Interaction
parity across devices.
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
1. Responsive Design in eCommerce Requires a lot more planning.
SnuggleBugz – Since Launching Responsive
User Interaction Parity2
3Problems arising from responsive redesign.
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.
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
4Consistency across
communication channels.
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
1. Responsive Design in eCommerce Requires a lot more planning.
Communication Channel Consistency4
Examples of Responsive Email Display
1. Responsive Design in eCommerce Requires a lot more planning.
Communication Channel Consistency4
Examples of Responsive Email Display
5Overhead of
running responsive.
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.
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
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.
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
?
Questions?
Matthew BertulliDemac Media
@mbertulli
Ben BurmasterSnuggle Bugz
@SnuggleBugz
