Role

UX/UI Designer

Duration

2 weeks

Tools

Adobe XD, Photoshop


PROCESS

The process for this assignment includes the following:

DISCOVERY

  • Audit existing ticketing process
  • Validate audit
  • Learn user pain points

ANALYSIS

  • Problem summary
  • User persona
  • User journey
  • User flow
  • Hypothesis
  • Design challenge

IDEATE

  • Design principles
  • Design inspiration
  • Design solution
  • Revised user flow

PROTOTYPE

  • High-fidelity prototype

TEST

  • Usability testing
  • Final thoughts

DISCOVERY

AUDIT EXISTING TICKETING EXPERIENCE

I started by auditing the existing ticketing experience for Cathay Cineplexes’ mobile website and identified three key issues:

  1. Online ticketing system is not mobile-optimised
  2. Ticket process is unintuitive and certain steps are confusing or redundant
  3. e-Tickets are not issued for online bookings
Existing ticketing system not mobile optimised. Horizontal scrolling is frustrating.

The ticketing user interface is not mobile optimised and the user has to constantly swipe left to right to navigate the UI.

Existing ticketing system - select ticket type

Despite selecting just one seat, the user is required to indicate the number of seats being booked for that ticket price in the next screen which is redundant.

Cathay online booking confirmation email

After booking completion, the user is required to collect a physical ticket from the counter at the cinema.

VALIDATE AUDIT

I needed to validate the gaps identified in my audit of Cathay Cineplexes’ online ticketing experience on mobile. To do so, I approached three friends who are frequent cinemagoers to assist me with the following tasks/goals:

  1. Test the online ticketing process of Cathay Cineplexes as well two of its competitors (Golden Village and Shaw Theatres) on their mobile
  2. Take note of what frustrated and delighted them
  3. Suggest how the process can be improved

LEARN USER PAIN POINTS

After completing their tasks, I interviewed them using a common set of questions to discover their pain points and uncover actionable insights:

3

interviewees

40-48

age

1+2

woman / men

30m

duration

User interview questions

I synthesised their comments and group them into themes to form an affinity map. The red squares are pain points while the green ones are suggestions for improvement. The insights validated my audit and served to guide me in developing a solution.


ANALYSIS

PROBLEM SUMMARY

Based on the evidence above, I identified three areas to address:

  1. Mobile optimisation
  2. Improve the ticketing user interface
  3. Issuance of e-Tickets

USER PERSONA

While it is good to narrow down the issues to address, we also need to better visualise a personality who is representative of a customer of Cathay Cineplexes. In essence, a user persona.

While the persona is not a real person, the persona’s traits, needs, motivations and frustrations are very real (distilled from the people I interviewed). The persona serves to remind us who we are building the solution for.

Let’s get acquainted with ‘Ryan’:

User Persona

The user persona is established as a movie buff in his 40s and is a working professional. He wants to book choice seats quickly and dislikes queues.

USER JOURNEY

The pain points and opportunities synthesised from the user interviews help construct this user journey map. It highlights Ryan’s pain points and emotions felt at different stages of the ticketing process on mobile. Clear design opportunities are also recorded.

USER FLOW

In the existing online booking process, it takes Ryan twelve steps to go from launching a web browser to booking a ticket and watching the movie. He spent a good amount of time navigating an unintuitive ticketing interface, further compounded by a need to collect a physical ticket. Can these steps be reduced?

HYPOTHESIS

At this juncture, I believe a reduction in cognitive load (i.e. anything requiring users to stop and figure out what to do next) will result in a smoother mobile ticketing and cinema-going experience. I will elaborate on how this theory is tested along the way.

DESIGN CHALLENGE

“How might Cathay Cineplexes provide a frictionless mobile ticketing experience for its website?”


IDEATE

DESIGN PRINCIPLES

My design solution will be guided by the following design principles:

Intuitive

Making each step of the ticketing process straightforward and effortless.

Convenient

Issue an e-ticket and let the user head straight to the cinema hall to enjoy the movie.

DESIGN INSPIRATION

Part of the ideation process is seeking inspiration from other cinema operators. The earlier user interviews shedded light on what delighted my friends from the ticketing experience with other cinema operators.

