Movie House Responsive Website
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.
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.
To create a responsive website so that movie-goers could access the online ordering from any device and all have the same experience.
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.
Lead researcher and designer
May, 2022 - August 2022
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
The first major pain point my research conducted was that users were having difficulty selecting their theater and seat for the delivery of items.
The second pain point was the user was unable to make any modifications to the items they had selected.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
Unmoderated usability study
United States, Remote
8 Participants from different backgrounds
20 - 30
Users need a way to pre order items for pickup along with delivery
Users need the checkout process to be quick and easy
Users need an account to save their most ordered items
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
After usability study
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
After usability study
Screen Size Variations
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.
"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.
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.
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.
Continuously improve the design with small changes and keeping the design up to date. This will allow a great user experience for many years.