A Classic Duo: Movies and Popcorn

A conceptual project to add a new feature to a popular movie ticketing mobile app.

Fandango, one of the leading movie ticketing platforms, aims to “delight movie fans” and deliver the “total movie experience -anytime, anywhere.” However, at the time of this project, Fandango’s mobile app was missing an essential part of the movie experience: concessions.

My team’s mission was to integrate a new feature to pre-order concessions on Fandango’s mobile app. By doing so, we believed that users would have a more complete and convenient movie-going experience while increasing the app’s overall use.

The Challenge

Users need a way to purchase concessions through Fandango’s mobile app to decrease time spent in line and have a more socially distanced movie-going experience.

The Discover Phase

“I get concessions pretty much every time I go to the movies because it’s a habit… I usually get the big three: popcorn, soda, and candy.”

― User Interview Participant

  • Our research began with analyzing 5 direct competitors by combing through their websites and/or mobile apps.

    1. AMC

    2. Alamo Drafthouse

    3. Harkins Theaters

    4. Bow Tie Cinemas,

    5. MovieTickets.com

    We took stock of key features as well as some pros and deltas.

    • PROS = solid features that we could integrate into our designs

      • Purchase concessions online

      • Purchase concessions without a ticket

      • Integrate SMS notifications

      • Reorder from your saved favorites as a member

    • DELTAS = design opportunities that we could address

      • Buttons seemed too close together

      • Generally poor or outdated UI

      • Screens jumping to the bottom of the page to show the ticket

      • One competitor recommended signing up with Fandango 

  • We also explored Chipotle and Starbucks as both mobile apps mastered the food-ordering experience.

    • Both menus follow in-store experiences

    • Customization and options match what customers expect

    Both were also mentioned in user interviews with participants expressing reliable, time-effective, and positive experiences.

  • Our industry research left us with some assumptions that needed to be confirmed.

    • Movie fans would want a way to order concessions in advance to save time.

    • Amid the pandemic, users would want (and even expect) a “no contact” way to order concessions at the movie theater.

    • Fandango is missing a business opportunity by not having a way for users to order food.

    So, we recruited people who had experience going to the movies and ordering food through an app.

The Define Phase

“Well, the first thing is finding the shortest line because I don't want to wait. If my partner is in line for concessions, I'll grab our drinks from the bar that way we can kind of shorten the time.”

— User Interview Participant

  • As I reviewed the transcripts, I took note of some key observations that seemed unanimous.

    • It seems to be a universal “ritual” to purchase concessions at the movie theater despite the wait time and the egregiously marked-up prices of food and drinks.

    • All participants did have experience ordering food through apps pre-pandemic but there was a clear spike in their use of those apps more recently due to the impact of COVID-19.

    • As such, they valued social distancing practices and preferred “no contact” services.

    • Participants resented anything that required waiting, often looking for ways to cut down wait times (e.g., strategically timing online food orders, or splitting up tasks with folks within their party).

    • When it comes down to convenience versus waiting, convenience wins every time. If an hour-long wait time meant that they didn’t need to leave the comfort of their homes after a long day of work, they would rather risk their food arriving cold than going back out. 

  • We identified 20 affinity groups and prioritized 6 user statements to drive our designs.

    1. I usually buy concessions at the movie theater.

    2. I want a more efficient experience when ordering concessions.

    3. I hate waiting in line.

    4. I am comfortable with ordering food online.

    5. I order food from apps because it’s convenient. 

    6. I want a smooth app experience.

  • After drafting a list of potential features to pursue, we used the MoSCoW Method to rank each item individually.

    We ranked some items similarly so we quickly made decisions on those features. On items where our rankings differed significantly, we presented our stances and discussed them as a group.

    We eventually compromised and settled on a final list of features to pursue for our MVP.

  • Next, we created 3 user flows:

    • Initial Product Discovery

    • Checkout

    • Post-Purchase Discovery

    I focused on the last flow which mapped out actions that can be taken once a purchase is complete and the user is ready to go to the movie theater. This included accessing upcoming tickets, reviewing payment summaries, and processing refunds.

User interview affinity groups

User interview affinity groups

Feature prioritization matrix

Feature prioritization matrix

Proposed user flow

Proposed user flow

The Design Phase

As we progressed in levels of fidelity, we iterated our designs based on internal critiques and feedback from usability participants. I created the usability test plan and metrics, and my teammates moderated the testing session remotely.

