top of page

ReelHouse Cinemas

UX/UI Design, Research, Branding, Wireframing, Prototyping

2022-2023

Background

ReelHouse is a concept project where people can browse movies, watch trailers, and book tickets. ReelHouse aims to make the process of searching for movies easy by way of simple-to-use filters, being accessible, and allowing its users to pick seats and book tickets in advance to avoid long lines.

Problem

People spend too much time trying to find movies online and waiting in lines at movie theaters. Having an intuitive, user-friendly app makes the process of finding movies easy and helps to avoid those long lines, ensuring you make it to your movie on time.

ReelHouse Cinemas Mockup 1 no background.png

Goal

Discover the primary pain-points of those who go to movies to ensure I design an app that will make finding and booking movies online quick and efficient.

My Role

My role was to design the ReelHouse Cinemas app from conception to delivery. This included: conducting interviews, making paper and digital wireframes, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Research

Pain Points

1

Some moviegoers become frustrated at the amount of time it takes to find specific movies.

2

It can be difficult to read/understand the movie descriptions online for those with certain disabilities or reading difficulties.

3

Too much text on movie synopsis online can create difficulties when looking for movies.

4

Sometimes finding age-appropriate movies for children can be hard.

Persona

Problem Statement

Christian is a full-time college student with dyslexia who needs more options when searching for movies online because sometimes it is hard to find movies and read their synopses with his disorder.

"Being dyslexic can really turn an everyday, simple task into a nightmare."

Christian Franco

pexels-matthew-baysantos-5432407.jpg

Age:
Education:
Hometown:
Family:
Occupation:

19
College Freshman
Charlotte, NC
1 Goldfish
Part-time barista

Goals

•Find movies playing without spending as long trying to read the descriptions.

•Spend the little free time I get doing what I enjoy with minimal frustration.

Frustrations

•“Sometimes being dyslexic can make using the internet a lot more difficult than it should be.”

•“I find myself giving up on reading movie summaries when it takes more time than it should.”

•“I like the experience of seeing a movie, but it’s not always worth the trouble.”

User Journey Map

Christian’s journey map showed how helpful it would be to have an app dedicated to the process of booking movie tickets online that was accessible to its user.

Screen Shot 2023-03-28 at 4.00.59 PM.png

User Flow

Screen Shot 2023-05-12 at 12.56.48 PM.png

Wireframes

Taking the time to draft multiple sketches of the same screen ensured that each element would address user pain points. For the homepage, I chose to make multiple options (New, coming soon, and leaving soon movies) visible from the moment they arrive in the app.

Paper

ReelHouse Homepage Wireframe.png
ReelHouse Menu Wireframes.png
ReelHouse Seat Selection Wireframes.jpg
ReelHouse Payment Page Wireframes.jpg
ReelHouse Movie Info_Trailer Page Wireframe.png
ReelHouse Confirmation Page Wireframes.png

Digital

ReelHouse LF Movie Booked SS.png
ReelHouse LF Details Tab SS.png
ReelHouse LF Profile Page SS .png
ReelHouse LF Seat Selection SS.png
ReelHouse LF Updated Menu 1.png
ReelHouse LF Showings Tab SS.png
ReelHouse LF New Movies SS.png
Screen Shot 2023-02-22 at 2.57.30 PM.png
Screen Shot 2023-02-22 at 2.16.49 PM.png

I wanted users the be able to quickly and easily select seats without worrying about whether they are selecting seats for the right day, time, or location. I also wanted some inclusivity for those who require wheelchair access to easily see their options as well.

Low-Fidelity Prototypes

A low-fidelity prototype of ReelHouse Cinema movie trailer app shows the user flow of searching for movies, watching the trailer and seeing other details, and booking tickets to see a movie.

Screen Shot 2023-01-09 at 4.01.28 PM.png

Usability Study

I conducted two rounds of usability studies. The first round helped guide my designs from mockups to prototypes and improve on pain points. The second showed that the insights from the first study and the improvements made because of them resulted in all five participants finding the app easy and straightforward to use.

Pain Points

1

Clearer cues on the “Showings” tab.

2

Users would like to see what payment option is currently selected before they purchase.

3

A menu to access things like rewards faster and easier.

Iterations

My initial designs for the showings tab caused some confusion on why some times were grayed out. Also, once a user selected a time, they were moved onto the next page. I chose to make the unavailable times more obviously unavailable as well as add a continue button at the bottom in case a user decides on a different time.

The initial usability study revealed users had a difficult time knowing what payment option was selected. I amended the design to show the payment method selected (card is selected in the mockup) and which card, in this case, is being used. They still have the option to use a different card if desired.

Design System

Screen Shot 2023-04-21 at 9.18.57 PM.png

High-Fidelity Prototype

To Conclude:

While designing this app, I learned just how important it is to conduct usability studies. It can be easy to miss design flaws when you’re the only one looking at the designs. Having others test your designs can provide you with so many new ideas!

bottom of page