UX Research | UX/UI Design
E-commerce concept for LA pop up drive-in theater Electric Dusk Drive-In, responsive mobile and desktop redesign.
The Stakeholders
Electric Dusk Drive-In is LA’s longest running pop up drive-in movie theater. Providing a friendly, fun and retro experience, they show new and classic movies for all ages.
Tools
Hand Sketching
Miro
Notion
Figma
Team
Our team consisted of four UX designers and researchers working together and individually throughout the research and design process.
Role
I worked both in research and design, from writing and conducting interviews and task analysis to sketching and wireframing.
The Problem
Electric Dusk’s current website does not reflect their fun, retro atmosphere and is overloaded with ads and un-clickable content. The site is non-responsive, making the mobile experience very difficult to navigate.
The Opportunity
With COVID-19 restrictions shutting down indoor movie theaters, the demand for drive-in theaters has seen a significant uptick. With a less cluttered and responsive website, Electric Dusk Drive-In can give their customers an easier, more enjoyable experience potentially increasing their customer base and revenue.
The Research
To get an idea of where improvement might be needed, we conducted thorough research and testing for the existing site. Before involving users, we explored the site as a team, taking note of any issues that we felt needed attention. To validate the changes we would be making, we needed input from users to see if their experiences were similar and if they would find any additional problem areas.
The Current Site
At first glance, we could see issues with the information hierarchy on the page. The site is dominated by ads and banners containing no information about what movies are playing or when.
The global navigation does not provide the information that the majority of users will be looking for such as: showtimes, calendar, hours of operation, prices, and food and drink.
What Do Other Sites Do?
Competitive Analysis
Landing pages allow users to view movie showtimes immediately
Both competitors use distinct call to action buttons
Users can watch movie trailers by clicking on the movie covers
Comparative Analysis
Ticket information is highly prioritized
Include brief venue information
Call to action buttons are easily located
User Interviews & Task Analysis
I wrote the scripts for the user interviews and task analysis. Four participants were asked about their past moviegoing experiences and given tasks to perform on the existing site.
We found that there was a trend of confusion and frustration with the amount visual content and the overall navigation on the site.
Affinity Map
With the data we compiled from the interviews and task analysis, we created an affinity map to find the trends among our users and verify where the problems are.
User Persona
Doug’s Problem Statement
Doug needs an efficient way to decide on a movie to watch and purchase tickets to so that he can spend quality time with his movie date and have an enjoyable experience out of the house.
How Might We…
Amp up the good
How might we streamline Doug’s movie selection process?
Remove the bad
How might we ensure that Doug never sees a bad movie?
Question assumptions
How might we remove the need to search for movie times?
Our Solution
Deliverables:
In app ticket purchases
In app trailer viewing
Easy and quick movie showtime and price viewing
Consolidated and easily accessible venue information
User Flow
We created a user flow to demonstrate how a user will move through the site in order to browse movies and purchase tickets.
Sitemap
In order to update the information hierarchy of the site, we created a sitemap to reference as we moved into the visual design.
Experience Design Process
Lo-fi Sketches
As a team we ran a design studio to quickly sketch our design concepts. We converged our sketches into a refined iteration saving us valuable time for prototyping.
Design System & Component Library
I was personally responsible for designing the about us, food and drinks, and getting here pages. By having design systems and a component library in place, we were able to each work on different pages and easily combine them.
Hi-fi Wireframes
We raised the fidelity of the wireframes by adding color and images to give the design the fun, retro feel that Electric Dusk provides to their customers in person.
User Testing
To test the first iteration of the prototype we asked four participants to perform simple tasks including purchasing tickets, viewing trailers and finding directions to the venue.
From our testing we learned that users were unable to view trailers without purchasing tickets. Necessary changes were made to fix that problem.
Our final results show that our users were able to perform all tasks quicker and with less frustration than on the original site.
High Fidelity Prototype
Try It Out!
Next Steps
Moving forward, we would conduct another round of testing to further refine the site and potentially add features such as social media sharing.
I also believe that increasing the responsiveness of the site to include tablets would make the site even more accessable.