Paul Rouke Director of Optimisation at Prwd spoke at #PRWDReveal an Conversion Optimisation event in Manchester about the trend of retailers going responsive. Paul covers the 7 guiding principles for cross device optimisation; Visibility, Consistency, Transparency, findability, Simplicity, Flexibility, and usability. The talk covers all seven using real life examples from Lovehoney, Bench, Schuh, ASOS, John Lewis, Firebox, Nixon, Allsaints and Topman.

1. RESPONSIVE
DESIGN
A FAD OR THE
FUTURE?
17TH OCTOBER 2013
PRWD REVEAL
MANCHESTER
PAUL ROUKE
Founder & Director of
Optimisation
@paulrouke
@PRWD
#PRWDReveal

2. TALK OVERVIEW
Why are brands going responsive?
What business impact is it having?
7 guiding principles for cross device
conversion optimisation
3 key takeaways
@PRWD
#PRWDReveal

3. WHY ARE BRANDS GOING
RESPONSIVE?
@PRWD
#PRWDReveal

4. THE CASE FOR THE USER
@PRWD
#PRWDReveal

5. 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
@PRWD
#PRWDReveal

6. 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
@PRWD
#PRWDReveal

7. THE CASE FOR THE BUSINESS
@PRWD
#PRWDReveal

8. 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
@PRWD
#PRWDReveal

9. THE IMPACT
@PRWD
#PRWDReveal

10. @PRWD
#PRWDReveal

11. @PRWD
#PRWDReveal

12. @PRWD
#PRWDReveal

13. 7 GUIDING PRINCIPLES FOR
CROSS DEVICE OPTIMISATION
@PRWD
#PRWDReveal

14. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
CONVERSION
OPTIMISATION
@PRWD
Visibility
#PRWDReveal

15. 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@PRWD space”
“save
#PRWDReveal

16. 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
@PRWD
#PRWDReveal

17. YOUR
PROPOSITION
MESSAGES
SHOULD BE
SECTION TITLE
VISIBLE
SITEWIDE,
DEVICE WIDE
@PRWD
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
#PRWDReveal

18. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
CONVERSION
OPTIMISATION
@PRWD
Visibility
Consistency
#PRWDReveal

19. ASOS are still one of the few major retailers who
provide visitors with a save/wish list style
feature that they genuinely want visitors 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 @PRWD are #PRWDReveal
visitors
using

20. 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
@PRWD
#PRWDReveal

21. 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
@PRWD
#PRWDReveal

22. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
CONVERSION
OPTIMISATION
@PRWD
Visibility
Consistency
Transparency
#PRWDReveal

23. 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 to good affect
@PRWD
#PRWDReveal

24. DO YOU HAVE A PERSUASIVE,
TRANSPARENT PAYMENT
PROPOSITION?
@PRWD
#PRWDReveal

25. 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
@PRWD
#PRWDReveal

26. 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
@PRWD
#PRWDReveal

27. 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 is even
less prominent to visitors due its relative reduction
in size compared to the @PRWD
primary checkout button
#PRWDReveal

28. 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
@PRWD
#PRWDReveal

29. 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 Firebox shopping basket page
@PRWD
#PRWDReveal

30. 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
@PRWD
#PRWDReveal

31. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
CONVERSION
OPTIMISATION
@PRWD
Visibility
Consistency
Transparency
Findability
#PRWDReveal

32. KEY GOALS FOR NAVIGATION
SIMPLE
FAST
CLEAR
@PRWD
#PRWDReveal

33. GUIDING
PRINCIPLES FOR
ECOMMERCE
FILTERING &
BROWSING
Reduce clutter
Provide relevant filters
Make it quick & responsive to input
Make it intuitive
Make it consistent across devices
Have a clear visual hierarchy
Provide display choices
@PRWD
#PRWDReveal

34. 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
@PRWD
#PRWDReveal

35. 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 & content 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!
@PRWD
#PRWDReveal

36. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
CONVERSION
OPTIMISATION
@PRWD
Visibility
Consistency
Transparency
Findability
Simplicity
#PRWDReveal

37. 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
@PRWD
#PRWDReveal

38. 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
@PRWD
#PRWDReveal

39. Again you've got to fill in your name,
which is annoying.
A user on the ASOS website
@PRWD
#PRWDReveal

40. 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
@PRWD
#PRWDReveal

41. 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
If there is a valid reason you are asking for
data, explain this to the user – this is
usually enough to satisfy them
@PRWD
#PRWDReveal

42. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
CONVERSION
OPTIMISATION
@PRWD
Visibility
Consistency
Transparency
Findability
Simplicity
Flexibility
#PRWDReveal

43. Schuh probably have the most comprehensive &
flexible lists of delivery choices for customers from
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
@PRWD
#PRWDReveal

44. 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?
@PRWD
#PRWDReveal

45. ASOS recognise that providing this flexibility in the
browsing experience for visitors is just as applicable
across devices, so they don’t remove this feature on
mobile
@PRWD
#PRWDReveal

46. PROVIDE
FLEXIBILITY
FOR VISITORS,
IN BOTH VISUAL
SECTION
DISPLAY & TITLE
DELIVERY
OPTIONS
@PRWD
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 across devices
#PRWDReveal

47. 7 GUIDING
PRINCIPLES FOR
CROSS DEVICE
ECOMMERCE
OPTIMISATION
Visibility
Consistency
Transparency
Findability
Simplicity
Flexibility
Usability
@PRWD
#PRWDReveal

48. Not exactly breaking news, but
optimising site speed across devices,
particularly on mobile, is extremely
important in improving user experience
and conversion rates
@PRWD
#PRWDReveal

49. 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.
@PRWD
#PRWDReveal

50. 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
@PRWD
#PRWDReveal

51. 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
@PRWD
#PRWDReveal

52. 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
@PRWD
#PRWDReveal

53. BIGGER MEANS
BETTER ON
MOBILE:
MAKE BUTTONS
SECTION TITLE
& FORM FIELDS
FINGER
FRIENDLY
@PRWD
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
#PRWDReveal

54. 3 FINAL TAKEAWAYS
@PRWD
#PRWDReveal

55. 3 TAKEAWAYS
SECTION TITLE
@PRWD
Businesses need to have/develop a mobile
optimised user experience to stay
competitive and not lose mobile sales
Users don’t actually care whether a
website is mobile optimised or responsive
– they just want the same key tools and
features across all devices – without having
to zoom in and out!
Users need to be persuaded to take action
no matter what device they are visiting on
– good usability & persuasive design needs
to remain central to online experiences
across desktop, tablet and mobile
experiences
#PRWDReveal

56. THANKS FOR
LISTENING
Are there any questions?
17TH OCTOBER 2013
PRWD Reveal
MANCHESTER
PAUL ROUKE
Founder & Director of
Optimisation
@paulrouke
@PRWD
#PRWDReveal