Design inspiration

An inspiration for building an intuitive booking experience came from the self-service kiosk at McDonald’s. The kiosk user interface is streamlined and very intuitive. A user knows exactly what needs to be done in each step of the meal ordering process. The takeaway (no pun intended) is that simplicity is key.

DESIGN SOLUTION

Often, it is the little things that have a large impact. I mentioned earlier that reducing ‘cognitive load’ would result in a smoother ticketing experience. In other words, less deciphering speeds up decision making.

#1 Making it quick to read a movie’s runtime
It is quicker for the user to read a movie’s runtime in hours and minutes.

Making it quick to read a movie’s runtime

#2 Making it quick to read movie session times
It is quicker to read a movie session time in the 12-hour AM/PM clock than the 24-hour ‘military time’ format.

In the new design, the session times look like buttons, providing more affordance to the user.

Making it quick to read movie session times

#3 Making it quick to view session times in the movie details page
The movie poster is scaled down and the movie details (runtime, rating, trailer, photo gallery) have been compartmentalised and collapsed by default. This user does not need to scroll too far down to view session times for the movie and it also allows them to focus on the task of selecting a session time.

Making it quick to view session times in the movie details page

#4 Streamlining seat selection and the checkout process
Before I share the solution, let’s have a look at some issues with the existing seat selection and checkout process.

  1. The existing site is not mobile optimised. The user needs to swipe horizontally repeatedly to switch between viewing the seating arrangement and the order basket. ‘Basket’ does not sound right as the user is not buying groceries.
The existing site is not mobile optimised,
  1. A disjointed process of selecting seats and ticket types
    When the user selects one seat in stage 1, he is prompted to select a ticket type and indicate the quantity in stage 2. The ticketing system is unintelligent.
A disjointed process of selecting seats and ticket types
  1. No option to skip food purchases
    It is inflexible of the existing ticketing system to force a user to view concessions without a means to skip food purchases and proceed directly to payment instead. Also, ‘Food & Beverage’ is easily understood compared to ‘concessions’.
No option to skip food purchases

In my redesign, I streamlined the seat selection and ticket type into one screen.

The ticketing system prompts the user to select seats and responds accordingly with the next task to perform, which is to select the ticket type (e.g. Weekday Standard or Use a Voucher).

After selecting a ticket type, the system provides an option to buy food & drinks or skip to payment.

Streamlined the seat selection and ticket type into one screen

#5 Improving the payment method
Before I share the solution, let me illustrate how the existing ticketing system undermines the intelligence of the user.

Existing ticketing system undermines the intelligence of the user

In order to make payment, the user is required to input his email address twice (to confirm). After that, the system triggers an obtrusive pop-up asking the user to ‘ensure the email address is correct’. This is redundant and unfriendly.

In my redesign, the user is presented with a summary of his purchase and is prompted to select a payment method.

Streamlining the payment

Competitor research has shown only one email field is necessary. Upon selecting the payment method, the corresponding payment information fields intuitively appear below

The ticketing journey is almost complete.

#6 Issuance of e-Ticket with QR code for entry
After going through an unfriendly ticketing experience in the existing site, the user is required to collect a physical ticket when an e-Ticket with a QR code should be generated. All three interviewees expressed the same frustration.

Cathay online booking confirmation email

In my redesign, an e-ticket is issued at the final stage of the ticketing journey – the confirmation screen. The user can save a screenshot of the ticket or add the ticket to the device’s wallet application. The user will also receive the e-ticket via email.

Issuance of e-Ticket with QR code for entry

REVISED USER FLOW

With the redesign, it takes Ryan ten steps from the original twelve (nine, if he skips food purchase) to go from launching a web browser to booking a ticket and watching the movie.


PROTOTYPE

HIGH-FIDELITY PROTOTYPE

Redesign - payment and booking confirmation

I created a high-fidelity prototype using Adobe XD with the intention of conducting a usability test. Scan the QR code or click on the button below to preview the prototype.

Cathay Cineplex redesigned ticketing experience - QR code

TEST

USABILITY TESTING

