The brain of an optimisation strategist never sleeps – not even when the strategist is about to buy tickets to a movie she’s been looking forward to for the past six months:
We haven’t specifically covered cinema websites on PRWD before, but online cinema ticket purchases are becoming more popular and carving out a significant slice of UK box office revenues (£1.2 billion in 2015 according to the British Film Institute). Purchasing a ticket/experience online is not that different from any other ecommerce transaction – the same basic UX, IA (information architecture) and copywriting considerations still apply. Plus, since they are all selling the exact same product, it is very easy to draw comparisons between different sites.
With this in mind, I will review the three websites I used to buy tickets to La La Land — and yes, for added cinematic effect, you can read this post while listening to the soundtrack in the background.
From an accessibility and readability perspective, websites with a light background or high contrast are generally clear and easy to read. On the desktop version of MyVue.com, a lot of the copy is rendered in grey on black: in addition to slowing down page scannability, this might cause visitors to miss important page elements – for example, the fact that there is a time limit on ticket purchases.
Strategist tip #1: use adequate contrast to ensure all copy on your website can be read easily.
We all know that different customers have different needs: while ‘browsers’ might be after inspiration and willing to invest their time navigating through different pages, ‘buyers’ are fast and decisive, and will be looking for the quickest way to go from A to B. MyVue’s Quick Book functionality at the bottom of the screen serves exactly this purpose:
Strategist tip #2: make sure your website provides journeys for different types of users.
CTA hierarchy and style are fundamental to direct customers’ attention and clarify the required actions. Again on desktop, MyVue’s “Choose a venue” CTA is presented in the same style as the movie synopsis, which makes it fairly easy to miss when trying to complete the main action quickly. Confession time: it took me 3-4 unsuccessful clicks on the greyed out “Get times and tickets” CTA to realise I needed to make a selection first.
Strategist tip #3: structure your page and your CTAs so the action flow is clear and linear, and important elements cannot be missed. For additional insight, use a heatmap and video recording tool like Hotjar to find out what your users are (and are not!) clicking on.
Finally, as users progress into their booking, they are shown a price that is not inclusive of booking fee before being invited to click on the payment CTA — which is comparable to not showing delivery prices on an ecommerce website until further down in the purchasing journey. User research participants always highlight this as a major element of frustration:
Strategist tip #4: make sure to clarify the final price before asking users to commit to the CTA and progress into the payment section.
The second website I looked at, Odeon, provides a better execution of the previous point by using the hero image to advertise a unique selling proposition, “no online booking fees”:
Strategist tip #5: take advantage of hero images to communicate important messages you don’t want your users to miss.
Whether it’s about clothes, software or cinema tickets, an expertly created product page needs to inform users, entice them, and convince them to perform the desired action. Odeon does a relatively good job of informing/inspiring potential audiences with a short but evocative movie synopsis, and introduces an element of authority and personalisation with the line ‘ODEON says’ – implying that the synopsis is not a quick copy-paste job, but is specifically curated by Odeon for its customers:
Strategist tip #6: ensure your product descriptions stand out by injecting some personality and adding details that your customers will find useful. Read a few more actionable tips in my post on “The Right Way to Approach Product Copy”.
When trying to upsell or cross-sell a product, it is vital that its relevance to potential customers is clarified. Going through the booking process, Odeon tries to upsell Premier seating, but the exact definition of “premier” is unclear: is it about a better view, or are the seats comfier? Wider?
The answer to these questions is actually available on the website – it just cannot be reached from this page at all. The fastest way to find out is open a new tab and Google it.
Strategist tip #7: never assume that information is so obvious it can be left out, especially for inexperienced or first-time users.
If you are not from Manchester, you might not be familiar with Home, the city’s independent centre for international contemporary art, theatre and film. Given its focus on innovative and inclusive work, it’s not surprising that it is the only one of the three reviewed websites to have adopted the gender-neutral title MX in their dropdown menu.
Strategist tip #8: to be truly customer-centric, be constantly aware that all your copy and design choices affect online users. Read more about it in this Formisimo blog post from 2014, “Improve User Experience with Gender-Neutral Options in Web Forms”.
Remember what I wrote earlier about information hierarchy and visibility? On Home’s booking page the CTA is certainly visible (there are 24 of them!), but the most important information —date and time— gets lost in this very long list.
The page could be optimised by introducing a hierarchy that answers a few questions: do users need to know which cinema screen the film is being shown in? Is it more important than the date or time? A long list of options becomes increasingly problematic on mobile, as users are forced to scroll up and down to make comparisons.
Strategist tip #9: Use page design to make multiple product/service options easy for users to compare and select.
While both VUE and Odeon allow guest purchases, Home requires the creation of an account before users can proceed:
Strategist tip #10: forcing users to register an account can be a barrier to conversion. Always offer a guest checkout, and give users the option to register after their transaction is complete.