Back
Movie Theatre Booking App
Problem:
There is no overview when, where and which movies are presented in movie theatres around you
Goal:
Design an app that allows users to easily book movie tickets in theatres near them
My role
Conducting user research, creating Personas, user flows, paper/digital wireframes, low and high fidelity prototypes and usability studies
Project duration
March 2022 – June 2022
In the foundational research phase of my project, my goal was to collect information about the users and their product needs. To do this, I held semi-structured interviews in which I explored the wants, needs and pain points of different users while booking movie tickets at their movie theatres. Qualitative data was used to understand the goals of target users and to describe their experiences.
My primary user group were people in the age between 21 to 60 years old that were either working people or students. The data provided from the interviews helped me to empathize with the users and build the following aggregated empathy map. Further I created Personas, User stories, User journey maps and problem statements based on the outcome of the interviews.
In the next step, themes in user demographic data were recognized and users were grouped into personas – fictional users whose goals and characteristics represent the needs of a group of users. I created the following two personas, Petra and Leila.
A part-time working mom with two children and a full time student in her twenties. Both have different knowledge when it comes to technology. Based on the created personas I defined a user journey map for each of the two to better understand their needs and thought patterns.
Based on the user journey of Petra and Leila, I created a problem statement for each of the personas to better visualize their pain points. Those pain points will be used to define the main functions of the app. While the problem statement summarizes the problem of the two personas.
A view at the competitors is essential to better understand their product strenths and weaknesses. Those strenths and weaknesses will be used to form a product that eliminates the weaknesses and combines the strengths.
I used the Procreate app to make multiple sketches with different variations. Those 4 frames represent the main workflow of the ticket reservation app.
In some cases, elements originally included in a low-fidelity prototype were kept in the final design after they were carried over to a new, high-fidelity prototype.
The first version of low-fidelity prototypes displayed the main workflow. From a landing screen to the movie overview / homescreen to the movie theatre overview and seat reservation.
Confirmation screen, Checkout and Booking screens were added as well. With this prototype I started to conduct my first round of usability study. The study was set-up as the following prompt describes it.
With the first round of my usability study, I was able to identify pain points and create insights through my study. One of the main pain points was the complicated Location/Date element.
I re-designed the element to a date only element. The user is now able to specify their location via profile settings and the date can be picked with a date carousel.
Before
After
Two specific features were requested by the users which created pain points. The users were not able to cancel their booking. So a big request was a cancellation feature within the app.
Another important feature was to get a QR-Code feature. Most movie theatres in Germany send QR-Codes via mail to their customers to enter the theatre.
I added both of these features to the Bookings screen since it is easy to access via the bottom app bar and overall the main screen with all the necessary information.
Before
After
After implementing insights from the first round of the usability study into the low-fidelity prototype, I started to design a high-fidelity prototype.
I created a sticker sheet with certain elements that were used often in the prototype. I used the following colours and fonts in the process.
With the second round of my usability study, I was able to identify further pain points and create insights based on the research. One of the main pain points was the need for a movie search function. I added a search function with the loupe icon that enables users to search for specifc movies in their region. Furthermore I updated some of the elements for a more accessible design such as the coming soon element and the choose movie button.
Before
After
4 out of 5 users where asking for more information on movies, when scrolling through the movie overview. I added a movie overview screen after clicking on the “choose movie” button in the homescreen.
The user can see the duration, genre and the age rating. A quick summary and a trailer is added as well.
This screen adds a confirmational character to the whole booking workflow.
SIGN-IN SCREEN
MOVIE INFO SCREEN
CONFIRMATION SCREEN
BOOKING SCREEN
HOMESCREEN
THEATRE SELECTION SCREEN
ORDER COMPLETE SCREEN
CANCEL BOOKING SCREEN
HOMESCREEN DATE
SEAT SELECTION SCREEN
COMING SOON SCREEN
EMPTY BOOKING SCREEN
Starting the case study, I did not think that research will be such a main driver for creating features. I was more drawn to creating the creative parts of this case study such as wireframes and high-fidelity prototypes but i learned quickly that usability testing is a very important part in the whole process. Without insights from users I would have forgotten some main features and earned some experience with design decisions as well. Since this was my first experience with user interviews I could improve my interview style and have a broader spectrum of participants. I used for this case study only people that I know which may caused a non-objective way of looking at things.
My experience with Figma enhanced a lot and I had to learn the hard way that working in a organized way with components, color styles and text styles can make your life so much easier. Especially after getting insights from usability studies and changing the design from some of the features.
In the process of creating the high-fidelity prototype and after doing some testing I noticed that there are always features that could be added as well. I learned that at some point it is good to just make a cut and deliver a MVP and add features later that make the app better. Iteration is an important part in creating prototypes and I was happy to experience that first hand.