Arsenal FC have been able to boast some impressive results after revamping their ecommerce site.
Since redesigning and replatforming their retail site with SAP Hybris Commerce, the club has seen an 86% increase in mobile transactions, a 42% increase in sales, and a 57% reduction in page load time.
The ability to checkout using Euros, US dollars, Australian dollars has contributed to a 48% increase in sales from outside the UK. A fine result indeed. To give an idea of the work that has been carried out, here are before and after images of the product pages.
The old design
The new design
The redesign included:
- Cleaner design with a focus on key products and imagery.
- Better visibility of key customer journeys; shop-by-player and shirt personalisation.
- Improved rendering of shirt personalisation.
- Improved shirt personalisation journey based on mobile first principles.
- Redesign of the checkout also based on mobile first design principles.
It’s the last two points that I’ve chosen to focus on for this article, because the 86% increase in mobile transactions is quite impressive. To add an element of competition, I’ve compared Arsenal’s mobile journey versus that of my own club, the Hotspurs.
Read on to find my totally unbiased appraisal. And for more on digital in the Premier League, checkout these other posts:
- How Premier League club websites are changing: A Swansea & Stoke case study
- Digital transformation in the Premier League: Southampton FC’s fan-first strategy
- After years of apathy, football clubs are embracing digital transformation
My Arsenal journey
The homepage has a hero image that aims to nudge people towards buying the new away kit. It features an indifferent Mesut Ozil, goal-shy Theo Walcott, and a third player who I don’t actually recognise. How can I resist clicking ‘Shop now’?
The product page is clearly designed to get people to personalise their shirts. One could very easily accuse Arsenal of employing a dark UX pattern here, pushing people towards the more expensive option.
Adding a name and number to the shirt is very simple and the product image immediately reflects your choice. Not rocket science, but still all very quick and user-friendly thus far.
One criticism would be that the shirt cost has jumped from £55 to £71 without warning. I would expect a personalised shirt to cost more, but the new price is shown below the ‘Add sleeve patches’ call-to-action, so users might miss the price increase if they don’t scroll down past the CTA. A bit sneaky perhaps, and some users might abandon their purchase if they reach the checkout without noticing the price hike.
And by the way, those sleeve patches are an extra £8.
As promised, the checkout is very simple to use and ticks all the best practice boxes. A progress bar lets me know it won’t take long to make the purchase and the postcode lookup tool simplifies the process of entering personal details. It even accepts Paypal.
Standard delivery is almost £5 though, which seems steep at a time when most retailers offer free delivery or click and collect options. In total my order comes to £83.95.
The Arsenal result
Overall the mobile purchase journey for a personalised Arsenal shirt was extremely quick and easy. The path from product page to checkout completion was very slick and intuitive, with each screen only requiring a handful of interactions.
You could argue that it would be better to condense the checkout onto a single screen, but I don’t think that matters too much as long as there’s a progress bar and each page is short and simple.
My Tottenham journey
I breathed a sigh of relief that Spurs have a mobile site – it would have been a crushing blow if we fell at the first hurdle.
The hero image on the homepage promotes Champions League merchandise, an option that wasn’t available on the Arsenal site for some reason. It takes three clicks to get to the home shirt product page, which costs £60.
I’m trying to be objective here, and I think that the product pages are pretty much on par with one another.
Both have good product images, and while Spurs get bonus points for product reviews, I prefer Arsenal’s use of buttons to choose the shirt size instead of a dropdown menu. And if we’re assuming that both clubs would prefer to nudge fans towards getting a personalised shirt, then Arsenal’s CTA is probably more effective.
If a customer opts for a personalised Spurs shirt, the options are presented in a pop up rather than on a new screen. Though it’s a slightly different experience, the outcome is the same – you enter your name and number and the product image is updated accordingly.
Spurs do offer some extra options though – you can choose between two fonts (Spurs Lettering or Premier League Lettering), though I’m not sure if that was reflected on the product image as I couldn’t tell any difference. And there’s also the extra option of Champions League badges, again an option that was missing from the Arsenal site.
Spurs gain points here for being a bit more upfront about costs, but unfortunately our flaky nature now comes into play…
You notice that heart icon at the bottom right of the personalisation screen? I clicked it, but as far as I can tell it didn’t do anything other than boot me back to the product page, deleting the shirt information I had just filled in.
Also, if you click the blue ‘Confirm’ button, the shirt is subtly added to your basket without any real warning. But you’re then left on the product page, where the price hasn’t been updated to reflect the personalised name and number.
Worse still, the next logical step is to click the ‘Add to Bag’ button. But if you click ‘Add to Bag’ you then actually have two items in your basket. And at the checkout you can’t delete the items individually, you have to either buy both shirts or delete the entire order. I wasn’t actually planning to buy a shirt, and I still got frustrated at all this clicking.
Pleasingly, the checkout experience is very swift. It all sits on one page, with concertinas expanding out as you move through each phase.
The final result
While the checkouts are evenly matched, Arsenal win this little UX test as Tottenham have contrived to shoot themselves in the foot at the last minute (just like both our home games so far this season…).
On the product page Spurs don’t make it clear that the personalised shirt has been added to the user’s shopping basket, nor does the product page reflect the updated cost. It leads to a lot of unnecessary confusion and frustration, which lets down an otherwise quick and simple purchase journey.
In contrast Arsenal’s mobile user journey requires minimal thought or effort on the user’s behalf. My only criticism would be that the additional costs for personalising a shirt are not made clear, which could lead some fans to abandon their purchase.
Overall then, Arsenal win this user test. Does that make this the ecommerce version of St Totteringham’s Day?
To learn more on this topic, check out these Econsultancy resources: