Packaging the Drive-In Experience:
Redesigning purchasing and concessions for Electric Dusk Drive-In
Duration:
2 week sprint
Project Type:
Concept
Team:
Me
Kellene Young
Laura Rhoades
My Roles:
UX research
Visual design
Interaction design
Usability testing
Electric Dusk’s Needs
Electric Dusk Drive-In is a pop-up drive-in theater in Los Angeles, CA. The Electric Dusk leadership team was looking to redesign their digital experience so that users can watch trailers and purchase tickets on their own site. Additionally, they wanted the new site to reflect the delightful experience that customers have in real life, and were looking for guidance on ways that they could use their digital presence to improve the in-person customer experience.
The Problem: An Inconvenient Experience Without Customer Control
Electric Dusk’s purchasing experience forces potential customers to leave their site to learn about their offerings. This disjointed purchasing experience results in potential customers losing focus on their initial objective – they leave the site, do not purchase tickets, and they do not return to continue browsing.
Additionally, Electric Dusk’s in-person experience has a complete absence of digital enhancements. People know that a drive-in theater provides a “retro” experience, but they also have modern expectations about how the venue will serve them.
Our Solution: A User-Defined Environment
We found that people were looking for improvement in four main areas of their experience with Drive-In theaters:
Flexibility:
Allow users to research and make purchases on any device
Freedom:
Users can choose where to sit and with whom ahead of time
Variety:
Provide multiple concessions options
Service:
Help customers manage disturbances
The biggest uniting theme was that people wanted control over their environment.
Research
How can Electric Dusk Stand Out?
We wanted to understand what sets Electric Dusk apart from the competition and where it can stand to improve. We conducted three types of analysis:
Feature Analysis
Layout Analysis
Task Analysis
Our key takeaways were that Electric Dusk should:
Use a single-column mobile layout
Have movie trailers embedded on their site
Allow customers to order food/concessions from a mobile device at the venue
Explain the parking/spot system
Have the checkout on their own site
Charge by car rather than by person
What Problems will Users Encounter on the Existing Site?
The direction from the business was to keep users on the Electric Dusk web site for their entire experience, so we wanted to make sure that experience was as seamless as possible. We did a heuristic evaluation of the site to take note of issues that could cause friction and improve them before moving the entire experience to Electric Dusks site, thus making the points of friction more problematic.
Takeaway: make the interface minimal, use micro-interactions to create focus and a “fun” feeling and keep users engaged on the site even if the first movie they look at isn’t the one they decide to watch.
Who Are the Users?
We interviewed moviegoers – some of whom had frequented drive-in theaters, and others who had only been to traditional theaters (but might go to a drive-in theater due to COVID-19). We found that, prior to arriving at the venue, customers wanted to use the mobile site and desktop site for the same purposes and that the determining factors for which device they would use for discovery and purchasing were:
Availability – if they’re on the go, a computer is likely not available to them.
Communication – they buy tickets on the same device they are using to communicate with their movie watching group. If they are texting with friends on their phone, they will buy tickets on their phone. If they are in a video call with family or coworkers on a computer, they will buy tickets on their computer.
After completing all the discovery interviews, we synthesized with affinity mapping to create a moviegoer persona.
The Moviegoer
The Moviegoer loves every aspect of the movies: the smell of popcorn, the dimmed lights and the banter with friends that follows once the credits start rolling.
Goals:
Have a feeling of normalcy in the time of COVID
Enjoy the nostalgia of the drive-in
Needs:
To connect with their friends/socialize
Be in control of the situation
Frustrations:
Impatient, especially as it relates to technology
Feels that the movie theater hasn’t evolved
Design
Design Studio
As a team, we held a design studio where we collaborated with another team to quickly ideate and iterate on the concessions experience. The most valuable elements that came from this session were the outline of the on-site concessions flow and the add/subtract interaction.
Critical Parts of the Experience are Off-Site
Trailers are off-site: 100% of users said that they looked at movie trailers before purchasing tickets; however, Electric Dusk does not have the ability to watch trailers on their site, forcing users to leave Electric Dusk’s site to decide if they want to see a movie. This creates an opportunity for users to leave the site and never return to purchase tickets, especially if the trailer they watch does not appeal to them.
Purchasing is off-site: This means that it cannot be fully customized for the unique drive-in experience. It also means that, if users leave the purchasing experience at any point (due to frustration or after completing a purchase), they are very unlikely to return to the Electric Dusk Site.
On-Site Trailers
100% of users said that they wanted to watch a trailer before purchasing a movie ticket. We created a page where potential customers could watch trailers without having to leave the site, thus increasing the chances that they would purchase a ticket from Electric Dusk.
Our goals for the trailer experience were to ensure that:
The user is aware of and connects with the specific movie: The user recognizes which movie trailer they are watching
The user focuses on watching the trailer: we moved the purchasing elements and the movie title and showtime out of the way so that the user could focus on watching the trailer
The user is aware of there they are in the context of the available info on the page: we used a simple animation where the ticket information, title, and showtime (all the ancillary information) moved downwards and out of the way to show them that the information is still there.
The user’s focus moves to purchasing tickets after the trailer ends: After the trailer is complete, the video section of the screen automatically reverts to the banner state and the purchasing information moves back up into view. This movement highlights the purchasing section and guides the user to ticket selection.
Purchasing Tickets is Complicated for Drive-In Theaters
Users want to choose their spot in advance, to pay by car instead of by person, and to buy tickets for their entire group.
Electric Dusk needs to sort spots by vehicle type - larger vehicles had to go in the back and sides of the area, because they would block the view of smaller vehicles if they were in the front. Additionally, Electric Dusk needs to set limits on how many people are allowed in each car size to ensure that they are not losing money due to people piling into a single car.
This means that the user needs to interact with the system to purchase tickets in a way that informs them of these rules.
Simplify Ticket Purchasing by Combining Interactions
We made the vehicle type a ticket category and used images and icons to facilitate the understanding of what users will be purchasing. This created a delightful action from a confusing one, and allowed us to streamline the checkout by removing the need to select ticket types on the checkout screens.
On-Site Checkout
An on-site checkout allows for an experience that is customized for Electric Dusk’s drive-in theater, including:
Spot Selection: Customers can choose the parking/viewing spots for cars in their party to ensure that everyone in their party can sit together.
Concessions: Users can purchase concessions for their party in advance.
Branding: The checkout experience can use Electric Dusk’s colors, typography, button styles, etc. to ensure that the entire experience is fluid and uses the same design patterns.
Purchasing Concessions During the Movie
Most users said that they wanted to have their concessions delivered to them. In addition to increasing safety during the COVID-19 pandemic, users said that having concessions delivered would allow them to better manage disturbances and improve their overall experience.
Reflections: What Did I Learn?
When leading design work, it’s important use product management skills. Breaking down every page into individual elements ensures clarity on what is most needed, and makes it easy to divvy all those elements up among the team.
Interaction is a critical element of the interface. Defining goals of an interaction beforehand is quite helpful and will ensure that your interactions have a positive impact on the user’s experience and purchasing decisions.