Project Overview
The Product
The Retro Theater website was given to us by our client that ran a mom and pop movie theater that had heavy design influence from the 80's when they first opened. We wanted to create a website that brought the 80's back to life and to personify the theaters vibe online.
Project Duration
Duration February 1st to April 10th
The Problem
The theater we were working for had no online presence and it was difficult for movie goers to find showings and times, as well as book tickets in advance.
The Goal
The goal was to create a website that not only encapsulated the 80's retro theme of the theater, but also make it easy for users to navigate and book movie tickets online, while still conveying the message that this was a family owned and operated theater.
My Role
My role throughout this project was lead designer, lead researcher, as well as taking on the role of graphic design for logos, background, and banners.
Responsibilities
My responsibilities for this project included but were not limited to, conducting research and compiling data, wireframe design, mockup design, graphic design, and prototype design.
Research Overview
By conducting extensive user research and creating empathy maps, we were able to target pain points in the user experience. Our initial assumption was that users simply wanted a website to purchase show tickets. However, through in-depth interviews and studying user behavior, we discovered that including additional information about the movie, theater, and staff would make the experience more homely and welcoming. We aimed to create a unique experience distinct from other big box theaters and our research helped us achieve that goal.
Throughout our research process, we gained valuable insights by conducting in-depth interviews with key users and developing user personas. Our focus was on catering to busy working individuals who struggle to find the perfect venue that suits their specific needs. Our user group confirmed our initial assumptions while also introducing fresh perspectives and considerations. For instance, users emphasized the importance of theater amenities such as special events and food options.
By incorporating these valuable insights, our application addresses all aspects of movie selection, while providing a comprehensive solution for my users.
Pain Points
Navigation
Users want a simple navigation experience that doesn't get them lost when looking for movies.
Tickets
Users want to be able to book tickets directly from the theater website and not be redirected to a third party booking sight.
Movie Info
Users want a way to read about the movie to better understand if its a film they would like to see or not.
User Personas
Sarah
James
Design
Site Map
My goal was to identify pain points that the user may have and design a site map that will help mitigate most pain points, as well as fulfill the users needs.
Paper Wireframes
This step was done with digital wireframes and only using crazy 8's sketches as references.
The reason for this was I already knew exactly where features were going to be incorporated into the design and it would be easier to share ideal with colleges remotely.
Paper Wireframe
Screen Size Variation
My goal during this process was to keep similar attributes and functionalities between screens. A user in theory would be able to navigate the phone screen just the same as the web page.
Digital Wireframes
My goal was to make the site as easy to navigate as possible and display movies that would be most relevant to users, so searching for them would not be a hassle.
Screen Variation
Left: IPad Pro
Right: IPhone 13 Pro
Low Fidelity Prototype
Initially for my low fidelity prototype I wanted to simulate the user flow for booking a movie tickets. This way we can identify critical user issues and prototype shortcomings.
Usability Study
Parameters
Study Type
Unmoderated Usability Study
Participants
5 Participants
Location
United States, Remote
Length
20-30 Minutes
findings
Based on the gathered information, it was evident that users expressed a desire to utilize the ferris wheel selector for booking movies. The ticket page presented challenges for users, as it was difficult to navigate and caused frustration. Additionally, the cart function was identified as an area that required improvements in order to enhance the overall user experience. These findings highlight the importance of streamlining the ticketing process and updating the cart functionality to ensure a smoother and more enjoyable user journey on the website.
Finding #1
Users wanted to be able to select movies on ferris wheel presenter.
Finding #2
Users had difficulty finding the book movie page because parts of the page were hidden.
Finding #3
Users wanted to be able to add their rewards info into the website when checking out.
Finding #1 Solution
I updated the home page and changed the movie ferris wheel to be more intuitive and interactive so users will be able to select movies and navigate to booking from it.
Finding #2
Solution
To make the ticket selection and booking process I updated the layout to consist of two separate pages as opposed to one. This helped users who where unable to find the ticket purchasing page due to it not being visible.
Finding #3 Solution
I updated the checkout page to include loyalty information from users.
Mockups
After Second Study
After a second usability study I found that the clashing of yellow font on a blue background was difficult for users to see.
IPhone 14 Mockups
High-fidelity Prototype
Final Thoughts
During this project I really wanted to explore different design techniques and color pallets as well as theme. It was difficult to maintain an easy to read page with a vibrant color scheme and a maximalist 80s design. However I feel that it was pulled off well and meets the criteria for from and function.
I would like to finish off the other pages including but not limited to snack ordering page, staff page, and about us page. as well as continue testing after new features are added and reviewing old feature to improve upon design.
Thank You For Reviewing This Project!
END