.png){kind=logo}
Charity M. Jantzen,UXC
Showboat Drive-In Theater
Responsive Design Case Study
By Charity M. Jantzen
Nobody likes to wait in line, so we got rid of them!
Showboat Drive-In Theater responsive web and app
Welcome to a new moviegoing experience like never before! You can preview movies, purchase tickets, concessions, and merchandise, and rent this retro theater. Our site/app is designed to customize everything from where you park to the subtitles and closed caption descriptions, all from your selected device.
The Problem
Tony Ajana is an avid moviegoer and busy dad who needs a way to easily purchase movie tickets and concessions online because he doesn’t want to wait in line with many kids and miss the movie.
The Goal
Create an interactive method for users to streamline and personalize their theater experience. The utilization of this app will increase sales and ensure each transaction is free of queues.
My Role
All roles:
UX design and UX research from conceptualization to completion.
Responsibilities
-
Developing personas, user stories, and user journey maps
-
Conducting usability studies
-
Creating wireframes and prototypes
-
Testing and iterating on designs
-
Designing Mockups
-
High-fidelity prototype
-
Implementing accessibility
Understanding The User
User Research: Pain Points
.png){kind=small}
Navigation
Users were unable to locate information about the movies they wanted to watch.
.png){kind=small}
Interaction
Moviegoers feel rushed when they attempt to purchase anything at the theater.
Experience
Excessive queues often make moviegoers irritable; they abandon purchasing tickets or snacks from the snack bar.
Persona: Tony Ajana
I created three personas for this project. Tony Ajana is the primary persona and the project’s main focus. Two other persons were also made; they were referenced throughout the project as needed.
User Journey Map
I created this journey map to help me identify any gaps between the user persona and the user's mental model. In addition, the journey map assisted me with visualizing the user's overall end goal and how they needed to accomplish their goal.
Starting the Design
Sitemap
The users had considerable navigation complications, making it their primary pain point. I decided to use this knowledge, and I created a sitemap.
My objective was to make strategic information architecture decisions to improve overall website navigation. I opted for a navigation structure that made things easier for the users and had the flexibility to expand upon in the future.
User Flow
Before beginning I map out the user flow and use this as a guide as I start to build the pages. I find this extremely helpful when working alone and on projects that have a fast turnaround. In addition, the user flow provides me a method to track completed, outstanding, and what is considered out-of-scope designs as I am designing.
Paper Wireframes
After completing a competitive analysis and keeping in mind what the users and the stakeholders need, I started to sketch out variations of each screen in my app.
Initially, I thought having the checkout on the home page was the ideal solution.
Paper Wireframe
Screen Size Variations
Designing a fully responsive site is essential to me. I want to ensure that every user and their devices are supported. I started to work on the different screen size paper wireframes to make sure that each user had access to the site.
Digital Wireframes
Having the paper wireframes as a guide to create the digital wireframes helped speed the process along, and it was more understandable what was needed from the users. I noticed while making the digital wireframes a few interaction issues that I was able to address right away.
.png)
Low-fidelity Prototype
After receiving feedback from my teammates, I created a low-fidelity prototype with the fundamental approach of purchasing a movie ticket.
Usability Study: Parameters
Study type
Moderated usability study
Participants
5 participants
Location
Remote usability study
Length
20-30 minutes
Usability Study: Findings
These were the main findings uncovered by the usability study:
.png)
Purchasing Snacks
Most users struggled with how to add other concession items
.png)
Concept
Several users did not understand the process and were timid about purchasing and attending.
Date
Users were unable to declare what date they wished to attend the movie.
Redefining The Design
Mockups
Before usability study
After usability study
Mockups
After receiving feedback on the VIP/member profile, I decided to take a more social approach and add gamification badges to reward the users.
Before usability study
After usability study
Mockups
After the usability test, the results revealed that users want the ability to preview upcoming movies, not just this week's feature. As a result, I removed the large preview on the home page and added several smaller trailer previews allowing the theater to show more than two movies a week.
Before usability study
After usability study
.png)
High-fidelity Prototype
My goal was to reduce the amount of time the users spent in queues and their confusion and increase ticket sales; based on the feedback; I accomplished this goal. In addition, it was fun to learn a new program and all the triggers.
View the Showboat Drive-in Theater
Accessibility Considerations
I want to ensure the site is readable by people with low vision and color blindness. I accomplished this by providing the site was WGA AA compliant with a 4.5.1 ratio between the links, body text, and background contrast.
I wanted to utilize a hierarchical page layout to keep things organized and assist screen readers in navigating what to do next.
I designed the site with resizing text and text spacing, which helps the user with vision loss and other accessibility concerns.
Going Foward
Takeaways
Impact
"Outstanding!"
"I love the new site; it is amazing and well done."
The user found a newly "established absolute cohesive user flow with clear navigational cues." The site overall accomplished the user's mental model and goals. Users could purchase tickets, merchandise, concessions, and even receive parking spaces online.
What I learned
The most valuable takeaway for me is to keep a journal throughout the experience of goals, quotes, thoughts, and ideas as each deliverable comes together.
Next Steps
Conduct follow-up usability testing on the website and make changes as follows.
Begin designing the close circuit and subtitle apps for those with disabilities.
My next step would be to work on the sub-menus, get those mocked up, and ideate any new features.