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?

Hello@demacmedia.com

Matthew BertulliDemac Media

@mbertulli

Ben BurmasterSnuggle Bugz

@SnuggleBugz