RESPONSIVE
DESIGN
A FAD OR THE
FUTURE?
24TH OCTOBER 2013

CONVERSION CONFERENCE UK
LONDON

PAUL ROUKE
Founder & Director o...
ABOUT PRWD

Founder in 2004 by Paul Rouke
Conversion optimisation specialists

Head office in Manchester with clients
acro...
PRWD CLIENTS INCLUDE

@paulrouke

#ConvCon
TALK OVERVIEW

Why are retailers going responsive?
What business impact is it having?

7 guiding principles for cross devi...
WHY ARE RETAILERS GOING
RESPONSIVE?

@paulrouke

#ConvCon
THE CASE FOR THE USER

@paulrouke

#ConvCon
From a user perspective, a site built
using responsive design offers a high
quality experience. Sites not optimised
SECTIO...
We know that customers like shopping
on their phones and tablets, but most
e-commerce sites are hideous to use
SECTIONon a...
THE CASE FOR THE RETAILER

@paulrouke

#ConvCon
From the point of view of the site
owner, a site that uses responsive
design only needs to be built once SECTIONyou don't ...
THE IMPACT

@paulrouke

#ConvCon
@paulrouke

#ConvCon
@paulrouke

#ConvCon
@paulrouke

#ConvCon
TALK OVERVIEW

Why are retailers going responsive?
What business impact is it having?

7 guiding principles for cross devi...
7 GUIDING PRINCIPLES FOR
CROSS DEVICE OPTIMISATION

@paulrouke

#ConvCon
7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION

@paulrouke

Proposition

