Movie Theater App
I designed a mobile app for a fictional local 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.
The 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 Audit
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.
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.
Talia
Talia is an avid movie-goer who needs an easy way to watch movie trailers, get info on movies, and buy tickets from her local theater all in one place because right now she goes to several mobile apps/websites to do so.
Steven
Steven is a casual movie-goer who needs an easy-to-use mobile app where he can stay informed on movies coming to his local theater because right now he doesn't know where to look for information.
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.
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.
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.