Movie Trailer App

Mobile App Design

Project Overview

The Product

MVe Theater is a [fictional] local movie theater in a Metropolitan area that mimic the City of Cape Town in South Africa. Their app offers trailer viewing and movie ticket booking.

Problem

When people walk into the movie theater they are sometimes indecisive on what to watch Or they want information on what movies they are looking forward to.

My role

lead UX designer and UX researcher

My Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Project Duration

February 2022 - June 2022


Goal

Create a movie trailer app for a MVe theater, that will allow users to watch trailers of the movies before they can book a movie.

User Research

Summary


Participants in this research were recruited using snowball sampling. The research was conducted as an interview using phone call and WhatsApp chats, this made it easy for the me to probe deeper with questions to get an understanding from their perspective and constructed empathy maps for the users. The user group which was interviewed were mostly students and working young adults


The research proved my key assumptions on the research that people goes to movie theaters not knowing what to watch or they are indecisive on what to watch so they need an easy way to that will save them time in making that decision or they just need the information about upcoming movies but the internet is too big to find all relevant or authentic information.

User pain points

Time

This user group do not have the time to go watch trailers on YouTube before they can book a movie ticket.

Sparse Information

Information on the YouTube/google is not in the same place.

Unauthentic Information

Information found on google on YouTube can either be fan made or speculations.

Personas

Here are some of the personas.

Problem statement

Arnold is a youtuber,

who needs to make upcoming movie reviews using trailers,

Because google and/or youtube information is sparse and sometimes not authentic.

Problem statement

Karabo is a student, Who wants to book for a movie to watch on Friday with friends, because it is hard choosing a movie in while in the theater.

Then I have constructed a user journey map for Arnold persona.

Paper wireframes

I took time to draft paper wireframes of screens of the app. This gave me idea of features that should make it to the digital wireframes and to be able to pick those features that solves the user pain points. The idea was to make every information available for the user on home screen.

Digital wireframe

The initial designs for digital wireframes were based on the user research.

The navigation bar is constructed to be accessible to the user wherever in the flow screen.

Here are some more wireframes.

Low-fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was watching a trailer and booking a latest movie, so the prototype could be used in a usability study.


View a full movie trailer prototype:

here.

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Here is the Round 1 usability study

Usability Study

10/06/2022

Study details

Research Questions

  1. How successful was the user in finding the movie trailer of the movie they wanted to watch?

  2. What can we learn from the user flow, or the steps that users take, to book a movie ticket.?

  3. How did they complete the task?

  4. How difficult was it for the user to use the app?

  5. What are some pain points of using the app?

  6. What improvements can be made on the app?

Participants


5 participants


Participants are interested in going out to watch movies.



Methodology


5-10 minutes

South Africa(Remote)

Unmoderated usability study

Participants were asked to perform tasks on a low-fi prototype.

Prototype Tested

The low-fi prototype app of movie trailer app was tested and can be viewed here

Themes

People want functional booking system

  • 4 of 5 participants said they wanted fully functional booking system.

  • 4 of 5 participants said they want to be able to confirm their booking.


“Why can’t I complete my booking? The confirm feature does nothing” ~ Martin

People want to be able to search for movies

  • 4 of 5 participants want to use search function to find movie.


“There should at least be a search function so that it is easier for me to find my movies” ~ Themi



Insights and Recommendations

Research Insight

Search bar and labels

Users wants to be able to search for movies and the search bar should be visible to them.

Easy Functionality

Users wants to be able to book movie tickets and have their booking confirmed

Recommendations

  • Complete the “booking” option so that users are able to fully complete their booking

  • Add “confirmation” screen for booking

  • Add labels for the “search bar”


Mockup


Early designs allowed for some customization,

but after the usability studies, I added the search functioning. I made it so that user can access all relevant tabs from the landing page.

Before usability study I








After usability study

Before usability study II








After usability study


The second usability study revealed that users were frustrated when booking a movie that they do not know the duration of it and age restriction on it so I added those details in the refined mockup

Here are of the Mock ups

Hi-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for watching a trailer and booking a movie.


View the MVe Theater high-fidelity prototype

Accessibility Considerations

1

Uses pictures of movies to help or give users idea of what they are booking.

2

Has translation feature to cater for those who might prefer other languages than English.

3

Used icons to help make navigation easier.


Take Away

Impact:

The app makes it easy for users to make movie bookings and feel that they would recommend it to other users.


One user from peer feedback said:

“Mmmmh, that was straight forward[after completing the booking user flow]. ”

“I would definitely recommend it to anyone”

What I learned:

Throughout the design process I have realized that usability studies are important core of design, they give users opportunity to dictate the final project.