Movie ticket and seat reservation
A responsive web design
Currently, most movie theater websites are responsive websites, whose appearances change based on screen size and orientation. Even so, I still find that users tend to avoid reservation flows on mobile devices due to poor usability.
My role
UX / UI Design
UX Research
- Individual project for Google UX Design Certificate
Design tool
Adobe XD
Timeline
8 weeks
The Problem
Seat selections are made based on either past experience or guesswork
People go to movies because they want to enjoy watching movies on a big screen, with better sounds and visual effects. But it frustrates users when there is not enough information to help choose the best possible seats. You will never know, in reality, how close you will be sitting to the screen. Users always try their luck and hope for a good outcome when reserving seats online.
The Solution
Providing users with helpful information that helps them make seat-selection decisions on both small and large screen devices.
Research - User Interviews
“Booking on big screens is always way better than small screens.”
Information is easier to read and find on desktops.
Difficulty with small-sized screens, especially when it comes to choosing seats.
Booking tickets and seats are processed on desktops/laptops more often because information is easily captured with less scrollings.
Checking seat availability of each showtime one by one in order to find the best seat is inevitable and tedious.
Inadequate seating information on the website leads to disappointment when arriving at the theater.
Online reservations require an account on most movie theater websites, and it’s disturbing when the account password cannot be recalled correctly.
Research - Competitive Analysis + The Gap
I researched both nationwide and local movie theater websites.
The Main Insights
Users hope that they can make well-informed and conscious seat decisions.
The seat map on mobile devices always requires more time and energy to navigate, causing a negative user experience among the most mobile users.
Changing between showtimes is done frequently, and users are tired of doing repetitive actions over again.
Except the regular login method, providing alternative log-in options for returning members may help the overall experience.
Design + Evaluation + Improvements
From wireframes, lo-fi prototype, to mockups and hi-fi prototype, I conducted 2 rounds of usability study with 10 users and iterated my design based on users feedback. There are 4 major improvements I made in order to give users a better experience using the website to book tickets and seats.
1. From “Cinema photos” to “ View from the seat”
Users go to movie theaters because they want to have a better viewing experience. As a result, what view they will see when sitting in a movie theater is a key factor to decide whether the viewing experience is good.
In order to provide useful information to help users choose seats, I think why not give users a preview of the actual view.
I implemented static cinema photos instead of an originally planned 360-seat map due to technical constraints.
In the first usability study, I found 2 users went straight to click on the seat they wanted to choose and missed “Cinema photos”. The reason they missed it at all was that they did not expect the “Cinema photos” to serve a purpose of showing the view from the seat. The copywriting here should be adjusted.
Showing the photo of “view from the seat” as the user clicks on the seat doesn’t need users to take extra steps in the process of seat selections and it also streamlines the whole booking process.
I accidentally prioritized mobile users when designing and I didn’t notice it until users pointed out in the usability study.
In the second usability test, users pointed out how easy it was to maneuver on the mobile device, and hoped to see it on the desktop design too.
I iterated on designs and made sure that on both large and small screens, users can easily scroll and identify the row and number of the seat.
2. Seat Map Scrolling
Rows and numbers are always in view
Could not always see the numbers
At first, I thought putting the ‘available seats’ information on the showtime page is enough for users to make faster decisions, but that’s not enough.
When choosing seats, that’s the time when users need to change another showtime.
Easy showtime changing was well-received by users, but they expected to see more related information to help them choose the different showtimes.
I decided to follow the coherent design of putting showtime and available seats altogether to help make faster decisions.
3. One click to change showtime
Failing to remember the password to an account should not be the same as failing a test, preventing you from getting something you want.
Providing users with options to log in can help accelerate the reservation flow and improve the overall experience.
If users choose not to sign up for an account, there’s no need to punish them for not allowing the ticket reservations. (Extra fee is charged for non-members so our business is still growing too! )
4. One-time login and Non-members checkout
The Final Screens
Conclusion + Lessons Learned
What I would do differently next time.
1. Lots of time will be saved by validating each design iteration with users before expanding the design variations.
I skipped the lo-fi prototype usability testing on mobile design because I assumed that I had gathered enough insights from the users on large screen design. I iterated the large screen design and also started designing high-fidelity mockups for small screen variations based on the results of users testing on large screen designs only. It did give users a better feel of the real website when seeing higher fidelity prototypes, but it also cost me more time fixing usability issues on hi-fi designs of both sizes.
2. I was too focused on improving the usefulness of the small screen design so I almost neglected that the big screen design needs to be looked into.
I am talking about the design of the seat map. It struck me when an interviewee questioned out loud in a usability study, “It’s great that I can still see the rows and numbers as I scroll on my mobile phone. But why can’t the desktop version have the same feature? “
I really appreciate that users always share their genuine thoughts on my design, giving me a lot of chances to reflect and improve.
