Overview: Bengies is a Drive-in Theater located in Maryland that opened since 1956. They have the biggest theater screen in the USA. Our goal for this project was to create a mobile-first responsive web design that includes key features such as: an in-house ticketing system, digital e-ticket, and a newly improved movie schedule information page.

Team: Eun-Hye Rho, Michael Lowstetter, Israel Casas

Client: Bengies Drive-In Movie Theatre

Duration: A 2-week design sprint

Tools & Methods:

User Interviews
Affinity Mapping
Plus and Delta analysis
Competitive Feature Analysis
Persona Development
Designing Navigation and mapping it out
Design Systems
Wireframing
Prototyping
Usability Testing

Bengies Drive-In Theatre

New age tech for a timeless movie experience

My Role:

Throughout the entire process, the team worked together as UX Designers. We all had our hands on the User research, Synthesis, defining the problem statements, solution statements, and the design process. In each step of the project, we divided up our workload and were in constant communication with each other for feedback and group design decisions. This was one of the best groups I've ever worked with am super grateful to have spent that time with my teammates and create the redesign of the Bengies drive-in mobile-first responsive prototype.

“Where can I buy my tickets?”

Bengies had a third-party ticketing system, that lead customers to go off-site and not come back to the site. Sometimes purchases wouldn’t be complete. We saw that there was a huge potential client and business relationship that was missing because Bengies’ web space did not cater to the user’s main need: purchasing movie tickets in-house. Also, after conducting some Research, Synthesis, and Analysis our team found that the there were several opportunities to create additional user friendly design features. Moreover, the website’s global navigation and information architecture could be better organized.

What does our Audience say?

We conducted User Interviews to better understand people’s interaction with current movie ticketing systems and their Drive-In Movie Theatre experience. After affinity mapping our user statements we found out that 60% of the user’s pain points were about how some movie websites had a lack of information that would’ve improved their movie ticket purchasing and going experience. 30% of the users had trouble finding their e-ticket after their purchase. And 10% of the users stated that knowing the proper movie schedules were important to them.

User statements:

“I purchased a ticket to the wrong theatre because I was confused on which location”

“I don’t like it when the ticket is stored in a the browser and I lose the ticket QR or confirmation.”

“I wish the movies and dates were more organized”

Competitive Feature Analysis

After doing a Competitive Feature Inventory Analysis we decided to implement new design features based on our user research.

Purchasing tickets online in-house instead of third party
Order Confirmation/ My Ticket’s page
Estimated time arrival
Parking tier system
About Movie section: with trailers, reviews, and comments

Ideating and Wireframes

After determining the features we wanted to add, we ideated and designed wireframes.

We edited the Global Navigation because some of the information architecture seemed redundant. Shop and Concessions could be embedded within each other. As well as hiding certain theatre information within the Theater Info tab. In order to plan this out, we created a site map in Figjam.

Current Bengies global navigation. **(Before)**

Our site mapping for the re-design of Bengies’ Global Navigation.

The re-design of the global navigation. **(After)**

Global Navigation for the Mobile Responsive Design.

Building what the Users wanted

Here are examples of our key design Hi-Fidelity features:

The Check Out system

We created an in-house ticket purchasing system. We intentionally used Visibility System Status as one of the Heuristic Design principals. Because most of our users complained about the lack of information they had during their ticketing process we wanted to make sure that even our check out system had a visual status bar to make the users understand where they were at in their process. This gives them a sense of security through visual feedback.

Here are Our House Rules

We also Included a House rules video within the checkout system so that users are informed about all the rules before they finalize their purchase. We wanted Bengies’ customers to know the rules and expectations before they come so that the movie-going experience can be as smooth as possible. The information that used to be tucked under the Global navigation is now put in front of the customer.

Trailers, About, Reviews, and Comments

One of our goals were to build client and business relations. Knowing that users liked seeing movie trailers we created a About Movie page would be a great opportunity to not only meet the users’ needs but also create a space for interaction and information. Community engagement with the clients’ online webspace can create a good user experience and business relations.

