Website
Our Journey from a single site to three device-specific sites,
back to a single responsive site
About me• Scottish• Geek• Favourite board game: Monopoly
@m
cmillanstu
Our Survey Says…
oWho has a responsive site?
oWho has a mobile site?
oWho is looking to move to responsive?
oWho is designing it now?
oWho is a retailer?
oWho’s going to try and sell me the perfect solution?
What we’ll cover…
o Schuh who?o Life in a multi-device worldo Why move to responsive?o How did we approach it?o The user journeyo Next Stepso Lessons Learned
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
Mobile Site
November 2011
Tablet Site November 2012
Responsive Pilot November 2013
Schuh Responsive June 2014
Trading Online2001
Site Timeline
P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12 P1 P2 P3 P4 P5 P6 P70%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
80%
48%
14%
31%
6%
21%
Traffic by device since Feb 2012
TabletMobileDesktop
Only 45% desktop by Christmas?
P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12 P1 P2 P3 P4 P5 P6 P7 p80%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
80%
48%
14%
31%
6%
21%
Traffic by device since Feb 2012
TabletMobileDesktop
20%
No single screensize has more than
market share[Mobify]
Why go responsive?
OK, first of all, what is “responsive design”?
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
Why go responsive?
How are we approaching it?
The R-Team. Who did what?
Start Small: Revenue taken between sites
£34£1 :
Analyse and Understand Site Usage
Understand customer journey
Understand customer technology usage
Set some ground rules
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
Build these in to your design process:
Mobile first
Stop, collaborate and listen
Test
Using EyeQuant for saliency analysis (before and after images)
The user Journey - Homepage
1366 px1024 px
640 px
Current site: 1024px
The user Journey – Product List Page
The user Journey – Product Page
The user Journey – Checkout
It’s fast, but that’s just a starting point.
App-like performance for all devices?
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
Schuh Sneak Peek
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.
Mobile Site
November 2011
Tablet Site November 2012
Responsive Pilot November 2013
Schuh Responsive June 2014
Trading Online2001
In Summary
Thank You
@mcmillanstu