Movie Theater App
I designed a mobile app for a movie theater from conception to delivery. Through a process involving research, interviews, initial design phases, and usability studies, I ended with a high-fidelity prototype of the app through Figma.
My app is featured in DesignRush's "19 Best Event and Entertainment Mobile Apps" article.
The Goal
Design a mobile app for a fictional local movie theater that allows users to get information about movies, browse trailers, and buy tickets to showings.
My Responsibilities
As a UX designer designing the mobile app from conception to delivery, my responsibilities included:
conducting interviews
paper and digital wireframing
low- and high-fidelity prototyping
conducting usability studies
iterating on designs
Competitive Analysis
Before deciding what to include in my mobile app, I conducted research on competitors' strengths and weaknesses. Observing what areas my competitors were strong in and what areas they were lacking in helped me learn what features would work well in my app and where my app would fit in the market. A summary of the competitive audit follows:
IMDb
(direct competitor)
Free database offering info about films
Desktop website and mobile app are easy to use but busy-looking with no strong brand
Subtitles are not available for movie trailers
Very thorough, consistent information about all films
Fandango
(direct competitor)
Purchase movie tickets online for participating movie theaters
Minimalist design with clear branding but overwhelming drop-down menus on desktop website
Smooth purchasing process with ability to save personal info for quick checkout
Not all films have the same type of info
AMC Theatres
(indirect competitor)
Purchase movie tickets online for AMC Theatres
Sleek design with strong branding but not enough negative space
Payment user flow is not very natural
Offers rewards membership program for free and paying members
User Research
I conducted interviews to understand the users I'm designing for and their needs. The primary user group identified through research was adults who often attend movies at their local movie theater.
​
The user group confirmed initial assumptions that movie goers usually purchase tickets on a mobile app or website and prefer to have knowledge about the movie they are about to see.
Pain Points
User research identified pain points users have when seeking information about movies and buying movie tickets.
1
Convenience
Not all ticket purchasing apps provided users with all the information they wanted.
2
Proficiency
Some users found movie apps to be confusing or hard to find information they wanted.
3
Awareness
Some users enjoyed going to movies at their local theater but were not always aware of what was showing.
User Personas
After identifying pain points, I created fictional users whose characteristics, goals, and frustrations represented the needs of a larger user group.
Age: 25
Hometown: Portland, OR
Family: Single, lives with
one roommate
Occupation: IT worker
Talia
"I'm always keeping up-to-date on upcoming movies and want a place with easy access to information about films coming to my local theater."
Talia is an IT worker at a large company. She goes to movies often and keeps up with new movie trailers by watching them on video streaming websites. She also uses her local movie theater's website to check when movies will be coming to the theater.
Goals
Wants a platform dedicated to movie trailers
Easy to browse and find information about upcoming films
Frustrations
Video streaming websites don't have any additional info about films
​
Her local movie theater website doesn't put trailers on theirs website
Steven
"I enjoy going to movies, but I don't feel informed about current movies in theaters."
Steven is an accountant and is married with two children. He enjoys going to his local movie theater with his wife on the weekends, but isn't always sure what is playing unless he sees commercials for films on television.
Goals
Be informed on movies currently in theaters
Easily access information about movies
Frustrations
Doesn't feel informed about current or upcoming movies
​
Doesn't feel knowledgeable about where to look for information
Age: 49
Hometown: Richmond, VA
Family: Married with two
adult children
Occupation: Accountant
User Journey Maps
I then mapped the personas' journeys as they normally would go from finding information about movies to going to the theater. Mapping the journeys helped identify further pain points and ideate possible solutions.
Talia
Mapping Talia's user journey revealed how helpful it would be for patrons of her local theater to be able to watch trailers, get info on movies, and buy tickets all in one mobile app.
Action
Watches trailers for upcoming films on video streaming sites
Checks other websites for info on films
Buys ticket through a ticketing company when movie comes out
Goes to movie when it's released
Task List
A. Go to website
B. Search for specific film's trailer
C. Watch trailer
A. Go to different website
B. Search website for each film
C. Read info on film
A. Search for local theater on ticketing company site
B. Pick move & showtime
C. Put in personal & payment info
A. Transport self to theater
B. Show proof of ticket
C. Go into screening
Feeling Adjective
Happy to watch new movie trailers
​
Frustrated she has to search for each film one by one
Frustrated she needs to go to a separate website to find info she wants
Impatient because it takes so many steps to get a ticket
Happy she is seeing the film
Improvement Opportunities
App that has all current/upcoming films' trailers in one place
App that contains trailers and all other info about films
App to buy ticket directly from local movie theater
Steven
Mapping Steven's user journey revealed that it would be advantageous to have a mobile app where the user can easily find information about upcoming movies and buy tickets directly from their local theater.
Action
Watches trailers for upcoming films on television
Searches internet for movie listings at his local theater
Buys tickets through a ticketing company
Goes to movie when it's released
Task List
A. Watches television
B. Sees a TV spot for an upcoming film during a commercial break
A. Goes to search engine
B. Search for local theater
C. Look through search results until he finds the listings
A. Search for local theater on ticketing company site
B. Pick move & showtime
C. Put in personal & payment info
A. Transport self to theater
B. Show proof of ticket
C. Go into screening
Feeling Adjective
Interested in the film shown
​
Curious where he can find more info on the film and more upcoming films
Annoyed he has to go through so many steps to find the listings
Confused by so much info on the website
​
Impatient because it takes so many steps to get tickets
Relieved the tickets worked
​
Happy he is seeing the film
Improvement Opportunities
App that provides users with trailers and info on upcoming films
App to easily and quickly find showtimes of local movie theater
App to buy ticket directly from local movie theater
Paper
Wireframes
To ensure the designs would address all user pain points, I started by drafting variations of each screen of the mobile app on paper.
​
For the movie trailers page, I prioritized visibility of the trailers, along with the ability to search the trailers and scroll through them.
DiGital Wireframes
I then took the best elements from the paper wireframes to create the initial screen designs in Figma. After the user research, I had found that the trailers page was one that users would often use, so I made sure to make the navigation and visibility of the page easy.
The page is organized into two tabs to differentiate between movies in the theater currently and those coming soon
Each trailer is the width of the screen, making each one very visible, and making it easy for the user to scroll through the trailers quickly
Some of the other user needs found during the research process were easy navigation to showtimes and immediate knowledge of movies currently in the theater.
Now playing section at top of the home screen for instant recognition of current movies
Recommended section based on users' previous ticket purchases for a more personalized experience
low-Fidelity Prototype
The low-fidelity prototype connected the digital wireframes in the user flow of purchasing a movie ticket. It also allowed users to navigate through major pages of the mobile app, so the prototype could be used in a usability study.
Usability Studies
I conducted two usability studies to test the app and discover any user pain points. The first study used the low-fidelity prototype, and the results helped lead the design of the mockups. The second study used a high-fidelity prototype and revealed what needed to be improved within the mockups.
Round 1 FindinGs
A back arrow instead of an x in the corner on the movie info pages would be a smoother user flow
Users want an obvious way to get to showtimes from home screen
Trailers section on movie info page would be easier to find above the cast list
1
2
3
Round 2 FindinGs
Trailers page would be easier and faster to scroll through with less negative space between trailers
The showtimes page needs a way for the user to pick a specific day
Recommended section and trailer section on home screen look too similar
1
2
3
Mockups
After the first usability study, I created high-fidelity designs that represented the final product. I then used the feedback from the second usability study to improve upon those mockups.
Before usability study
Changed Now Playing tab to red to draw attention to its function as a button
Decreased negative space to make scrolling quicker and easier
After usability study
Before usability study
Increased size of posters to make them easier to click on and added drop shadow to make them more dynamic
Changed the shape of the recommended section to differentiate it from the others
After usability study
More Mockups
HiGh-Fidelity Prototype
The high-fidelity prototype in Figma connects the finalized mockups in a smooth user flow with easy navigation and a clean design.
Takeaways
The mobile app would be successful in allowing patrons of the movie theater to get info about and watch trailers of current and upcoming movies, as well as purchase tickets all in one place.
​
While designing the movie theater app, I learned that the designs were constantly evolving through every stage of the design process. Usability studies helped guide the designs toward an end result that ensured the app is helpful to users and easy to use.