Presentation I did at Conversion Conference London 2013, discussing schuh's move from desktop, mobile & tablet optimised sites to one single responsive site

1. Our Journey from a single site
to three device-specific
sites, back to a single

2. About me
• Scottish
• Geek
• Favourite board game: Monopoly

4. Our Survey Says…
o Who has a responsive site?
o Who has a mobile site?
o Who is looking to move to responsive?
o Who is designing it now?
o Who is a retailer?
o Who‟s going to try and sell me the perfect solution?

5. What we‟ll cover…
o
o
o
o
o
o
o
Schuh who?
Life in a multi-device world
Why move to responsive?
How did we approach it?
The user journey
Next Steps
Lessons Learned

6. Ecommerce







Mature online business.
Schuh.co.uk
UK mobile app, UK mobile site, Irish mobile site
UK tablet site
Irish site, French site, EU site
Branch309.co.uk
Amazon, Ebay, Viva la Diva trading partners
 Well integrated with rest of business
 Stores play an important role

7. Site Timeline
Mobile Site
November 2011
Trading Online
2001
Responsive Pilot
November 2013
Tablet Site
November 2012
Schuh Responsive
June 2014

8. Traffic device since Feb 2012
Traffic byby device since Feb 2012
100%
100%
6%
6%
90%
90%
21%
21%
14%
14%
80%
80%
70%
70%
31%
31%
60%
60%
50%
50%
40%
40%
Tablet
Tablet
Mobile
Mobile
80%
80%
Desktop
Desktop
30%
30%
48%
48%
20%
20%
10%
10%
0%
0%
P1
P1
P2
P2
P3
P3
P4
P4
P5
P5
P6P6 P7P7 P8 P8 P9 P9 P10P10P11P11 P12P1 P1P2 P2P3
P12
P3
P4
P4
P5
P5
P6
P6
P7
P7
p8
Only 45% desktop by Christmas?

9. No single screen
size has more than
20%
market share
[Mobify]

10. Why go responsive?

11. OK, first of all, what is
“responsive design”?

12. Why go responsive?
o Better user experience on different devices
o Consistent User Experience, ensure feature parity.
o Improved development efficiency
o Improved search performance
o Opportunity to apply best practice

13. How are we approaching it?

14. The R-Team. Who did what?

15. Start Small: Revenue taken between sites
£1
:
£34

16. Analyse and Understand Site Usage
Understand
customer journey
Understand
customer
technology usage

17. Set some ground rules
Build these in to your design process:
1. Must be fast (no slower than current tablet site*)
2. Must be SEO friendly
3. Must use the same HTML for all „variations‟
4. Must have service and content parity for all devices
5. Must apply usability best practice
6. Must have analytics planned from the start
7. Should validate
* Just over 2 secs for DomLoad via. 2Mbps

18. Mobile first

19. Stop, collaborate and listen

20. Test
Using EyeQuant for saliency analysis (before and after images)

21. The user Journey - Homepage
1024 px
1366 px
640 px
Current site: 1024px

22. The user Journey – Product List Page

23. The user Journey – Product Page

24. The user Journey – Checkout

25. It‟s fast, but that‟s just a starting point.
App-like performance for all devices?

26. Next Steps
•
•
•
•
•
•
•
•
•
•
•
•
Branch 309 currently in build
Homepage, product list page and help section in test
Reflect on the Branch 309 design process
Plan Schuh, keeping it as similar to B309 as possible
Launch End of November
Expert review of Branch309 as soon as it is launched
Sign-off of Schuh designs by end of November
As Branch 309 build tails off, Schuh build starts
Staggered launch of Schuh UK responsive, replacing tablet site first
Release version Schuh 1.1 ASAP, releasing to Branch 309 if possible
Roll out to all other Schuh sites (IE, EU)
Massively increase CRO throughput

27. Schuh Sneak Peek

28. Lessons learned so far
• Take enough time to fully understand your customers – we initially went with 3 breakpoints, but
in retrospect, and given enough time to research, we would have liked to have added in another two
(at least), which would allow us to capture smartphone landscape/portrait & tablet landscape/portrait.
• Another example; take a look at the various iPhone/iPad screen resolutions in your analytics
(which is supposed to have a fixed resolution), this give you an insight into the moving target
you are aiming for.
• Avoid Scope Creep – this is an entire site redesign, and as such, it is duty bound that the various
customers who are involved in the project will forget something, and will only bring this to the table
late in the process.
• Communication is key – improving communications between teams (and in particular, between the
retail & development arms of the company) is pivotal to the success of an efficient
research, specification, design & development process. Less-than-perfect communication resulted in
us adding a sizable chunk of time to our project process.
• What happens next? – we had invested so much time into the actual redesign process, that we
hadn‟t put enough thought into “how do we prove that responsive works?”. Some focused thinking
on A/B testing to prove the merits of a responsive design from the beginning would have allowed our
development colleagues to design their infrastructure with this in mind.

29. In Summary
Mobile Site
November 2011
Trading Online
2001
Responsive Pilot
November 2013
Tablet Site
November 2012
Schuh Responsive
June 2014

30. Thank You
@mcmillanstu