In a nod to the new season being well underway in the world’s most expensive soccer league, we thought we’d take a look at two of the best mobile UX styles of two of the biggest clubs in the English top flight. Arsenal and Tottenham both have interesting mobile sites with distinct UX styles, they may be fervent rivals on the pitch, but let’s put neighbourly grudges aside and examine the mobile offerings from these two giants of the modern game.
One thing which has benefited global club Arsenal online hugely has been the ability its site has given shoppers to purchase merchandise in their native currencies. Euros, Aussie and US dollars are all available in the drop downs on the product pages. Arsenal’s mobile site has undergone a successful transformation in recent years and it comes as no surprise that there has been an 86% increase in mobile transactions and a 42% increase in sales as a consequence. The new site has a much cleaner design, products are much clearer and the new checkout is based on mobile first design principles. The shirt personalisation journey is a particularly satisfying new dimension to the mobile site. The homepage from the get-go is trying to push consumers towards buying a personalised shirt which is the more expensive option. The new kits are displayed under images of goal-scoring heroes next to a “shop now” call to action. Adding a name and number to a selected shirt is quick and easy and a preview of how your shirt will look is quickly generated. Arsenal, have cleverly disguised the extra cost of shirt personalisation for as long as possible, over the course of the personalisation journey. The new shirt price is shown late on in the journey, below the ‘add leave patches’ call to action. Users will more than likely be absorbed by the CTA and neglect to scroll down to where the new price is displayed, causing them to move on to the checkout process before seeing the price hike. It’s a clever move from the brand who have essentially neglected to tell consumers the price of their purchase until they are thoroughly wrapped up in the excitement of buying their own personalised item.
The checkout section of Arsenal’s mobile site is very slick and easy to use. The progress bar, which shows users how far off completing their purchase they are, is a great way of keeping users engaged and feeling in control. The postcode look-up tool is time-saving for the user, who like all online shoppers will be prone to user- fatigue, born out of having to complete too many online fields in one sitting. A slight drawback is the lack of free delivery options and the fact that it is more advisable to condense checkouts onto one screen.
The Tottenham mobile site is stacked with good, inciting imagery. It features dropdowns rather than buttons for selecting sizes on the product pages, something that some users may find tedious and off-putting. The CTA’s are much more emboldened on the Arsenal site, with Tottenham’s site being slightly more shy about shouting about offers and product news. The text boxes that surround the calls to action on the Tottenham site could benefit hugely from being more overt and eye-catching. With regards to the shirt personalisation journey, Tottenham does this via a pop-up but the preview function is similar to Arsenal’s. They are also a lot more upfront about the additional costs of adding a name and number to their replica shirts, which customers are always more appreciative of, but ultimately they could drop out of the buying process early, purely because they don’t want to pay the extra cost. Sometimes it pays to be sneaky and only disclose the information once the user is further into their buying journey. The more invested they are the less likely they will be to drop out. The Tottenham checkout page includes a couple of deal-breaking flaws that need serious ironing out, or else customers will abandon their purchase and avoid any future site visits. If you click the confirm button after selecting your shirt, it is added to the basket without any obvious notifications and you are still left on the product page. Logically you would select ‘Add to Bag’ but this sends two items to your basket and you can’t delete the items individually. You have to either buy both shirts or delete the entire order. Very frustrating.
In conclusion, it is very hard to see past Tottenham’s cumbersome checkout procedure, which results in a frustrating and unsatisfactory user experience. On the product pages, Spurs don’t make it clear that the personalised shirt has been added to the user’s shopping basket, which causes confusion, disarray and ultimately basket abandonment. Arsenal, on the other hand, offer a swift and easy purchasing process that requires minimal effort, even if they do cheekily disguise overall costs until the 11th hour.