top of page
Group 1 (1).png

REEL'S
Movie House
Responsive Website

Project Overview

The Product:

REEL’S Movie House is a trendy boutique style movie theater. They currently only have three locations, but they have aspirations to grow the brand.

The Problem:

REEL’S Movie House wanted to create a way for customers to be able to order food and drinks 
from their seats, in the middle of a movie and have it delivered. As well as, allow customers to pre-order for pickup before they head to their seats.

The Goal:

 To create a responsive website so that movie-goers could access the online ordering from any device and all have the same experience.

Responsibilities:

Conduct user research by developing personas, problem statements, and journey maps. Conducting a usability study with potential future users, create wireframes, and develop low fidelity and high fidelity prototypes.

My Role:

Lead researcher and designer

Project Duration:

May, 2022 - August 2022

Group 1.png
User Research Summary:

My user research included interviews and questionnaires with eight people from vastly different backgrounds. I started with having the users interact with a major competitors online ordering process. Afterwards I conducted interviews with all the participants to get their thoughts about the experience. Once I had some common issues arise, I developed a questionnaire to determine if the ideas i had to fix their issues would want the user to access the online ordering more frequently while going to the theater.

User Research: Pain Points

1

The first major pain point my research conducted was that users were having difficulty selecting their theater and seat for the delivery of items.

2

The second pain point was the user was unable to make any modifications to the items they had selected.

3

The third major pain point the users faced was they noticed there were way too many steps to complete an order. This can cause frustration if you are trying to get an order in during the movie. 

4

The final pain point the users faced was there were no options to pre select items to have them ready upon arrival.

User Research: Personas

With the first research study complete and I have their major pain points to consider, creating personas will help group the majority of users in to specific categories. I created two separate personas to capture the key target audiences views and user experiences.

Persona 1 : Lana

Problem Statement:

Lana is a busy mother of 3 who needs a way to pre

order snacks for the family because it is hard to get them all there early.

Screen Shot 2022-10-03 at 5.12.12 PM.png
Screen Shot 2022-10-03 at 5.18.56 PM.png
User Journey Map

Creating a User Journey Map really helped see things from an outside perspective. Creating a solution for a group of people with specific needs can make the experience better for everyone.

Group 3.png
Empathy Map

Understanding the feelings and issues that others have with everyday tasks can seriously open your eyes to their situations. Creating solutions for these problems can make a better experience for all users.

Screen Shot 2022-10-04 at 10.25.55 AM.png
wireframe reels.png
Paper Wireframes

While creating the paper wireframes, it gave me the opportunity to quickly sketch ideas to fix some of the users pain points. Creating a login will make checkout much easier and can allow the user to save items beforehand.

Screen Variations

Creating the screen size variations was made 
easier by first creating paper wireframes. 
Being able to sketch some similar components 
on each made the digital wireframes cleaner 
and more closely relatable. 

Digital Wireframes

The goal was to create a simple online 
ordering process for the user. They will 
have the opportunity to preorder or 
order for seat delivery in the theater.

Screen Variations

Understanding the feelings and issues that others have with everyday tasks can seriously open your eyes to their situations. Creating solutions for these problems can provide a better experience for all users.

reels wireframe.png
reels wireframes 2.png
Low-fidelity Prototype

This low-fidelity prototype was developed from the first round user research. Below you will find an embedded code to allow you to access the prototype. Not all options are clickable but you will be able to choose items and complete a checkout.

Usability Study:
Parameters
Study Type:

Unmoderated usability study

Location:

United States, Remote

Participants:

8 Participants from different backgrounds

Length:

20 - 30

Minutes

Usability Study:
Findings

1

Users need a way to pre order items for pickup along with delivery 

2

Users need the checkout process to be quick and easy

3

Users need an account to save their most ordered items

Group 5.png
Mockups

After conducting the usability study, I came to the conclusion that typing your seat number would be more beneficial than clicking it on a seat map. Creating an account will also let you scan your ticket for easier and quicker ordering by automatically entering your theater and seat number.

Before usability study

seat map.png

After usability study

reel checkout.png

The Usability study brought an understanding that having a drop down sub-menu made it more difficult to see what was a part of the order. Also, having the categories toggled back and forth on top was inconvenient.

Before usability study

Web 1920 – 4.png

After usability study

menu reels 2.png
Screen Size Variations
MacBook Air.png
MacBook Air (1).png
MacBook Air (2).png
MacBook Air (3).png
reels home.png
reels f&d.png
reels combo.png
reels checkout.png
High-fidelity Prototype 

This high-fidelity prototype was developed from the usability study findings . Below you will find an embedded code for the web design and mobile design to allow you to access the prototype. 

Apple iMac Retina.png
Going Forward
Impact:
"This design will make going to the movies so much more enjoyable, I hate waiting in line for snacks and missing the trailers"
- Usability participant #5
This design can greatly increase the movie experience for the user. The design will allow the user to order snacks and drinks without missing any of the movie or waste time waiting in lines.
What I learned:
I learned that every single person has a different experience and understanding of how new web sites and apps are navigated. Creating a design that is universally understood and accessible is always the main goal. Continuing to keep the end user in the forefront of the design process will help create a design that is universally understood.
Next Steps

1

Testing of the high-fidelity design is complete and the necessary changes have been made. The design will now be handed off to the development team to implement the designs.

2

Once the development team launches the new design there will still be monitoring of the websites overall function. The design process is a constant cycle that will always need tweaks and changes.

3

Continuously improve the design with small changes and keeping the design up to date. This will allow a great user experience for many years. 

bottom of page