Popcar is an app that lets drive-in moviegoers order food and drinks with ease. The items can be delivered to users' cars or get picked up at the snack bar. Menus are unique to the venue—but in this project I mainly focused on providing service to moviegoers at the Mansfield Drive-in Theatre & Marketplace. The app offers a comprehensive menu with accessible text features and search filters for food allergens or other dietary restrictions. Users can enjoy savings by entering promotional codes at checkout or signing up for discount programs. Users can manually enter in their payment information or use digital wallet integration for speedy and secure checkouts. This app is free to install and use with no hidden fees or confusing subscriptions to manage.
My Role & Responsibilities
I worked solo on this project, taking on the responsibilities of a UX Designer and Researcher. I drew sketches, designed wireframes, rigged prototypes, conducted user interviews, usability tests and research, synthesized data, and crafted this portfolio. I also illustrated icons and crafted the Popcar branding guidelines.
For this project, I used: apps in the Google Workspace including Forms, Docs, Sheets and Slides; apps in the Adobe Creative Cloud including Illustrator, Photoshop and InDesign; the teleconferencing software Zoom; and the prototyping tool Figma.
Understanding the User
Qualitative Research & User Interviews
Utilizing my personal network, I reached out to two friends with characteristics that aligned well with my target users for interviews. They were sent a form I wrote that outlined my project, explained the purpose of these interviews, and asked for consent to record their sessions. During the interview, I asked open-ended questions from a script. I was mindful not to lead or pressure participants toward desired responses. Questions were kept short and simple with occasional follow-up questions to keep things conversation and to get elaboration.
Some questions included: What kind of snacks do you enjoy while at drive-in movie theaters? What do you like or dislike about buying snacks at drive-in movie theaters? Who do you typically go to the drive-in movies with and buy snacks for? How do you prefer to pay for drive-in movie tickets and snacks? What would make your snack-buying experience at drive-in movie theaters better?
After the interviews, I reviewed the video recordings and wrote out their transcripts. These helped me create empathy maps that outlined what participants said, thought, did, and felt.
Personas & Problem Statements
Deanna is a high school student with limited income who needs an easy way to place orders ahead of time for pickup because it is too chaotic and slow to place individual orders at the snack bar.
Carlos is a color-blind business owner with dietary restrictions who needs a legible way to select foods from the snackbar because buying the wrong food could lead to an allergic reaction.
Starting the Design
I drew paper wireframes of the four major screens: a welcome landing page, a profile page, a searchable menu, and an order review and confirmation page. I starred a few elements that I wanted to explore more in the digital wireframing stage.
Digital Wireframes & Lo-Fi Prototypes
Based on the starred elements in the paper wireframes, I began making digital wireframes in Figma. I kept these in greyscale and low-fidelity, using simple shapes and lines with minimal text. I wanted to visualize a potential user flow: opening the app, navigating to the menu, filtering out items with allergens, adding items to an order for carside delivery, and checking out. This would form the basis for my usability study.
Goals & Methodology
In July 2021, I conducted moderated and unmoderated usability studies remotely over Zoom. This was done in part to safely adhere with COVID-19 social distancing guidelines and to easily record the sessions from my desktop computer. I asked users to interact with a low-fidelity prototype on Figma. Afterward, they were invited to answer an anonymous questionnaire on Google Forms. The goal of this study was to better understand the types of features users expect and enjoy, which ones they dislike and avoid using, and how to better streamline the overall process.
Five people participated in the study—three identified as men and two identified as women—between the ages of 18-35. Two participants were students with part-time jobs while the rest were fully employed. One participant had a high school diploma, three participants had at least one Bachelor's degree, and one participant had a Master's degree. All participants were residents of the United States and identified themselves as active smartphone app users. All participants were familiar with the concept of drive-in movie theaters and had access to vehicles for personal use.
Research Insights & Recommendations
Some users will not use an app if they are required to create an account: Do not front-load the app with a welcome screen that forces users to choose between “continuing as a guest” or “creating an account.” The app should be accessible as a guest with the option to create an account later—if at all.
The menu screens and food items need better visual cues: Label the navigation better so users can follow their happy path with the least resistance. Button interactivity should be more clear with better haptic feedback or animated transitions.
Some users rely on discounts while other users want to add tips: Make it possible for users to enter promotional codes or join discount programs: students, military personnel, seniors, teachers, medical staff, etc. Since tipping is still a common practice in the United States, some users want the ability to tip their carhops during checkout.
Users want more flexible payment options: Make it possible for users to use different types of payment at checkout by integrating with digital wallets, payment apps, and gift cards. 63 million Americans are “unbanked” or “underbanked,” meaning they do not have easy access to financial institutions or carry traditional forms of payment like debit or credit cards.
The Welcome Screen
The welcome screen was removed. The menu screen now acts as the landing page when users open the app. If users would like to create an account or log in, they can do so from the icon at the top.
The Searchable Menu
The filter tags can be toggled to appear or disappear under the search bar. The item “add” buttons were enlarged to be more apparent. There will be a small animation to visually cue when an item successfully gets added to the cart.
The Checkout Process
More tabs with payment options—like Venmo, Cash App, Google Wallet and Apple Pay—have been added to the checkout area. Payment information fields have been labeled more clearly. Fields for promo codes and tips were also added to the checkout process.
Refining the Design
High Fidelity Mockups & Prototypes
🚧 These items are still in development! In the meantime, please enjoy this partial Figma prototype and a sneak peek at the Popcar branding.