Nick Dew - Freelance Web Designer & Front-end Developer

Ticket Arena mobile optimisation

I was asked to improve the mobile experience for visitors to the Ticket Arena website. They only had a fixed width desktop version, and an ever increasing number of customers were using smartphones to browse and purchase tickets. So this was an area they needed to address and quickly to avoid losing business to their competitors.

ta-mobile
  • UX
  • Mobile
  • HTML5
  • CSS3
  • JS

Methodology

Unfortunately the client didn’t have enough time, due to other projects, to allow for a mobile first responsive approach. So as a quick fix we used a breakpoint of 568px, which meant any device with a viewport of between 320px and 568px would get the mobile optimised version. This covered the vast majority of smartphones on the market at that time.

ta-mobile-landscape This is how the website looks on an iPhone 5S in landscape mode.

Before and after

As you can see below, the experience for mobile visitors is much better on the optimised version. All the text is now readable, photos appear larger, and the buttons, links and CTAs are all easily clickable.

ta-mobile-before-after

Mobile homepage

The vast majority of content is still accessible on the mobile optimised homepage. The only sections removed were the "recently released" and "venues" sections which were the least visited areas.

ta-mobile-homepage

Mobile navigation

The menu slides out from the left, pushing the content to the right and revealing the website navigation. This is accessed by clicking the menu icon, often referred to as a "hamburger".

ta-mobile-menu

Mobile checkout

One of the most important areas to fix for my client was the checkout process. Form fields were made bigger, making it easier for users to enter information. Tables were reworked to make sure only the most relevant information was shown. And some elements were moved around to improve the flow.

ta-mobile-screens

Visit the website...on a mobile!

www.ticketarena.co.uk