Industry Watch: Measuring the impact of a botched e-commerce redesign

In this edition of Industry watch, we’re focusing the spotlight on ASOS. Yes, this is another website redesign gone wrong story. The shocking twist – somehow even the biggest online businesses out there struggle to get this right.

Dislike Your New Look! – Yours Sincerely, Googlebot

In December 2017 ASOS changed the look of their website. They switched to a new colour palette – adding in shades of grey to their classic monochrome look. They also expanded the main drop-down navigation (skilfully balancing images and copy to promote their ever-expanding ranges) and introduced a longer search bar. The new site also retired a few functionalities: a filter sidebar, as well as the option to “quick-view” potential purchases.  

The change didn’t sit well with some of their customers though:

And it definitely didn’t sit well with Googlebot either.

Why?

Well, you might have the most beautiful and user-friendly website on the planet, but if you’re making it difficult for bots to understand your content then brace yourself, because SEO winter is coming.

Here Comes the Blow

According to Searchmetrics, from the end of November until late December ASOS’ visibility in Google UK dropped by 12%. If you think it isn’t that bad, think again; it was their lowest visibility since May 2013. Poof! Over four years of SEO growth, gone.

In a single week, they lost their number 1 rankings for extremely high search volume terms including ‘men’s clothes’, ‘tops’, ‘chinos’, ‘hats’, ‘fashion’ etc. They also dropped rankings for brands like River Island, Missguided and Jack Wills.

According to the latest AWR study (Oct 2018), mobile CTR for the apparel category drops from 13% in position 1 to 8% in position 2, so any ranking changes are sure to result in noticeable traffic declines. Just based on the drops in the screen grab above, Searchmetrics estimated the loss of over 62k organic sessions (and it’s only a few keywords).

Sure, the conversion rate on skirts might be lower than on specific queries like ‘high-waisted black skirt’ (with users searching for specific products showing more purchase intent), but these generic queries were definitely holding some commercial value too. As well as this, top rankings for multiple keywords were strengthening the brand perception as the no. 1 online shopping destination for all things fashion. All in all, quite an unpleasant outcome of the redesign for the digital team at ASOS.  

Can You Spot the Difference?

The most obvious change from the SEO perspective was the removal of the category description at the top of the page. On the previous version of the site, there was a short paragraph under the category name, which usually contained core keywords:

It’s a common SEO practice on e-commerce sites, as it allows bots to quickly determine the topic of the page (it is thought that bots pay attention to the first sentence because it is important from the user’s perspective).

However, the paragraph was removed from the new site.

Here’s the thing. You can definitely find e-commerce websites out there that rank first for relevant terms without descriptive copy above products; this is in no way a major ranking factor. However, if you have a quick look at ASOS’ competitors, you’ll notice that most of them take advantage of the top paragraph (Next, Debenhams, River Island, M&S). So in this case, this theoretically minor change could have impacted their rankings.

But that’s not the only thing that changed…

The secret in their code

As the new site launched, the old filter sidebar was retired. The functionality was moved to the top of the page. It doesn’t seem like a massive change… until you compare the source code.

The sidebar code on the old version of the page was placed below all the products, so they would load first (before the bar). This meant that a bot would go through the top paragraph and move on to specific products straight away – gathering more keyword-rich data.

Meanwhile, the code for the new filter bar is located just beneath the H1 tag. This means that before a Googlebot reaches specific products it has to go through the expanded top navigation and the filter (which contains all the colour/price/size range options). Hence, it’s difficult for the bot to determine whether the page is about a specific product/category. The cached version of the page shows it well, with a lot of white space in-between the filter and actual products.

Why is it so difficult to get this right?  

Usually, companies go through a website redesign to refresh a dated look, improve CR or UX by introducing new functionalities or to feature new products. For ASOS, it was all three of these objectives (as they expanded into beauty products a few months before the redesign).

So, what makes it so hard to stop a redesign tanking your SEO results?

1) Too many cooks spoil the broth… but you need them

Usually, there are a lot of stakeholders engaged in the redesign process (from marketing to sales, to web design and digital, to product). It’s important that the various teams are engaged in the process and add value, but the entire project should be scoped out in a way that allows feedback and co-operation at the right time. Otherwise, the redesign can be hijacked by one team/person and useful feedback might come in too late to make amends.

2) SEO professionals don’t have crystal balls

Our job is tough. As much as we’d love to, we’re not able to flag a specific change and say: ‘Uh oh – this will cause the page to drop two positions in rankings for keyword A and four positions for keyword B. Don’t do it!’.

This is where making a business case can help us. Working with all the unknowns, we need to adopt the ‘what if…’ way of thinking. Provide your team with traffic loss estimates (in case you end up suffering a rankings drop), just to highlight the stakes to other project members. When the team doesn’t have any significant data, it’s simple to ignore SEO (especially if you think you own the space).

To make things even harder for us, internal factors (for example a website redesign) aren’t the only challenge we have to face. An unexpected Google algorithm update is a totally different beast – you usually find out that you were hit once the damage is done. And ASOS learned it the hard way. Following the first drop in December, their visibility further dropped off in March (following the unofficial core algorithm update).

3) The hidden spot

One step that is frequently overlooked is a technical SEO audit of the code on the staging site. While it’s possible to notice potential issues with wireframes and mockups, bots actually crawl the code, so it’s important to run a health check on a staging site before the official launch.

More often than not, business only come back to their SEO team, once the damage is done.  This is not ideal and makes SEO changes prescriptive. It’s still possible to identify problems, fix issues and regain rankings (that’s basically our 9 to 5), but it’s an avoidable long-term process that usually comes with quite a few compromises.

If you’ve suffered a botched re-design or migration, we can help you recover! Get in touch with us today and find out how we can help your organic visibility recover.