Booking movie tickets in the car

Cinemapp

A seat booking and buying app

Overview

An app for movie goers who would like to buy tickets or book their seats in advance. The main goal for this app was that users can quickly and easily book or buy tickets for the movie.

The challenge

There are only a few apps that can be used for booking or buying movie tickets so users have to buy it on the web or wait in lines before the movie. Although responsive sites are one way to buy or book tickets on the go, a dedicated mobile app would be easier to use.

The solution

The goal is to create an easy-to-use seat reservation app with the function of buying tickets. The app should have clear instructions and quick process.

Time scope

March - 2022

Tools

Figma logoPhotoshop logo

Roles

  • UX research
  • UX Design
  • Wireframing
  • Prototyping
  • Usability testing

The design process

Empathize & understand the customer

User research

To understand the motivations and the pain points of people, I conducted an interview and also a survey.

Through the interviews I wanted to find out how people feel about endangered species and what are their motivations when it comes to saving them. I also wanted to understand what are those things that keeps them away from helping. Through the survey I wanted to ask many people what information are they interested in and what activities would they see in a site like this.

From the research I realized that people are undereducated in this topic and sometimes they do not even know what they would like to know or what would be interesting for them.

Pain points

  1. Options: As there are only 2 mobile app in Hungary where you can buy and book movie tickets, the options are limited. Other platfroms sometimes do not provide responsive sites
  2. Process is only one-way: Many respondents stated that sometimes they just want to browse if there is anything they would like to see and there is no easy way to change cinemas or movies
  3. Layout & precision: Many respondent complained to the layout of the seat reservation part and that it does not indicate any distrubing elements e.g. doors, separating bars etc.
  4. Basic information: the apps for movie ticket booking/buying usually do not have any extra information e.g. about the movie, the snack bar or the toilets
Big picture storyline - a guy buying tickets online

Creating personas and problem statements

After the research and interviews I got a good picture about the main pain foint of the user. Before I created ideas I also created sotryboards to illustrate what is the problem I want to solve. The personas also had a problem statement

The problem statement: 

Tom is a Tech-savvy university student who needs a movie theater seat reservation app because he would like to make sure that he will have a good seat to have the best possible experience

Customer journey and identifying the opportunities  

I created a journey map to realize frustration that may come up and try to find solutions for them. Some of the point I highlighted was: easy to find app name, low data usage, seat ratings, clear markings of empty seats, clear indication of prices, send confirmation through the app and also through e-mail.

Define the problem and coming up with solutions

Starting the design process

I started the design process with generating user flows, content libraries, information architecture and mind maps. This helped me to see what are the main elements that solves users’ problems and easy to follow.

Mind mapping

To see the structure of the app I created a mind map that provided tha base when starting to ideating and designing paper and digital wireframes.

Sitemap for the informative website with full off resources

Ideation & design

Paper wireframes to digital wireframes to lo-fi prototypes

First, I needed some ideas how to achieve the goal of the project and I spent a relatively good amount of time brainstorming and finding the best solution. During the ideation phase I used method such as the Crazy eights and ‘How might We’.

I created several wireframes on paper, so I can select the parts that I really like and put them together. Then I turned them into digital wireframes and connected the pages to have a low-fi prototype.

Usability test, iterations  

After creating the wireframes I conducted an unmoderated usability study with 10 people. I recorded their thoughts and clicks on the app. Their task was to select a seat, buy ticket and then check their bought ticket in the app.

Some things that needed to be changed

  • Clear fields that need to be: Most users don’t know what are the necessary fields to proceed so that I have to give clear instruction about necessary fields that need fo be filled out before proceeding
  • Make a large field clickable: Users usually click on the whole box and not on the circles - Make the whole box clickable not just the circles because during travel or walking it is hard to click on the circle
  • Outlines and button sizes: Proximity principles are missing, users reported too much info on the seat selection page and sometimes too large text in the buttons
home page low-fi wireframeMovie page low-fi wireframeSeat selection wireframe with seat previewBooking overview before paying

Hi-fi desing & usability testing

Home page mockup
Users can choose from a movie list or a cinema list, depending on their preferences (want to see a movie or just choose one from a nearby cinema)
Cinema page mockup
People can check the selected cinema's services (e.g. accessibility informations), the snack and coffee bar and also information about events
Seal selection screen mockup
While choosing seats, people can easily move between cinemas and dates and see the seatings. Barriers in the room are also displayed
Bough ticket barcode mockup
After buying a ticket, it will appear in the app as a barcode that can be read in the cinema

Results & take-aways

From this project I learned the importance of user feedback in the earlier phases as this saves you a lot of time and work. Iterating is actually a good thing because you can improve your designs. In fact, usually the end-design looks differently than the wireframes. I learned a lot about design systems, color shemes and other UX principles, but I also realized that I still need to improve (which I'm so excited about).
Creating mockups that speaks also cruical because this way you can show your stakeholders what was your purpose and what were your initial thoughts.

All screens mockup

thanks for reading this case study!