Simplifying the process of booking movie tickets

Enchancing the user experience by optimizing for speed and reducing redundant steps

Overview

The idea behind this problem came from my own interactions with the mobile movie booking app here in Sweden. When I went to the movies with a few friends not too long ago, I was in charge of booking the tickets. For the first time I used the app on my phone instead of the website. What stuck with me was how many uneccesary steps I had to take in order to finally make the booking, making the whole experience tedious and left me wonder, what could I have done better? If I were to improve on the booking process and the overall user experience?

With this in mind, I re-designed the user flow of booking movie tickets by eliminating the redudant steps and optimizing for efficiency using Sketch and Invision. At the same time,  I also wanted to challenge myself to design for iPhone X and think in new unconventional ways of deliverying the user interface and the user experience by creating new way of interacting and laying out the design.

Problem Approach

In order to tackle the problem, I first had to define the biggest issues with the platform. From my own personal observations and talking to a few friends who has used the app previously. The main problem with booking movie ticket in the app was the user flow that the user had to go through in order to book a ticket. It simply had too many steps/popups, taking up time and space. What I also discovered was that many valuable information was hidden during these steps, only to appear later in the final confirmations. This makes it very tedious for the user if they wanted to change a specific info. In this case, they would have to go back several steps in the process in order to do so.

As you can see from the user flow chart above, I've broken done the amount of steps in the current cinema ticket booking app. In total there are 10 steps that the user have to go through to make a successful booking of cinema ticket. The main issue is that a lot of these pop-ups are unessecary in most cases, as they dont fully utlize the amount of space that is available on the screen. At the same time, it also makes it harder for user to gain a good overview of the information that they have selected. Each time that the user go to the next step, they loose the information of what they selected previously and only at the absolutely end of the process does this information appear again. Which in turn means the user have to backtrack if they were to want to change a detail.

Breaking down the core functionalities

I studied the flow chart that was layed out and defined the core functionalities the user would need to perform in order to book a ticket.

  • Finding a movie
  • Select location/time/date
  • Select amount of people/seats
  • Pay/add payment
  • display movie-ticket

Sketches & Wireframes

Once I layed out the functionalities of the application I started iterate and sketch various types of UI to streamline the process of ticket-booking. For this design I wanted to utilize iPhone X’s larger and longer screen area to create an one-page design to minimize the amount of scroll the user need to perform. Once I was happy with the paper sketches I transformed these into wireframes.

In the final wireframes, I have broken down and combined the core functionalities into a 3 step process, with the last screen being the confirmation screen showing the ticket and the booking confirmation. The wireframes has been kept as low-fidelity as possible to ensure that I can quickly rework elements and not influence the testers with the visual aspect of a high-fidelity design. This way I can first test the flow of the design and functionalities.

After conducting quick user tests on the wireframes, the testers had no problem navigating the application and its functionalities. During this test session I got valuable feedback regarding what types of information the users would like to have. This was possible as I left the field open to interpretation and I could instead ask users what they would like to see. This turned out to be the general information (Date,Time, Cinema) which the user selected in previous screen. With these new gained Insights, I preceeded to create high-fidelity mockups of the design.

Final User Flow

In the final concept of the movie ticket booking app, the user flow has drastically changed in comparison to the original. Instead of the user going through 10 pages in order to book a ticket, this has been reduced to 4 pages in the new design. Where the 10 steps that the user had to go through have been reduced to 6 without loosing out on the core functionalities to streamline the process.

User Testing

The user testing was performed on a smaller scale, 5 user-tests with people who have previously used the movie ticket booking app on the phone. The mockup was linked up in Invision to provide an interactive experience, where the testers could see the flow of the application in action. The tests were conducted in person, in a semi-structured style where the testers was given instructions of "Find the new Avengers movie" "select wednesday 17th, at 16:00". By observing their interaction with the mockup prototype I could discover the potential flaws and issues in the design.

Some take aways and things that I iterated on for the final designs from the user tests were:

  • More info about movie (run-time, genre)
  • Easy access to movie trailer
  • See seats left for each time slot
  • remove redudant selection for payment

Final User Interface

What have I learned?

Low-fidelity lets user fill in the gaps.
When I conducted user tests using the low-fidelity wireframes, I was worried that the user would not understand what I tried to create. However, to my surprise what I discovered during the user-tests was that the wireframe prototype was a great way to encourage users to think and fill in the gap on features who arent already determined.

Higher-fidelity lets user to see whats missing.
At the same time, high-fidelity wireframes gave the users a picture of a “workable” product. Here the user instead focuses on the elements on the screen and points out specific changes and also features that they would like to have.

Simplicity is King
By working on this personal project, it once again made me realise how many redudancy in design we see in our daily lives. Especially as I studied Interaction Design and always try to think about the interaction aspect when using different applications. After the user-tests where the testers told me how interesting they found that the whole process could be compressed into fewer steps without loosing out on the important functionalities.

What I'd do differently?

More User-tests on different levels
As this was foremost a personal project, the user-tests was conducted in a much smaller scale than I would do normally. I believe more interesting aspects could been found or discovered through iterations of user-tests conducted while refining the prototype. Going from the low-fidelity mockups to a mid-fidelity prototype and then the high-fidelity design shown in the end. As different fidelity creates different focus on the design and can eventually bring out problems that might not be expressed by the other fidelities.

Back to Home