5 Things You Need to Know About Responsive Design in eCommerce

50 %
50 %
Information about 5 Things You Need to Know About Responsive Design in eCommerce
Technology

Published on March 11, 2014

Author: demacmedia

Source: slideshare.net

Description

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.

Hi. Matthew Bertulli CEO and Co-Founder Demac Media @mbertulli Ben Burmaster President 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 Theme Responsive design has a “multiplier effect” on many parts of your business both good and bad.

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

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.

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…

1 Responsive 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

2 User 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

3 Problems 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

4 Consistency 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

5 Overhead 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 Bertulli Demac Media @mbertulli Ben Burmaster Snuggle Bugz @SnuggleBugz

Add a comment

Related presentations

Related pages

Ten Things You Need to Know About Responsive Design

Hier sollte eine Beschreibung angezeigt werden, diese Seite lässt dies jedoch nicht zu.
Read more

5 Things to Know About Responsive Design and eCommerce ...

So what do eCommerce professionals need to know? Here are 5 things to know about responsive design ... responsive design is the fact that you are ...
Read more

What You Need to Know About Responsive Web Design ...

What You Need to Know About Responsive Web Design. ... people talking about Responsive Web Design. If you’re not ... 5 most important things for ...
Read more

What You Need to Know About Responsive Web Design

What You Need to Know About Responsive Web Design ... Here are some things to know when you opt for responsive web ... the perhaps more complex needs of ...
Read more

5 Things You Need to Know About Google's Mobile Changes ...

5 Things You Need to Know About Google ... things you need to know to stay ahead of ... consumers’ needs by having responsive/mobile sites ...
Read more

The 5 best tools for responsive design | Webdesigner Depot

What are your top 5 tools for responsive design? Let us know in ... If you can develop a responsive website using ... I agree that you need to know the ...
Read more

5 Things to Know About Ecommerce

5 Things to Know About Ecommerce ... at five things you may not know about ecommerce ... that have a responsive design. If you want to bring ...
Read more

Static VS Responsive Design: What You Need to Know

... “responsive” versus “static” design are two terms you need to know! ... liquid-responsive-and-static-web-design. (5 ... things very difficult ...
Read more

Responsive Web Design Examples — Responsive Web Design

Inspirational examples of responsive web design. ... Responsive Design Techniques. Now that we've mastered ... some of the things you need to be ...
Read more