#ConvCon
Bench have 3 extremely persuasive USP
messages right at the top of their
desktop/tablet experience...
yet on mobile they h...
Schuh also have 3 very compelling proposition
messages (they have plenty to choose from but
that's another story!) that th...
YOUR
PROPOSITION
MESSAGES
SHOULD BE
SECTION TITLE
VISIBLE
SITEWIDE,
DEVICE WIDE

@paulrouke

In multiple A/B tests for dif...
7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION

@paulrouke

Proposition
Consistency

#ConvCon
ASOS are still one of the few major retailers who
provide visitors with a save/wish list style
feature that they genuinely...
ASOS recognise that their quick, intuitive and
user-centered suggestive search facility needs to
be available to visitors ...
TOOLS TO
STREAMLINE
THE USER
EXPERIENCE
SECTION
SHOULD BE TITLE
AVAILABLE ON
ALL DEVICES

If you have large product sets, ...
7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION

@paulrouke

Proposition
Consistency

Transparency

#ConvCon
John Lewis are one of the few retailers who allow
desktop visitors to scroll between product images
“on the image itself” ...
DO YOU HAVE A PERSUASIVE,
TRANSPARENT PAYMENT
PROPOSITION?

@paulrouke

#ConvCon
Paypal is widely known now and it's
secure. If there was a problem you
would know that they could help you.

SECTION TITLE...
I do like Paypal. I have funds in Paypal
from eBay, so it's just fun money, it's
not accounted for in my bank account
Brow...
Schuh are one of many retailers who provide PayPal
as a payment option. The issue prior to testing is
that users completel...
Firebox ensure that immediately from the shopping
basket visitors are made completely aware that
PayPal can be used as a p...
I like that straight away and it's telling
me the payment options straight way
before I've filled in my details. So I
don'...
PROVIDING
TRANSPARENCY
OF YOUR
SERVICE
SECTION TITLE
PROPOSITION IS
CRUCIAL FOR
CONVERSION

Make your payment options clea...
7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION

@paulrouke

Proposition
Consistency

Transparency
Findabilit...
KEY GOALS FOR NAVIGATION

SIMPLE
FAST
CLEAR
@paulrouke

#ConvCon
GUIDING
PRINCIPLES FOR
ECOMMERCE
FILTERING

Reduce clutter
Provide relevant filters

Make it quick & responsive to input
M...
Nixon provide an excellent example of providing a
rich filtered navigation system that works across
devices with their res...
FILTERING
SHOULD BE
QUICK,
INTUITIVE &
SECTION TITLE
CONSISTENT
ACROSS
DEVICES

Do not take away filter options for mobile...
7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION

@paulrouke

Proposition
Consistency

Transparency
Findabilit...
As part of Nixon’s responsive redesign, they have
adopted the commonly used three bar icon for their
primary navigation an...
They're asking for your phone number.
Presumably that's in case you're not
in. I'd rather not put my phone
number in becau...
Again you've got to fill in your name,
which is annoying.

A user on the ASOS website
@paulrouke

#ConvCon
The new responsive design for AllSaints is focussed
on limiting the amount of personal information
users have to provide d...
SIMPLIFY
NAVIGATION TO
SUIT MOBILE,
& STREAMLINE
SECTION TITLE
YOUR
CHECKOUT

Simplify the header of your mobile site
usin...
7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION

@paulrouke

Proposition
Consistency

Transparency
Findabilit...
Schuh probably have the most comprehensive &
flexible lists of delivery choices for customers of the
top tier UK (and perh...
Nixon provide desktop visitors with the flexibility to
choose their product viewing preference on
desktop – but why has th...
ASOS recognise that providing this flexibility in the
browsing experience for visitors is just as applicable
across device...
PROVIDE
FLEXIBILITY
FOR VISITORS,
IN BOTH VISUAL
SECTION
DISPLAY & TITLE
DELIVERY
OPTIONS

@paulrouke

Providing flexible ...
7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION

Proposition
Consistency

Transparency
Findability
Simplicity...
Not exactly breaking news, but
optimising site speed across devices,
particularly on mobile, is crucial in
improving user ...
Whether this is opening and using the mobile flyout
menu or applying various filters across any device,
the speed of the N...
The boxes are a bit too small to see.
Even if they doubled in size and you
had to scroll more

A user on the Topman websit...
Again the continue button is a bit
small, it was very close to the button
which takes you back a step.

A user on the Topm...
Topman provide mobile visitors with slim form
fields and small calls to action

The new Schuh checkout aims to do the oppo...
BIGGER MEANS
BETTER ON
MOBILE:
MAKE BUTTONS
SECTION TITLE
& FORM FIELDS
FINGER
FRIENDLY

@paulrouke

Users prefer larger f...
3 FINAL TAKEAWAYS

@paulrouke

#ConvCon
3 TAKEAWAYS

SECTION TITLE

Going responsive or not, the reality is that
brands need to have a mobile optimised
user exper...
THANKS FOR
LISTENING
Are there any questions?

24TH OCTOBER 2013

CONVERSION CONFERENCE UK
LONDON

PAUL ROUKE
Founder & Di...
SLIDES
bit.ly/PRWDRWD

10 KEY AREAS FOR ECOMMERCE
SECTION TITLE
bit.ly/PRWD10areas

CRO RESOURCE LIBRARY
bit.ly/CROresourc...
Upcoming SlideShare
Loading in …5
×

Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Conversion Conference 2013

3,827 views

Published on

PRWD's Founder & Director of Optimisation shares insights and tips on what are the 10 key areas that retailers should aim to get right to improve user experience, average order values and conversion rate. The insights are based on years of user testing and A/B test on brands like ASOS, The North Face, AllSaints, Amazon, Schuh, Speedo and Topshop

Published in: Design, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,827
On SlideShare
0
From Embeds
0
Number of Embeds
343
Actions
Shares
0
Downloads
36
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Conversion Conference 2013

  1. 1. RESPONSIVE DESIGN A FAD OR THE FUTURE? 24TH OCTOBER 2013 CONVERSION CONFERENCE UK LONDON PAUL ROUKE Founder & Director of Optimisation @paulrouke @paulrouke #ConvCon
  2. 2. ABOUT PRWD Founder in 2004 by Paul Rouke Conversion optimisation specialists Head office in Manchester with clients across Europe Work on-going with brands to analyse, review, test and optimise site experiences Specialise in desktop, tablet & mobile UX & conversion optimisation @paulrouke #ConvCon
  3. 3. PRWD CLIENTS INCLUDE @paulrouke #ConvCon
  4. 4. TALK OVERVIEW Why are retailers going responsive? What business impact is it having? 7 guiding principles for cross device ecommerce optimisation Summary @paulrouke #ConvCon
  5. 5. WHY ARE RETAILERS GOING RESPONSIVE? @paulrouke #ConvCon
  6. 6. THE CASE FOR THE USER @paulrouke #ConvCon
  7. 7. From a user perspective, a site built using responsive design offers a high quality experience. Sites not optimised SECTIONfor mobile devices often display TITLE content that is difficult to navigate or too small to read. Maani Safa, innovation director at Somo @paulrouke #ConvCon
  8. 8. We know that customers like shopping on their phones and tablets, but most e-commerce sites are hideous to use SECTIONon a small screen. TITLE Responsive design - when done right provides for a simpler and faster experience. Maani Safa, innovation director at Somo @paulrouke #ConvCon
  9. 9. THE CASE FOR THE RETAILER @paulrouke #ConvCon
  10. 10. From the point of view of the site owner, a site that uses responsive design only needs to be built once SECTIONyou don't need to build a web version, TITLE a mobile version and a tablet version separately - so this usually saves time and money. Terence Eden, mobile industry consultant @paulrouke #ConvCon
  11. 11. THE IMPACT @paulrouke #ConvCon
  12. 12. @paulrouke #ConvCon
  13. 13. @paulrouke #ConvCon
  14. 14. @paulrouke #ConvCon
  15. 15. TALK OVERVIEW Why are retailers going responsive? What business impact is it having? 7 guiding principles for cross device ecommerce optimisation Summary @paulrouke #ConvCon
  16. 16. 7 GUIDING PRINCIPLES FOR CROSS DEVICE OPTIMISATION @paulrouke #ConvCon
  17. 17. 7 GUIDING PRINCIPLES FOR CROSS DEVICE ECOMMERCE OPTIMISATION @paulrouke Proposition #ConvCon
  18. 18. Bench have 3 extremely persuasive USP messages right at the top of their desktop/tablet experience... yet on mobile they have been removed: Mobile visitors still need to be persuaded so don’t remove USP’s to “save space” @paulrouke #ConvCon
  19. 19. Schuh also have 3 very compelling proposition messages (they have plenty to choose from but that's another story!) that they ensure they put in front of visitors irrespective of the device they are using Schuh feature the USP messages consistently in their sitewide footer on mobile @paulrouke #ConvCon
  20. 20. YOUR PROPOSITION MESSAGES SHOULD BE SECTION TITLE VISIBLE SITEWIDE, DEVICE WIDE @paulrouke In multiple A/B tests for different types of businesses (retail or not), user researched USP messages never fail to improve sitewide conversion rate Don’t make the mistake of assuming that having a simplified design on mobile means you should lose or hide USP messages On mobile, consider adding in USP messages to your primary tools/navigation menu to give them regular visibility Consider using the footer to promote USP’s on mobile & tablet – users will more often get down to this area by swiping without knowing how long the page is #ConvCon
  21. 21. 7 GUIDING PRINCIPLES FOR CROSS DEVICE ECOMMERCE OPTIMISATION @paulrouke Proposition Consistency #ConvCon
  22. 22. ASOS are still one of the few major retailers who provide visitors with a save/wish list style feature that they genuinely want people to use This is the type of feature that is typically removed on mobile experience, yet ASOS recognise the importance of this persuasive tool no matter which device visitors are using @paulrouke #ConvCon
  23. 23. ASOS recognise that their quick, intuitive and user-centered suggestive search facility needs to be available to visitors on different devices, including on mobile – few retailers usually provide this on mobile @paulrouke #ConvCon
  24. 24. TOOLS TO STREAMLINE THE USER EXPERIENCE SECTION SHOULD BE TITLE AVAILABLE ON ALL DEVICES If you have large product sets, providing intuitive filtering across devices is a must – don’t take away this key feature for mobile visitors If you provide suggestive search on your desktop site, provide visitors with this same user-centred experience on tablet & mobile In order to provide intuitive mega menus from your primary navigation on tablet devices, display the menu on the 1 st tap – replicating the mouse hover effect on desktop If you provide a wish-list or save feature, ensure that by logging in visitors can browse and shop when it suits them and where it suits them @paulrouke #ConvCon
  25. 25. 7 GUIDING PRINCIPLES FOR CROSS DEVICE ECOMMERCE OPTIMISATION @paulrouke Proposition Consistency Transparency #ConvCon
  26. 26. John Lewis are one of the few retailers who allow desktop visitors to scroll between product images “on the image itself” – this is more intuitive that having to click thumbnails They then provide clarity & transparency of how visitors on mobile can browse through image – using the device specific interactions#ConvCon affect to good @paulrouke
  27. 27. DO YOU HAVE A PERSUASIVE, TRANSPARENT PAYMENT PROPOSITION? @paulrouke #ConvCon
  28. 28. Paypal is widely known now and it's secure. If there was a problem you would know that they could help you. SECTION TITLE A user in moderated user testing @paulrouke #ConvCon
  29. 29. I do like Paypal. I have funds in Paypal from eBay, so it's just fun money, it's not accounted for in my bank account Browsing through the site it's not that clear that you can pay with Paypal A user in moderated user testing @paulrouke #ConvCon
  30. 30. Schuh are one of many retailers who provide PayPal as a payment option. The issue prior to testing is that users completely miss seeing the PayPal logo as it is lost within the other payment card logos When you are shopping on mobile, PayPal isn’t currently offered which is a missed opportunity – users expect the same @paulrouke options irrespective payment #ConvCon of the device they are shopping on
  31. 31. Firebox ensure that immediately from the shopping basket visitors are made completely aware that PayPal can be used as a payment option Firebox recognise that PayPal is a different and persuasive payment option for visitors @paulrouke #ConvCon
  32. 32. I like that straight away and it's telling me the payment options straight way before I've filled in my details. So I don't have to go upstairs and get my card, because it's got Paypal. A user on the Nixon shopping basket page @paulrouke #ConvCon
  33. 33. PROVIDING TRANSPARENCY OF YOUR SERVICE SECTION TITLE PROPOSITION IS CRUCIAL FOR CONVERSION Make your payment options clear and don't let PayPal get lost amongst your card types - its a completely different option for visitors that has its own persuasive influence Provide visibility & clarity of your delivery options & costs on your product page – on all devices Make the available payment options clear on your shopping basket Provide visitors on all devices with access to your delivery & returns information throughout checkout Within checkout, don’t hide delivery options within a dropdown – expose them all to allow visitors to make a choice @paulrouke #ConvCon
  34. 34. 7 GUIDING PRINCIPLES FOR CROSS DEVICE ECOMMERCE OPTIMISATION @paulrouke Proposition Consistency Transparency Findability #ConvCon
  35. 35. KEY GOALS FOR NAVIGATION SIMPLE FAST CLEAR @paulrouke #ConvCon
  36. 36. GUIDING PRINCIPLES FOR ECOMMERCE FILTERING Reduce clutter Provide relevant filters Make it quick & responsive to input Make it intuitive Make it consistent across devices Make options contextual Have a clear visual hierarchy Provide display choices @paulrouke #ConvCon
  37. 37. Nixon provide an excellent example of providing a rich filtered navigation system that works across devices with their responsive redesign Notice that by default the filters are hidden so as not to focus attention away from what is really going to persuade visitors to buy – the products and photography @paulrouke #ConvCon
  38. 38. FILTERING SHOULD BE QUICK, INTUITIVE & SECTION TITLE CONSISTENT ACROSS DEVICES Do not take away filter options for mobile visitors – users still want to find suitable products easily Keep dynamically updating the products in the filter set as users are making selections Ensure users can multi-select without refreshing their location Ensure sliders work on touch devices – so often they don’t and make this important feature redundant Provide a summary of filters applied on desktop & tablet, but simplify for mobile Ensure your filters are finger friendly for touches devices – more vertical space please! @paulrouke #ConvCon
  39. 39. 7 GUIDING PRINCIPLES FOR CROSS DEVICE ECOMMERCE OPTIMISATION @paulrouke Proposition Consistency Transparency Findability Simplicity #ConvCon
  40. 40. As part of Nixon’s responsive redesign, they have adopted the commonly used three bar icon for their primary navigation and other user options From our experience most average users now recognise this icon – some brands add in the word “menu” at the side of it to make it even more clear @paulrouke #ConvCon
  41. 41. They're asking for your phone number. Presumably that's in case you're not in. I'd rather not put my phone number in because sometimes you get all these PPI phone calls. A user on the John Lewis website @paulrouke #ConvCon
  42. 42. Again you've got to fill in your name, which is annoying. A user on the ASOS website @paulrouke #ConvCon
  43. 43. The new responsive design for AllSaints is focussed on limiting the amount of personal information users have to provide during checkout Make it quick and non-intrusive for new customers to get through checkout and you will improve brand experience & repeat business @paulrouke #ConvCon
  44. 44. SIMPLIFY NAVIGATION TO SUIT MOBILE, & STREAMLINE SECTION TITLE YOUR CHECKOUT Simplify the header of your mobile site using the commonly seen tools icon – don’t worry users are used to this now! In checkout, limit the amount of data you request to the bare minimum – ask the question: “do we actually use this data?” In checkout, don’t ask visitors to enter the same information more than once Disable the native auto fill feature on tablet and mobile – dismissing these suggestions can be fiddly and frustrating for users Use the approach “progressive disclosure” to limit the amount of information shown up front – let users choose what they want @paulrouke #ConvCon
  45. 45. 7 GUIDING PRINCIPLES FOR CROSS DEVICE ECOMMERCE OPTIMISATION @paulrouke Proposition Consistency Transparency Findability Simplicity Flexibility #ConvCon
  46. 46. Schuh probably have the most comprehensive & flexible lists of delivery choices for customers of the top tier UK (and perhaps worldwide) retailers This level of flexibility for customers will play an extremely important role in persuading customers to keep coming back to Schuh @paulrouke #ConvCon
  47. 47. Nixon provide desktop visitors with the flexibility to choose their product viewing preference on desktop – but why has this feature been removed for mobile visitors? @paulrouke #ConvCon
  48. 48. ASOS recognise that providing this flexibility in the browsing experience for visitors is just as applicable across devices, so they don’t remove this on mobile @paulrouke #ConvCon
  49. 49. PROVIDE FLEXIBILITY FOR VISITORS, IN BOTH VISUAL SECTION DISPLAY & TITLE DELIVERY OPTIONS @paulrouke Providing flexible delivery options to suit your customers is becoming more and more important, and a potential differentiator Provide the same delivery options across devices – its the same user at the end of the day Some users like to see more detail, where others like to have a more visual experience – provide display options for visitors Maintain consistency of your feature set when it comes to browsing options for visitors #ConvCon
  50. 50. 7 GUIDING PRINCIPLES FOR CROSS DEVICE ECOMMERCE OPTIMISATION Proposition Consistency Transparency Findability Simplicity Flexibility Usability @paulrouke #ConvCon
  51. 51. Not exactly breaking news, but optimising site speed across devices, particularly on mobile, is crucial in improving user experience and conversion rates @paulrouke #ConvCon
  52. 52. Whether this is opening and using the mobile flyout menu or applying various filters across any device, the speed of the Nixon browsing experience is excellent and really helps generate a positive, enjoyable attitude when shopping. @paulrouke #ConvCon
  53. 53. The boxes are a bit too small to see. Even if they doubled in size and you had to scroll more A user on the Topman website on a mobile device @paulrouke #ConvCon
  54. 54. Again the continue button is a bit small, it was very close to the button which takes you back a step. A user on the Topman website on a mobile device @paulrouke #ConvCon
  55. 55. Topman provide mobile visitors with slim form fields and small calls to action The new Schuh checkout aims to do the opposite – deep form fields and large, almost full width calls to action buttons @paulrouke #ConvCon
  56. 56. BIGGER MEANS BETTER ON MOBILE: MAKE BUTTONS SECTION TITLE & FORM FIELDS FINGER FRIENDLY @paulrouke Users prefer larger form fields that don’t require precision pressing on mobile Don’t be shy about providing big, full width buttons on mobile – its a clearer call to action and easier to press Give your primary calls to action breathing space, don’t cram other actions around them Don’t neglect the importance of having a quick loading website, particularly for mobile visitors #ConvCon
  57. 57. 3 FINAL TAKEAWAYS @paulrouke #ConvCon
  58. 58. 3 TAKEAWAYS SECTION TITLE Going responsive or not, the reality is that brands need to have a mobile optimised user experience to stay competitive and not lose mobile sales Users don’t care whether your site is mobile optimised or responsive – they just want the same tools and features for browsing and filtering across all devices – and they don’t want to have to zoom in and out! Provide both device specific user interactions and give visitors the ability to choose whether they have a richer or simpler browsing experience @paulrouke #ConvCon
  59. 59. THANKS FOR LISTENING Are there any questions? 24TH OCTOBER 2013 CONVERSION CONFERENCE UK LONDON PAUL ROUKE Founder & Director of Optimisation @paulrouke @paulrouke #ConvCon
  60. 60. SLIDES bit.ly/PRWDRWD 10 KEY AREAS FOR ECOMMERCE SECTION TITLE bit.ly/PRWD10areas CRO RESOURCE LIBRARY bit.ly/CROresources @paulrouke #ConvCon

×