Role
UX/UI Designer
Duration
2 weeks
Tools
Adobe XD, Photoshop
PROCESS
The process for this assignment includes the following:
DISCOVERY
|
ANALYSIS
|
IDEATE
|
PROTOTYPE
|
TEST
|
DISCOVERY
AUDIT EXISTING TICKETING EXPERIENCE
I started by auditing the existing ticketing experience for Cathay Cineplexes’ mobile website and identified three key issues:
- Online ticketing system is not mobile-optimised
- Ticket process is unintuitive and certain steps are confusing or redundant
- e-Tickets are not issued for online bookings
The ticketing user interface is not mobile optimised and the user has to constantly swipe left to right to navigate the UI.
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.
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:
- Test the online ticketing process of Cathay Cineplexes as well two of its competitors (Golden Village and Shaw Theatres) on their mobile
- Take note of what frustrated and delighted them
- 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:
3interviewees |
40-48age |
1+2woman / men |
30mduration |
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:
- Mobile optimisation
- Improve the ticketing user interface
- 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’:
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:
IntuitiveMaking each step of the ticketing process straightforward and effortless. |
ConvenientIssue 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.
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.
#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.
#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.
#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.
- 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.
- 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.
- 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’.
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.
#5 Improving the payment method
Before I share the solution, let me illustrate how the 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.
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.
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.
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
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.
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
#2 Exploring movie details
#3 Session selection / seat selection
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.
#4 Payment summary
#5 Payment details
#6 Booking confirmation
“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.