CineSnack(2).png

PROJECT OVERVIEW

INTRODUCTION

I designed this responsive website as a part of the Google x Coursera UX Design Professional Certificate program. It is intended to allow users to skip the movie theater concession stand line and order snacks and beverages for pickup or delivery to their seat.

Themes

UX Research

UX Design

User Testing

Wireframing

Prototyping

Design Systems

Role

UX Designer

Tools

Figma

Timeline

4 Weeks

THE CHALLENGE

Ordering snacks and beverages at a movie theater is a process that hasn't seen widespread change in years. Even though the sale of movie theater tickets has made a significant switch to online/app ordering, the sale of movie theater concessions has lagged far behind.

 

Users must stand in the concession stand line, browse the menu in person, place their order with an employee, and stand off to the side until their order is ready. Users often arrive early to a movie, or must miss a large portion of a movie to complete this long user journey. And beyond the time it takes users to complete this process, there is a lot of physical space that is taken up by users while they wait to order and wait again to receive their order.

GOALS

The CineSnack app aims to significantly reduce the time and physical space that in-person concession ordering encompasses by providing a simple, efficient way for users to order concessions at any point in the movie-going experience. Specific goals for this project included:

​1. Eliminate the line
Whether ordering on the way to the theater, during concessions, or during the movie, users can place their order wherever they are without standing on queue.

2. Simplify choices

The app allows for quick browsing and selecting with item categorization, price and diet filters, and an accessibility search option to make snack selection a breeze for everyone.

3. Expand convenience

The app includes a delivery option, which allows users–especially those with physical handicaps–to have their snacks delivered right to their theater seat.

 

RESEARCH

USER RESEARCH

I conducted initial in-person user research to better understand my target end users. Interviewees were between 24 - 40 years old, included both male and female-identifying individuals, and lived in urban and suburban areas.

"Most menu items don't have enough nutritional facts for me to make the healthiest decision."

"I'd love to see more of those self-ordering kiosks, so that you don't have to wait in line."

"I don't like how it takes to get your food. There is almost always a line, and I usually miss part of the movie of trailers."

"In-seat delivery would be awesome."

TARGET USERS

In considering target users, I focused on people who might benefit the most from the convenience and freedom of using the CineSnack app.

lorenzo.png

Lorenzo Wolf

37-year old male

Married with 2 kids

Framingham, MA

Meteorologist

Lorenzo is an accomplished weather man on the local news, but also juggles life as a working parent with his wife and their two young daughters. He and his family go to the movies at least twice per month, but is frustrated with how complicated and time consuming it is to buy snacks for his entire family.

tamia.png

Tamia Rosas

24-year old female

Single, wheelchair-bound

Nashville, TN

Barista/Fashion Student

Tamia is an aspiring fashion designer living in Nashville. She has a handicap that affects her legs, so primarily gets around with her wheelchair. She and her friends go to the movies once per week, and they always order food and drink. She often finds it frustrating to navigate the tight lines at the concession stands, and would love an easier way order and receive food at the theater.

COMPETITOR AUDIT

cinemark.jpg

Strengths:

  • Simple design for easy browsing

  • Friendly and engaging tone

 

Weaknesses:

  • No nutritional value included

  • Ordering can only be done once, when ordering movie tickets

AMC-Theatres-Logo.png

Strengths:

  • Can order snacks at any time

  • Lists calorie count for each item

 

Weaknesses:

  • Snack categories are confusing

  • Snacks can only be retrieved by counter pick-up (no delivery)

gopuff.png

Strengths:

  • Nutrition label available for each item

  • Fun and easy item categorization

 

Weaknesses:

  • The large amount of choices can be overwhelming (takes up all of the screen)

THE IDEAL USER JOURNEY

Based on initial research, I sketched out the ideal user journey for the app:

Screen Shot 2021-07-26 at 10_edited.jpg
 

DESIGN PROCESS

FRAMEWORK

With a good understanding of potential end-user motivations, frustrations, and desires, I quickly got to work on sketching and wireframing the overall look and feel of the CineSnack app.

Screen Shot 2021-07-26 at 11.58_edited.jpg

In my wireframes, I ensured that the design was sleek and minimal, in order to put the focus on the products for easier browsing. I included the addition of a nutrition label as a photo for each item, to give full health transparency for the users who were concerned  about finding the healthiest snacks. And I aimed to make the user journey no more than five screens, as to make the process quick and easy.

1.png

Home Screen

2.png

Category Page

3.png

Product Page

4.png
4.png

"Bag"/Checkout Page

"Success" Screen

Usability Testing

I conducted an unmoderated usability study for my low fidelity prototype with the goal of seeing if users could easily search for, select, and order a regular popcorn from the app. KPIs included conversion rate, time on task, and system usability scale. Below are recurring user pain points that emerged as a result, and how I fixed them.

Problem: Majority users expressed some frustration around having to tap too many times to get what they wanted. Specifically, they felt that the "Category Page" was not useful, and that they would like an easier way to see more item details from one screen. They also did not see the need for a search bar, since there were not many items to choose from.

Solution: I replaced the individual category buttons (which each linked to a separate page) with interactive "chips" to give users more control in viewing the menu on one screen. I also removed the search bar, per user feedback.

Home Screen Before

1.png

Home Screen After

6.png

Problem: Majority users expressed some confusion around how to select more than one item on the product page. I originally included amount selection in the "Bag" page, but the users made a great point that it makes more sense to also include this on each product page.

Solution: I included a dropdown selector to the product pages.

Product Page Before

3.png

Product Page After

8.png
 

FINAL DESIGNS

Brand Guide and Sticker Sheet

When creating the style guide for the CineSnack app, I employed variations of bold reds, which remind me of the red carpet and curtains in movie theaters. Supporting colors are muted tones with blacks, whites, and greys to put the focus on the content in the app.

Frame 7(2).png

Introducing the CineSnack App

The CineSnack home screen allows users to scan the entire menu quickly and efficiently without having to toggle between more than one screen. Based on target user goals, I ensured that there was a "healthy" category in the top line menu navigation for easier access.

6.png
7.png

After selecting an item from the menu, users are taken to the item page, where they can customize their item (size, amount, etc.). A full nutrition label is included in the image carousel for each item to give users full nutritional transparency.

8.png

After the user adds items to their bag, they can continue shopping or navigate to the Bag screen to review their order, specify pick-up or delivery retrieval method, select payment, and place their order.

9.png
10.png

Finally, users are greeted with a success screen after placing their order, with clear instructions on what to expect next.

11.png

See it in motion! This user flow searches for and selects a regular popcorn, then checks out.

 

CONCLUSIONS

I received much feedback from test users that they wish this was a real product that they could use. I envision this app being most useful as an addition to existing ticket ordering apps for a movie theater client.

Next steps would include more user testing to inform further iterations until designs are ready to be handed off to the developers.