Web Design
A movie theater website where the local community can visit to see showtimes and buy tickets online.
User Research, Wireframing, Prototyping
Project Duration
February 2023 - March 2023
The Problem: At the beginning of 2023, there were many floods in northern California and many people had to close their businesses. Since their business would be a big part of their income, I wanted to create an application that helps these people to continue selling their products as long as they could.
The Goal: A goal of this project is to promote communities to shop locally and make aware of the businesses that are around.
Research consisted of two different parts. A usability study with a lofi prototype and another usability study with a hi-fi prototype. Going into the user research, I was hoping for ways the user can interact with the website without any guidance. Since this is one of the ways to know if the website is ready, I wanted the navigation to be simple.
There were inconsistencies with movie posters alternating and changing designs on different screen
Extra buttons were added to add additional filters. This turned out to be more confusing and unnecessary
Some pages only had images with little to no information or additional functions
About Raina:
Raina was born and raised in her small town in California. The town has one locally owned movie theatre and has never had an online presence until 3 years ago. Raina would usually have to drive to the movie theatre to see which movies they show and watch trailers on her own time. She wants a way to buy tickets online and watch trailers without too many extra steps.
Problem statement:
Raina is a local movie enthusiast in her small town who needs a way to preview movies online because she wants a more streamlined way of knowing what movies to watch before buying tickets.
Age: 26
Education: Undergraduate
Hometown: Hollister
Family: Eldest daughter
Occupation: Junior employee
Goals:
Movie preview,
Buy movie ticket,
Refreshed look
Frustrations:
Website is very old,
Hard to find website,
No way to buy tickets
A. Open browser and search movie theater
A. See what's new on home page
B. Look for interesting movies
A. Pick a movie that might look interesting
B. Find more information about that movie
C. Watch the movie trailer
A. Pick a movie
B. Choose a date
C. Pick a time to watch the movie
A. Confirm movie and time
B. Choose how many tickets to purchase and what type
C. Input information on billing and card information
D. Confirm purchase
Calm
Interested
Intrigued
Fascinated
Excited
Intrigued
Excited
Confused
Fascinated
H
Impatient
Make website accessible to multiple screens
Focus attention to certain parts of the page for wuicker scanning
Embed videos so no additional links need to be opened
Make movies and movie times very visible
Expand on the color scheme for text inputs
After the five different styles, I chose to go with a large banner to greet the user. Different sections that showcase different types of movies available as well as different theater locations. I wanted to lay out all information on the home page.
<-- Left Image:
I wanted to draw the users attention to the movie that would make the most revenue which is why I chose an image/video on homepage. I put movies lined up and scrollable so users will be able to know what section these types of movies are in.
* Section for easy browsing of featured films
* Large image/video on landing to draw users attention to the featured movie
- - - - - - - - - - - - - - - - - - - - - - - - - -
Right Image: -->
Showtimes page has a filter system as well as a movie trailer along with movie descriptions. The main goal of the showtimes page is to showcase movies with the desired filtered system. This makes the experience quicker for the user instead of checking with dates and times manually.
* Filter system to easily choose preferred days and times
* Trailer next to movie for quick decision on movie
The button to the right is a link to an Adobe XD prototype
(opens in new tab)
Round 1 Findings
Round 2 Findings
User’s mentioned how the payment process didn’t feel complete or was missing information. With that, a movie poster of the film they selected was used to add visual cues
<-- Left Image: Before Usability Study
--> Right Image: After Usability Study
The changes were small but creates a familiarity with the other screens. Users noticed that this page had a different color scale and use of colors. It felt separate from the rest of the website. Buttons were brightened and words were darkened.
<--Left(top) Image: Before Usability Study
-->Right(bottom) Image: After Usability Study
The button to the right is a link to an Adobe XD high-fidelity prototype. (opens in new tab)
1. The top banner is made to stay fixed so the user can easily navigate to whichever section they want. This removes the need to scroll all the way to the top everytime.
2. Buttons are contrasted with the background and includes a word of what the button does. This gives the user a visual cue of what is going to happen when a button is clicked.
3. Different versions of the website were also considered to accommodate different screen sizes.
Impact:
The designs made for this movie theater website followed a more click through structure. Online orders were a key focus so cues for the user to click on a button to buy movie tickets. Buttons are contrasted and emphasized to show importance.
What I Learned:
I learned that consistency is key. Some minor things like color shade and whether a button was rounded or not makes a big difference in professionalism.
If you think I will be a great fit for your company, let's get to know each other!
