CineSnack(1).png

Mobile App

Profile Project

2021

MY ROLE

I was the sole UX designer on this app. Between March and August 2021, I created all designs, wireframes, and prototypes, including user testing at all stages to incorporate feedback into each iteration.

THE CHALLENGE

In choosing a prompt for this project, I wanted to create an app for a problem I have not seen a solution for on the market yet. 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.

 

Typically, 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 FOR CHANGE

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 snack line
CineSnack was designed so that users can order anything from the concession stand menu at anytime, and are notified when their order is ready for pickup. 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

I factored in a range of user perspectives in designing the app to allow for quick browsing and selecting. I included item categorization, price and diet filters, and an accessibility search option to make snack selection a breeze for everyone.

3. Expand convenience

Considering users who may not easily be able to transport themselves to the concession stand for ordering or pickup, I included a delivery option, which allows users to have their snacks delivered right to their theater seat.

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 two children

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.

INITIAL RESEARCH

COMPETITOR AUDIT

I looked to snack-ordering and popular theater apps to help inform my initial designs for CineSnack. While each competitor's app had useful features, there was not one that made for a user-friendly experience in accomplishing my project goals.

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)

INITIAL USER RESEARCH

From June 1-2, 2021, 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.

Key Questions

About how long does it take you to order and retrieve concessions at a typical movie theater?

10 minutes

50%

5 minutes

25%

15 minutes

25%

What challenges, if any, do you face when ordering concessions at a typical movie theater?

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

- "I just don't like how long it takes. There is always a line, and I usually miss part of the movie or trailers."

- "It's just not an enjoyable experience. I usually don't get hungry until the movie has started, and I don't like getting up in the middle of the theater to get snacks, so I usually just don't order anything."

Are there ways in which you think those challenges might be solved?

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

- "In-seat delivery would be awesome."

- "It would be great if there were healthier snack options, or ways to find out what the healthiest available snacks are."

THE IDEAL USER JOURNEY

Based on initial research, I sketched out a new ideal user journey for using the CineSnack app:

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

THE INITIAL DESIGN

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

My initial wireframe reflected the users' desire to quickly and easily find what they want and order it with inclusions I found useful from my competitive analysis. 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.

Untitled design.png

Home Screen

Untitled design(1).png

Category Page

Untitled design(4).png

Item Page

Untitled design(2).png
Untitled design(3).png

"Bag"/Checkout Page

"Success" Screen

USER TESTING

Research Study

I conducted an unmoderated usability study for my low fidelity prototype with five friends with the ultimate 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.

Results

While all users were able to successfully complete the task in a short amount of time, they provided some useful feedback, which I incorporated into design iterations.

1. Too many taps: 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.

As you see in the before and after below, 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 their feedback.

Home Screen Before

Untitled design(5).png

Home Screen After

Untitled design(6).png

Interactive "Chips" instead of separate category pages

2. Item Amount Confusion: Majority users expressed some confusion around how to select more than one item on the "Item" 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 item page.

As you see in the before and after below, I included a dropdown selector to the item pages.

Item Screen Before

Untitled design(7).png

Item Screen After

Untitled design(8).png

"Amount" dropdown selector added

FINAL DESIGNS

Brand Guide and Sticker Sheet

In creating the brand guidelines for the CineSnack app, I employed variations of bold reds, which remind me of the red carpet and curtains that one often finds at a movie theater. Supporting colors are muted tones with blacks, whites, and greys to put the focus on the content in the app.

Frame 7(1)_edited.jpg

Introducing the CineSnack App

Below are screenshots of the main user flow, which in this case is to order a regular popcorn for pickup. Click here to view the app functionality.

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.

Untitled design(9).png
Untitled design(10).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.

Untitled design(11).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.

Untitled design(12).png
Untitled design(13).png

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

Untitled design(14).png

CONCLUSIONS

I thoroughly enjoyed designing this app as a part of the Google UX Design professional certificate program. 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.