CineTix Movie Ticketing App

Movie Ticket Booking Made Easy
My Role
UI/UX Designer
Team
Solo project
Project Duration
6 months
Tools
Figma
Illustrator
Mural

Overview

What is a typical movie-going experience like for you? Long queues? Having to wait at the front until your friends arrive because you booked everyone's tickets for them? CineTix is a mobile movie ticketing app designed to streamline the process of booking movie tickets along with features such as ticket-splitting and concession pre-ordering to tailor the experience to every user's needs.

Understanding the Users

User Interviews

To gain some insights into what the typical movie going experience is like, I interviewed 4 individuals and had them elaborate on the process they go through to book their tickets, with an emphasis on what works for them and what frustrates them.

The Foundational Three

Based on the interviews, I was able to gather the needs that users value the most:

Time
Time is of the essence for moviegoers who often plan their movie outings amidst busy schedules. Any time wasted in line or at the counter leads to frustration and ruins the overall experience.
Flexibility
Users want features that are flexible to suit their ever-changing circumstances. Multiple payment options, digital wallet integration, ticket splitting etc are all appreciated.
Simplicity
Having a simple interface and straightforward navigation without unnecessary extra steps is essential to the booking experience. It helps save time too.

Meet Tony

I created a persona using insights gathered from the interviews. The persona represents the typical user who would do everything they can to avoid waiting in lines since they value time. Ideally, the typical user would want everything available in person to be available online as well.

Ideation & Design System

Booking Process Should Be Simple

In order to keep the booking process linear, I decided that each screen should only be centered around a primary action or actions that are closely related to each other. I also attempted to reduce the overall screens needed to go through the whole process so that each step that the user takes to get to another step is simple yet meaningful.

Design System

I created a design system to ensure consistency throughout the high-fidelity mockups. I implemented a 4 column grid system to ensure even spacing and consistent placements for content. Secondary action buttons were introduced after several user tests to help distinguish primary action better.

Testing and Refining

We Can Do Better Than This

Two usability tests were conducted via Zoom, where participants completed tasks that encompassed the main booking process flow. The first study utilized the low-fidelity prototype, and its findings aided in refining the initial iteration of the high-fidelity design. The second study took place after the initial iteration of the high-fidelity prototype, resulting in major changes to certain parts of the design to improve usability.

Seat Map and Ticket Type

  1. The original row/column seat labels were eliminated to reduce visual clutter.
  2. The zoom button was redesigned to just show one at a time to provide better clarity and prevent confusion.
  3. Ticket type was a critical feature missing from the initial wireframes that allow users to pick what kind of tickets they are purchasing and how many they need.
  4. The seating legend was moved to the top right corner, where users can click on the info icon to access it.

Payment Method

  1. A cancel button was added so users can exit the journey more efficiently instead of spamming back buttons.
  2. The saved cards section was condensed into a carousel to avoid excessive scrolling.
  3. Other payment methods were added to fit users' need of having more flexibility.

Ticket Details

  1. The "x" button was causing confusion as users were unsure if it meant canceling the ticket or closing the window. I removed it and implemented a new button hierarchy with different visual weights to help distinguish primary and secondary actions.
  2. To fit the new button hierarchy I had created, I downsized those two buttons as they are considered tertiary actions.

Final Designs

Next Steps

More User Testing

Due to the scope of the project, the newest iteration of designs has not been fully tested yet. I would love to conduct another round of user study with users who are not familiar with the app to get a fresh set of eyes on any usability issues.

Make it Personal

Aside from basic functions, I would love to take a deeper dive into the personalisation potential this app could have. I also believe that a personalised system can help improve user retention, especially if users get to rate movies and write reviews, or a movie recommendation system based on user's genre preference.

Accessibility Considerations

Going forward, more accessibility considerations such as screen reader capability and language options can definitely be added to help make this app more user-friendly and inclusive for all.