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