We tasked users to complete the following:

  • Add movie tickets to order

  • Add concessions to order

  • Complete the purchase

  • View the active order in My Tickets

  • We sketched some loose concepts to help drive our approach, then moved into wireframing.

    Each of us took on specific sections with my focus being the payment and post-purchase discovery screens.

    I aimed to seamlessly integrate the concessions feature into the Fandango app’s design patterns. This included:

    1. Updating copy to include concessions

    2. Reformating My Tickets section and individual cards

    3. Combining two existing order summary patterns within the app

  • Based on our metrics, the first phase of lo-fi usability testing was an overall success.

    Participants scored the experience at a 4.0 (easy) on average. They completed the tasks under our goal of 7 minutes with no more than 6 errors.

    Key Takeaways

    • Initial theater and movie selection is difficult and confusing

    • Users went to Popcorn first instead of Combos

    • Clickarea for Combos drop-down caret was too small

    • Users were surprised to see a confirmation of the phone number

    • Inconsistent copy on payment screens

  • We made the following changes as we moved into mid-fidelity:

    • Created an announcement banner within theater listings

    • Shifted the SMS modal to its a separate screen within the payment flow

    • Changed Concessions drop downs to individual cards

    • Reworked layouts for sub-categories and product listings

    • Added grayscale visual elements and updated copy

    At this point, we felt confident enough in our work to add a partnership feature that would allow users to conveniently access Uber from the Fandango app when they were ready to head to the theater.

  • The second round of testing was somewhat successful. Participants scored the experience at a 4.0 (easy) on average but took 2.5 minutes longer to complete tasks despite more visual elements and updated copy.

    Key Takeaways

    • Announcement banner was overlooked but helpful once users noticed it

    • Users still went to Popcorn first instead of Combos

    • Concessions flow was confusing and the customize option felt hidden

    • Users valued the summary page to ensure all information was correct

    • Users enjoyed the redesign My Tickets layout

  • We made a decent number of changes including:

    • Relocating and increasing the size of the announcement banner

    • Integrating a new feature modal after adding tickets

    • Reworking Concessions to match the UI of other sections

    • Changing ‘All’ to ‘Menu’ in Concessions

    • Adding a recommendation card in the Popcorn sub-category

  • We added more visual elements, animation, and final copy as we transitioned into high-fidelity. To capture the essence of Fandango, we referenced the company’s brand guide and created a mood board.

    • Colors: Orange (#FF7300), Blue (#3478C1)

    • Typography: Proxima Nova

    • Branding: Simple, Magnetic, Definitive, Playful

  • We went into our final round of usability testing relatively confident so, naturally, the scriptwriters of the universe knew this was the perfect time to insert a plot twist.

    We experienced some technical issues with Figma when testing on phones that weren’t an iPhone 8. This caused our metrics to plummet and, needless to say, was also a huge ego check.

    However, like the protagonists in many of the movies we’ve all seen, we embraced the struggle and learned from the experience. We made some tweaks to the prototype, and received some positive feedback despite the technical difficulties.

Iterations from lo-fi to mid-fi

Iterations from lo-fi to mid-fi

Branding guide

Branding guide

Moodboard

Moodboard

Iterations from mid-fi to hi-fi

Iterations from mid-fi to hi-fi

Reviewing our “Rotten Tomatoes” scores from usability testing.

Our goal for testing was for users to browse for movie tickets and concessions, add items to their order, and complete the purchase in under 7 minutes with no more than 6 errors. We achieved this in the first round of testing but the following rounds saw worse results for various reasons.

Unfortunately, we ran out of time for this project but we would’ve liked to conduct more testing on the hi-fi prototype. We would likely recruit additional participants who could access the prototype through a desktop or laptop and/or figure out how to account for different mobile devices in Figma’s prototype mode.

*Note: Metrics for hi-fi testing dropped due to technical issues with Figma.

The Deliver Phase

After a two-week design sprint, our team successfully addressed the design opportunity we confirmed through our research.

  • Seamlessly integrated concessions into the Fandango app’s existing e-commerce;

  • Redesigned the payment and post-purchase discovery to access upcoming tickets and/or food orders; and

  • Added a featured partnership with Uber so users can get to the theater quicker and access discounts on future Fandango purchases.

The End Result

We seamlessly integrated a new feature for users to easily pre-order concessions for a safe and complete movie-going experience during the pandemic.

Project Retrospective

Future Improvements:

  • Ensure prototypes are responsive to different devices.

  • Restructure the IA, particularly bottom navigation.

  • Replace Trailers with Concessions.

  • Nest Trailers under Spotlight or Movies.

  • Integrate seat delivery service and an option to leave tips.

  • Develop an option to gift concessions to a friend.

  • Continue exploring ways to channel Fandango’s “playful” brand in the UI such as animation on the Popcorn icon that ‘pops’ when adding items.

Key Takeaways:

  • We should have done a comparative analysis of food delivery apps (ie: Uber Eats, Postmates, GrubHub).

  • Use components and variants earlier in the process to save time on iterations!

  • Incorporating a 0-2 scale to task completion would provide a more detailed evaluation of prototypes.

    • 0 = Incomplete

    • 1 = Significant difficulty, prompting, or workaround

    • 2 = Completed with ease

  • Set better boundaries so we’re not staying up late and can return to the project fresh each day.