Where Are My Tickets again?

We created a “My Tickets” page so that people can access their tickets again, and see their order confirmation. Using one of the principals Heuristics of Design, The Match Between the System and Real world, we felt that the use of skeuomorphism was a fun design homage to the classic drive-in movie theatre experience. Moreover, creating form and function we wanted use that space to give useful information to our users by putting the QR code and the estimated wait times on there.

What was great about our Approach?

Although this was a conceptual design project, we understand designing for users need would increase positive client and business interaction. Including better movie scheduling information and site navigation improves the user interaction with the company site. Moreover, It is likely that ticket Sales and customer attendance would also increase due to the features that were added, especially the in-house ticket purchasing system we designed.

What are our users saying about our prototype?

After we created our wireframes prototype we walked through user testing for our mobile-first responsive design. The users were able to complete the task at hand: to purchase tickets. However, some of our UI components needed some tweaking based on our user testing feedback. Here were the main components of the changes we made from the feedback:

Color Accessibility:

Because Bengies Brand has very strong colors it was a challenge to balance out those two red and blue colors in a tasteful way throughout the frames. Our first design had a huge blue on the red footer. One of our users stated that it was hard on her eyes. So we soften the footer to be less overwhelming. We also did a contrast check based on Bengies’ brand colors to make sure we understood the accessibilities of these two colors.

Checking the color accessibility for brand colors.

User Direction:

There is power in design where one button can change how users interact with a design. One button can also direct users to a different path within the user flow. When users were on the landing page the book tickets button was not there. We asked the users to book movie tickets from the landing page. There was a lot of hesitation from each of our users across the board and a lot of clicking around. Because our main goal and the customers’ main needs are to purchase tickets, we simply but powerfully added a big “Book Tickets” button. This dissipated the initial search time and made purchasing tickets an easier task.

In the same way, we wanted to direct our users to go and discover the page that has their E-tickets after the confirmation of the purchase. At first, some of the users just clicked on the home button, not knowing that there was a page dedicated to holding their tickets. So we got rid of the home button and simply replaced it with one option: My tickets. Sometimes less is more.

What didn’t work & Next steps

UI & CONSISTANCY: As we received more user feedback there were some comments made based on the UI components. Given the fact that blue and red brand colors are challenging to put together, our next steps would be to create a more aesthetically pleasing UI design. This could be done through comparative analysis and design study of other sites with red and blue designs. We also could’ve improve on our design consistency. Certain buttons were not the same throughout the UI due to spacing. Making better information design decisions in this aspect would help simplicity of the UI design.

THE METRICS: It never hurts to do more research after launching a new design. The more user testing and KPI metrics analyzed, the more information we can gather on how specific our design changes improves the ticket sales. Because this was a conceptual design sprint, we didn’t have KPIs to work with. Knowing that research will always be part of improvement, we know that looking at data and reports will help us hone in on better design decisions.

What I learned:

Connect with your teammates on a human level first. This is so that when you work with them you understand them. This is what our instructor has told us and I find this to be so true. When you make that personal connection with your team you build understanding, empathy, and empowerment to work as a team. We are all different, think different, and work differently, but making that connection with one another at as a glue to work together.

Create a design system so that we are all on the same page. We knew we couldn’t always be in the same virtual space when working together. We had other responsibilities to deal with outside of class. So when working on the project individually we found it helpful that we already established a design system to keep us on the same page when it came to UI consistency. It also grounded us in our visual vision when we had to create new frames with a new direction

What worked:

What worked well in our project was was team work, our research, synthesis and understanding what features would improve our client’s business.
Why did we work well as a team?

Communication
- We made sure we constantly updated each other about our work.
- We asked questions.
- Created a safe place to talk about our thoughts and opinions
We used Notion to help keep us on track with our Project Management.
We all had different ideas but all of us understood that our vision was really to collaborate well as a team and develop solutions catered towards our users.
We all equally sought out responsibility and took on roles to complete the project together.
We used the right research tools in order to gather all the key information in order to implement the right design features.