Footwear retailer Schuh has just launched a new responsive site, but previously used its outlet site, Branch309, as a pilot for this. 

The development of this site, and the lessons learned, have been applied to the main site, and highlight the advantages of 'mobile-first' thinking. 

In other words, designing for the simplicity of the mobile experience has benefits for desktop users too. 

Using extracts from our Mobile Web Design and Development Best Practice Guide, I'll describe Shuh's journey towards responsive design. 

The case for mobile

The case should hardly need making these days, but you can see from the graph below that the past two years have seen a major traffic shift towards mobile and tablet.

Schuh typically sees around a 1% movement from desktop towards mobile every month, although the adoption of mobile and tablet happens faster at Christmas.

The business attributes this to an increase in the number of devices in circulation but also due to the number of people off work having the opportunity to use their device. On a day-to-day level, it is not unusual for there to be 12% fewer visits to desktop devices on a Sunday compared to Friday, on a proportional basis.

Here's the latest traffic split for Schuh, which underlines the need to cater for all device types. 

The increasing mobile traffic led Schuh to evaluate the user experience that the main site provided on a mobile device: the team decided that the website was, quite frankly, unusable.

Schuh launched its first mobile site in November 2011 before tablets were a significant traffic contributor. The site had the occasional update but constantly lagged behind the desktop site; mobile may be a growing traffic segment but it is still overshadowed by desktop traffic.

In mid-2012 the business could see that tablet was becoming an increasingly important traffic source. Although there wasn’t as much of it as there was mobile traffic, it performed far better.

So, a tablet site was launched in November 2012. It’s a good looking site, which made the business think hard about producing a higher quality design that is nice to interact with.

Stuart McMillan:

I think the tablet site was perhaps our biggest step change towards a truly user-centric approach to design. The site has many faults, but I think it has been an important step on our path to digital maturity.

In January 2013, Schuh started to think more seriously about a responsive site. The business has an outlet site, www.Branch309.co.uk, which was often neglected. Like Schuh, it had an increasingly mobile audience and in 2011, it had many mobile-specific usability problems.

The business wanted to ensure that Branch309 was more suitable for an audience using a wider variety of devices and screen sizes, but the comparatively lower traffic volume meant that it couldn’t justify separate, device-specific websites.

The lower volume nature of the site also meant that there was greater willingness to take a risk, and a new responsive site seemed like a great option. It would also act as a pilot for a future Schuh responsive site.

The timeline would give Schuh a responsive pilot before Christmas 2013, then looking towards a Schuh responsive site in mid-2014 – giving a timeline like this:

Branch309 is a much simpler offering than Schuh, there are fewer products, fewer delivery options, fewer features in general.

The planning process

Before Schuh even started planning responsive, it had a look at the mobile site.

Moving to responsive was obviously going to take a while and Schuh wanted to ensure that the business wasn’t losing out too badly on mobile in the meantime.

The web team walked through the core journey and came up with a list of quick usability wins that could be made to improve the user’s experience until the new site was ready. It didn’t take long to plan or execute and was good for the conversion rate.

These quick wins gave breathing space to not rush in to a responsive site for Schuh. The analytics data gave context, then the business set some ground rules, established what was important before starting the design process:

  1. Must be designed mobile first.
  2. Must apply usability best practice.
  3. Must have service and content parity for all devices.
  4. Must use the same HTML for all ‘variations’.
  5. Must be fast.
  6. Must be SEO friendly.
  7. Must have analytics planned from the start.
  8. Should validate.

The next step was to conduct some usability research. Schuh engaged an agency to carry out some moderated user testing of the core journey over desktop, mobile and tablet.

The videos and analysis that came out of that process were invaluable; the team could clearly see where its interface strengths and weaknesses were, as well as the inconsistencies between the sites.

It could then add to the objectives of the site: ensure that all high-priority friction points identified in the review are fixed in the new site.

It would be hard to overstate the importance of approaching the project in a mobile-first way. It isn’t a thought process that comes naturally, and Schuh had to work hard to change its mindset.

For example, whenever mock-ups were presented, they would typically be shown desktop first. Stuart McMillan would then re-arrange the mock-ups so that mobile was always talked about first. 

Whenever someone would talk about a concern they had with the site, he would always reach for the mobile design and ask them to clarify. They would inevitably say “I meant the desktop layout”, meaning they hadn’t considered mobile.

It’s an easy trap to fall into: we all work in front of a desktop computer of some sort; we may use mobile devices when away from our desk, but when we’re carrying out the business of improving websites, we do so from large screens. It’s just easier.

Stuart:

So, a top tip from me: find a way to be disruptive to people’s desktop-first thinking. I believe increasing adoption of mobile browsing is starting to change people’s expectations of web design.  Simpler is better’ really would appear to be the case.

Approaching it mobile first really helped us with our design. It helped us eliminate unnecessary UI elements, whereas in the past we would have included them just because we felt we had plenty of pixels to spare. This simpler design philosophy really helped us focus on user attention, to aid this we have started to use EyeQuant, which is an algorithmic version of eye tracking; it programmatically simulates how the human eye will look at a page.

A stripped down approach

Using insights from eye tracking, Stuart looked at features like calls to action on product pages:

In the example overleaf of the Branch309 basket page, eye tracking predicts that user attention will be focused on the product and the main call to action. At first glance this may look good but it shows that customers might not notice the delivery method picker.

