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. 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. PRWD CLIENTS INCLUDE
@paulrouke
#ConvCon

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. WHY ARE RETAILERS GOING
RESPONSIVE?
@paulrouke
#ConvCon

6. THE CASE FOR THE USER
@paulrouke
#ConvCon

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. 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. THE CASE FOR THE RETAILER
@paulrouke
#ConvCon

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. THE IMPACT
@paulrouke
#ConvCon

12. @paulrouke
#ConvCon

13. @paulrouke
#ConvCon

14. @paulrouke
#ConvCon

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. 7 GUIDING PRINCIPLES FOR
CROSS DEVICE OPTIMISATION
@paulrouke
#ConvCon

17. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION
@paulrouke
Proposition
#ConvCon

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. 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. 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. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION
@paulrouke
Proposition
Consistency
#ConvCon

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. 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. 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. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION
@paulrouke
Proposition
Consistency
Transparency
#ConvCon

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. DO YOU HAVE A PERSUASIVE,
TRANSPARENT PAYMENT
PROPOSITION?
@paulrouke
#ConvCon

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. 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. 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. 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. 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. 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. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION
@paulrouke
Proposition
Consistency
Transparency
Findability
#ConvCon

35. KEY GOALS FOR NAVIGATION
SIMPLE
FAST
CLEAR
@paulrouke
#ConvCon

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. 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. 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. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION
@paulrouke
Proposition
Consistency
Transparency
Findability
Simplicity
#ConvCon

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. 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. Again you've got to fill in your name,
which is annoying.
A user on the ASOS website
@paulrouke
#ConvCon

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. 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. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION
@paulrouke
Proposition
Consistency
Transparency
Findability
Simplicity
Flexibility
#ConvCon

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. 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. 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. 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. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION
Proposition
Consistency
Transparency
Findability
Simplicity
Flexibility
Usability
@paulrouke
#ConvCon

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. 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. 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. 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. 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. 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. 3 FINAL TAKEAWAYS
@paulrouke
#ConvCon

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. THANKS FOR
LISTENING
Are there any questions?
24TH OCTOBER 2013
CONVERSION CONFERENCE UK
LONDON
PAUL ROUKE
Founder & Director of
Optimisation
@paulrouke
@paulrouke
#ConvCon

60. SLIDES
bit.ly/PRWDRWD
10 KEY AREAS FOR ECOMMERCE
SECTION TITLE
bit.ly/PRWD10areas
CRO RESOURCE LIBRARY
bit.ly/CROresources
@paulrouke
#ConvCon