I was only able to do a usability test with one of the three users I interviewed due to scheduling challenges. The user is ‘David’ who is in his 40s and works as a librarian.

David was provided with the link to preview the Adobe XD prototype on his device. I then briefed him about the limitations of the prototype and that not all buttons are tappable. However, all buttons needed to reach the objective are definitely present.

We communicated via a ZOOM call on laptops, so that he could use his mobile device for testing.

The task of the usability test is as follows:

“Using the Adobe XD prototype, book ONE ticket for the 8:00 PM screening of A QUIET PLACE: PART II on 16 June, 2021 at Cathay AMK Hub.”

We went screen by screen and I asked him to perform a specific task for each one. He was then asked to describe his experiences. Positive and negative experiences were documented.

Let’s examine the usability test in detail.

#1 Movie selection / date & session selection

David had no issues navigating to the movie details page for A QUIET PLACE, PART II by tapping on the poster.

David noticed the ‘MOVIE DETAILS’ button but did not tap on it.

He likes the fact that only the key movie information are shown to prevent clutter.

David appreciates the session times for this movie are visible without needing to scroll too far down the page.

#2 Exploring movie details

David eventually scrolled back to the MOVIE DETAILS button, taps on it and sees the panel expand to reveal a trailer and gallery.

He noted that the media are non-functional in the prototype but has no issues.

#3 Session selection / seat selection

As tasked, he scrolls down the page to look for the 8:00 PM session time for the screening at AMK HUB.

He taps on the 8:00 PM button and lands on the seat selection screen.

Again, it was a straightforward task for him.

David likes the option to quickly select another session should he be unable to find good seats for the current session.

PAIN POINT
David felt the seating arrangement should be shown in its entirety as ‘initial view’ so that he could, at one glance, determine if the session is selling out fast

He noticed the buttons to ZOOM IN and OUT of the seating arrangement. He also noted the FULL SCREEN button and asked about it.

I explained that tapping the FULL SCREEN button displays the hall seating arrangement in its entirety in landscape orientation. His reception was lukewarm.

SEAT SELECTION was easy for him. So was selecting a TICKET TYPE.

David appreciates the option to skip food purchases and go straight to PAYMENT which he does.

#4 Payment summary

David likes the payment summary screen. He taps on VISA / MASTERCARD as the payment method he wants.

#5 Payment details

David likes the greyed out PAY button which only becomes active when all PERSONAL DETAILS and PAYMENT INFORMATION have been entered.

He is also appreciative of the short disclaimer text pertaining to confirmation of payment and its implications.

He prefers this over the existing site which makes him read long paragraphs of text and requiring him to tick a tiny checkbox in order to proceed with payment.

At this point, I told David that I did not prototype the payment gateway screens and that tapping PAY will bring him to the BOOKING CONFIRMATION screen which is the end point of his ticketing journey.

#6 Booking confirmation

I told David he is presented with an e-Ticket and he is happy as this is an expected outcome.

I asked him if he noticed the animation of the card tilting into view. He replied no. The animation is present but maybe it was too quick for him to notice it.

He shared with me that the animation does nothing for him. He is just happy to receive the e-Ticket. On that note, he enquired about the ADD TO APPLE WALLET button.

As he was previewing the prototype on an ANDROID phone, he found it odd to see the APPLE WALLET button below the e-Ticket.

I explained to him that Adobe XD is unable to display an Android equivalent of ADD TO APPLE WALLET as it does not support device detection. But it is definitely something for me as a UX/UI designer to bear in mind to check with the user before conducting the usability test

What was his verdict for this new ticketing experience on mobile?

“GREAT!”

David Wan, 48, Librarian

FINAL THOUGHTS

A UX Designer has to wear many hats and I found it rewarding to listen to users during interviews in my attempt to uncover pain points and actionable insights. Customer centricity is essential. There is no room for assumptions in crafting a meaningful and delightful experience.


PRESENTATION DECK & ADOBE XD SCREENS

Click the image below to download my project presentation deck (PDF, 8MB) for the full documentation of my UX/UI study and redesign.

Click the image below to download a snapshot (PDF, 2.7MB) of the user interface screens from my Adobe XD document.