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.
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:
- Must be designed mobile first.
- Must apply usability best practice.
- Must have service and content parity for all devices.
- Must use the same HTML for all ‘variations’.
- Must be fast.
- Must be SEO friendly.
- Must have analytics planned from the start.
- 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.
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
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.
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.
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.
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.