This would cause a problem as choosing a delivery method is mandatory before proceeding.

I was concerned that this could cause some user frustration. We then revisited the design, simply adding a slightly higher contrast background to the heading. Eye tracking indicates that this should be enough to increase its visibility. 

We have event tracking for the error where the customer does not choose the delivery option; A/B testing verifies that there is a problem when the heading is less visible. For Schuh, we have changed it further, removing the mandatory option choice.

This stripped back approach to design is not without its challenges, not least of which are the competing views of various stakeholders. Everyone insists their feature/link/widget is vital to the success of the page and must appear.

There were heated discussions and nobody got exactly what they wanted.

Stuart thinks that in many cases Schuh didn’t actually strip it back enough, but the business has plans to split test many small elements to work out how much they would be missed if they were removed or deferred to a deeper page.

The footer navigation is a classic example of this: Stuart’s opinion of footer navigation is that it often is a place to dump links that someone says they have to be on the page but nobody can think of a better place to put them. He thinks that unnecessary links/UI elements dilute the saliency of necessary links/UI elements.

If your design is going to work on mobile as well as desktop, you have to make sure you don’t waste space with unnecessary page elements.

Element priority

This mobile first approach meant that thought had to go into deciding which elements on the page were most important. 

According to Stuart: 

As well as making sure we removed excess UI clutter, we also looked at element priority. While notions of the fold may be of less importance than they once were, we wanted to make sure that the most important elements, including the main call to action, were visible on the first page load without needing to scroll.

Here in this example of our product page, all important product details are visible on the one screen. We have scrolled the page down automatically past the navigation.

How the site looks across devices. 

Page speed

Speed is a vital element for mobile commerce success, and Schuh made this a key part of its design methodology. 

To have one site for all devices, it had to work well on all connection types. Again, simplicity was Schuh’s friend here, as  well as its mobile first approach. If the business could build it well enough to cope with a slow mobile connection, then it would be fast on desktop by default.

Site speed is essential for a good user experience and it’s also a key ranking factor for Google, and therefore more important for SEO.

In the next chart you can see how site speed has improved for Schuh over the past 12 months. The web team had been making improvements anyway and the responsive launch in late November has continued this trend.

In summary

What i find interesting here is that, although responsive design is often considered to be a solution to mobile UX issues, in Schuh's case it seems to have improved the overall experience. This is thanks to its mobile first approach. 

We put the site live and conversion went up. However, in all honesty, I would not put this down to responsive. Yes, we were now providing an experience for users on mobile but we could have given them a mobile site and had the same result. We saw a conversion uplift on desktop; I’d put it down to one thing: we provided them with a better experience. We actually thought about what was a good experience, designed and built as a unified whole.

What it does give us is an excellent single platform to take higher and higher. This will be one of the major wins when we finish the Schuh rebuild: a fantastic platform to support future growth.

Indeed, the main Schuh site is now responsive, though it only launched 10 days ago. Though its still in a traffic recovery phase, the new site has already had a significant impact on page speed. 

Here's the Schuh Google Analytics data from the last couple of months. As you can see, page load time on mobile and desktop is a fraction of what it was before. 

Our Festival of Marketing event in November is a two day celebration of the modern marketing industry, featuring speakers from brands including LEGO, Airbnb, Tesco, Barclays, FT.com and more. 

Graham Charlton

Published 15 September, 2014 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

You might be interested in

Comments (6)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Alan Connor, Digital Manager at Nucleus Financial

For B2C yes but I'd imagine B2B landscape paints a different picture. EConsultancy site could do with a mobile version.

about 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Alan Yes, this has worked for Schuh here, but responsive isn't necessarily the best approach for every site.

On the second point, you're right, and we do have a responsive site on the way soon - thanks for persevering with the non-mobile version.

about 3 years ago

Avatar-blank-50x50

Robb

Designing for least common denominator is a great way to offer the least possible experience for the most possible people.

Sorry, but this is the way to get an advantage today, but not a sustainable advantage.

I'd much prefer giving a core group the OMFG WoW first, and the rest of the pack adaptive experiences scaled down to what they can accommodate.

Sorry, but you aren't going to wow anyone but Google and your design agency who's getting paid to build that mobile first design.

I have to agree with Daria at daPulse, and others, who have said mobile first is the wrong way - just search for "Don’t Go Mobile First and Die — Go Mobile Second and Live Longer".

about 3 years ago

Avatar-blank-50x50

sarah hughes, Director and Founder at Datitude Limited

This article highlights why it is that some retailers (and their people) are so successful whilst others struggle. It's been clear for many years that the proportion of traffic from mobile devices is increasing dramatically but so many retailers have yet to do anything about it. Schuh invested in its "often neglected" outlet site, presumably on the back of a business case with a poor ROI given its low margins and low volumes. A bold move. Good for them.

about 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Robb Mobile first is necessarily the best approach for every business, and we have talked about this on the blog: https://econsultancy.com/blog/64331-thinking-mobile-first-think-again

However, I'd suggest that for Schuh, it's less about wowing customers than selling shoes. If the latter is happening, who's to say this approach is the wrong one?

about 3 years ago

Avatar-blank-50x50

Gavin Bonthron, Senior Conversion Lead at CanonEnterprise

Looks as though the image and product doesn't match on the product pages. I'm guessing these weren't in the test otherwise it might hint why there was increased burnthrough on the product name.

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.