Kitty Huang - STAR Cinema App prototype

The Project: To create a seat reservation app for the movie theatre.

The Problem: Current seating plan is lack visibility. Users can’t guarantee getting a good seat. The goal is to include visual elements to help users determine the distance between the screen and the seat in order to increase the probability of getting a good seat.

My role: As a Generalist UX Designer, my responsibilities include conducting user research and interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, maintaining accessibility standards, and iteration on designs.

Deliverables:
- Design system including sticker sheet for the app
- A high-fidelity prototype

Tools:
Figma, Adobe Photoshop, and Adobe Illustrator

Understanding the user

After interviewing users regarding their experience with the current movie theatre reservation system, I’ve discovered many potentials to enhance the user experience of the current online platform. All users reserve their seats and complete the transaction online, which means an app will be very useful. Most of them are having an issue with the quality of the seat, whether it is worth the value or the visibility of the seating plan is questionable. Also, all users prefer a simple, direct, and flexible experience. The app’s interface needs to have a clear orientation to guide the user, personalisation will be helpful for auto payment and movie recommendations. After all, watching a movie should be a relaxing activity, and the process of getting a seat should be fast and simple.

| How often do you go to the movie theater to watch a movie?

| Why do you go to the movie theater?

| What is your process like in getting a seat in the movie theater?

| What are some of the pain points (frustrations) you may have during this process?

| Can you describe a favourite seat reservation app and why you like it?

| What are some of the features you want from a seat reservation app?

Meet Julia

Julia is a super busy mom with a full-time job who needs to know the distance between the screen and the seat because she wants to get a good seat to enjoy her break.

Understanding Julia’s workflow can help to know what are some of the key functionalities for her in the app. It also allows me to step into users’ shoes to get a better understanding of the user's needs.

Persona Profile – Julia

Julia's user journey map

Meet Tom

Tom is a movie lover that visits the theatre once a month, he wants to have a simple, direct, and flexible seat reservation process because he feels frustrated when things get complicated.

Understanding Tom’s current condition will allow me to incorporate the accessibility functionality and consideration into the app. It also helps me to understand his workflow better.

Persona Profile – Tom

Tom's user journey map

Competitive Analysis

I conducted a thorough competitive audit on some of the most popular movie theatres and discovered several interesting facts and potentials for STAR Cinema App.

The majority of the features between competitors are quite similar and the target groups are quite diverse. Here are some of our key findings:

– Most of them are very promotion based and overwhelmed with pop-ups.
– Kids are one of the key target groups, there have special days and offers to attract this audience group.
– 2 out of 3 competitors don't allow non-members to access the seating plan or to reserve a ticket. The user completed 60% of the user journey and needed to cancel everything due to the limited access to the member-only feature.
– 1 out of 3 competitors have considered accessibility compliance and inclusive design elements such as providing translation in another language.

Preparing the Journey

I outlined a user flow from start to finish to highlight key steps for users to complete the workflow, from the first entry point to the final confirmation of purchase. This allows me to get a clear picture of the user journey and allows me to map out the navigation workflow.

Based on the user research and data, I used a paper wireframe to draft my idea for the app design. It is a great tool for idea iterations.
I put a star beside the elements that would use in the initial digital wireframe.

Digital wireframes

I looked at different movie sites to understand the relevant content to be on the app and based on the user interview feedback to help me to come up with this design for the movie app.

One of the main feedbacks was the current seating plan can’t guarantee a good seat. I put some thought into it and did some research to come up with a new design to solve this problem.

Basic User flow: The user goes into the app, picks the movie they want to watch, selects the time/date, picks a seat, confirms their purchase, selects payment, and downloads the ticket.

Usability Study

I conducted the first round of an unmoderated usability study using low-fidelity wireframes with 6 participants. A list of prompts was created based on the usability research study plan. The result from the first round allows me to revise the user flow and adjust the wireframe better for the prototype. The second round of usability study was conducted using the high-fidelity prototype. It allows me to figure out some missing functionality and revise some choices of design to enhance the user experience.

Round 1 findings:

- Ticket purchase button is confusing
- Not enough customization option
- Easy workflow

Round 2 findings:

- Link header image to the relevant page

- Confusing date format
- Increase the legibility of the seating plan

Affinity Map

The “Ticket Purchase” button was not too obvious, so I decided to update its position along with an icon. Now the hero image is linked to the relevant movie detail page.

After the second usability study, I decided to change the date selection functionality to avoid unclear date format. This way will allow users to pick the date easily.

High-fidelity prototype

The final improved high-fidelity prototype demonstrated a cleaner user flow for purchasing a movie ticket. It also incorporated functionality that enhances the user experience.

Style Guide (Sticker Sheet)

The colour ratio of 60-30-10 with 60% of the dominant color, 30% of the secondary color, and 10% of the accent color is a classic decor rule that helps create a color palette for a space. This rule also applies to the digital space. The dark mode style fits the theme of the movie app, we all watch movies in the dark for the best experience. I went with a clean and simple design system for the app, legibility is the key. With the consideration of accessibility, the colour contrast is set to high contrast to ensure good readability.

Takeaways

Putting the user front and center is the key success of this project. I learned the importance of usability tests and the design iteration process. These processes really help the design to come to life and turn the app into a useful tool that can really help people.

Thank you for your time. I am very excited to share this case study with you. I hope you gain some valuable insight through this study. Be sure to check out my other projects below!