Schuh Responsive Website

Schuh Responsive:Lessons learned

@mcmillanstu

Stuart McMillan, Deputy Head of Ecommerce

#IRX15

A bit of schuh background

• Founded 1981

• 110 stores

• Multichannel

• Customer service focused

• Systems driven

This isn’t a crusade.

(or if it is, it’s certainly not a responsive design crusade)

#1 Why Change?

o Increased device diversity in our traffic.

o Tired mobile site, under-prioritised.

o Desktop site not touch-optimised.

o Desktop site under-utilising screen space.

o Inconsistent user experience.

o Development inefficiencies.

o Underperforming SEO.

Why change?

The simplest

change is no

change at all

*roughly calendar years 2012 -2015

*

320 px26%

768 px21%

1366 px16%

1280 px10%

1920 px4%

360 px3%

1440 px3%

1024 px3%

720 px2%

1600 px2%

Other10%

Jan 2014

320 px27%

768 px18%

1366 px12%

360 px10%

1280 px8%

375 px5%

1920 px4%

1440 px3%

1600 px1%

1024 px1%

Other11%

Jan 2015

Visit Share by Device Width(comparing when we started the build to a year later)

of our mobile customers have never shopped with us on anything but mobile.

Mobile is not just for browsing.

#2 Why Responsive Design?

o Single HTML*.

o Layout differences determined by CSS & JS.

o Using CSS media queries for broad breakpoints.

o Fluid transition between breakpoints.

o Mobile as our design starting point.

Why responsive?

*mostly

1. What do we define as responsive?

o Users don’t want a device-specific schuh experience.

o We wanted consistency to be the default, not an

accident of design.

o Google recommend responsive design.

o We want to reduce development overheads.

o We want to be future proof, if possible.

o We believed it was technically possible for

responsive to be the right solution.

Why responsive?

2. Why did we choose responsive design?

[Ethan Marcotte, 2014]

A note on feature parity…

“35% of

schuh

traffic

comes

from

natural

search”

#3 Planning

We set ground rules

1. Must be designed mobile first.

2. Must be fast.

3. Must be SEO friendly.

4. Must use the same HTML for all ‘variations’.

5. Must have service and content parity for all devices.

6. Must apply usability best practice.

7. Must have analytics planned from the start.

8. Should validate.

o Smartphone represents our largest audience segment

o They have the biggest hardware challenges

o Slow connection

o Small screen

o Slower hardware

o Technically challenging to down-scale an experience to

mobile

o Other devices can “afford” to pick up the overhead of up-

scaling from mobile

o We treat mobile as our baseline, if something is important

to how we do e-business it starts on mobile (SEO, for

example)

Mobile First

Mobile design is bleeding in to

desktop design (thankfully).

Mobile First

Think carefully, is your day-to-

day experience of your website

vastly different from your

customers experience of your

website?

Mobile First

2013 Eptica Mobile CX study lists the top 3 consumer pet-

hates:

o Sites that lack functionality compared to desktop sites.

o Sites that were slow to load.

o Sites that were difficult to navigate on a small screen.

Usability best practice for 2015/2016 must address these!

bare minimum

Mobile First - challenges

Design – Recognise our market position

Testing

A story on clarity…

Testing

#3 The Design

Homepage

Category Page

Product Page

The Fold

#4 Lessons Learned

Testing showed we had a winner

But how would it perform when it went live?

oDesktop +20%

oTablet +35%

oMobile +45%

Year on Year conversion change

first 6 months since launch:

We got lots of SEO wrong

o Managing the migration of URLs is paramount,

including:

o Redirects (301’s & 302’s).

o 404’s where appropriate.

o Making sure sitemaps are accurate.

o Make sure canonical tags are set up right.

o Make sure canonical tags are set up right.

o On our category pages we forgot about our

rel=prev/next tags for pagination.

o Our communication (and functional specifications

should have been more explicit about SEO matters).

We built a faster site

Mobile traffic

Desktop traffic

o A few things to think about:

o Perception is everything. It’s not about the numbers,

it’s about how the user perceives the speed of your

site.

o For mobile, the network layer is still very much the

major bottleneck. Optimising for available bandwidth is

key. Latency is an issue, 4G won’t fix this! (5G might)

o Eliminate any dependency which slows loading.

o We still have much more to do.

Speed Tips

Set up event tracking for form errors, to help identify user friction quickly

Can you measure the success or otherwise of your new site?

Analytics have been instrumental

o We should have done a better job at setting expectations

around initial traffic drops.

o We started the roll-out (test) in July but were willing to delay the

full launch. Couldn’t have done that in November.

o Split testing was essential for finding issues.

o Check, double check and triple check the digital marketing

aspects of the launch. Be prepared to spend more for a time.

o Build in remediation time in to future project plans.

Rollout

o We knew we’d have a temporary organic traffic

drop when the site was bedding in, but how big

would it be?

o Feed breakages.

o Tracking and tagging.

o SEO snagging. Bringing two sites together was

never going to be easy.

Unknowns

o Lots of split testing.

o Checkout Login.

o Delivery Option Selection.

o Site Speed. I think we can be 25% faster.

o SEO snagging.

o Account area.

o HTML tidy up.

To-Do List

It can be done!

The Future:Evolving the User Experience

Ask me something!

Stuart McMillan

Deputy Head of Ecommerce

@mcmillanstu #IRX15