Malin Jensen
UX designer

SnackZilla

A snack ordering app for your local movie theater

Image alt tag

Prompt; design a snack ordering app for a movie theater

While doing the Google UX Design course we had an assignment to pick a prompt to design through the full course. Since I am a huge movie lover and I love my popcorn buttery and warm, I picked "Design a snack ordering app for a movie theater".

SnackZilla will offer snack ordering through the app. This can be delivered to the customers seat or pre-ordering options for customers to pick up their order. The goal with this app is to make life easier for most movie lovers, the ones that are always running late and the planners who already knows what they want and when to pick it up.

SnackZilla

User Research Summary

I conducted interviews, created empathy maps and personas to get a more clear picture of the users feelings, the users struggles and what they want out of the product. Two primary user groups were young adults who’s tired of the long lines, limited options of snacks and they want the option to be served snacks while watching the movie. The bigger difference between the two groups were their living situation, if you have kids or not.

A big frustration is that the tickets and snacks are sold in the same line. This means that you have to pick out your snacks while getting your tickets. The popcorn gets cold while you wait for the movie to start, or you have to run in to the movie to not miss the start scenes. It’s also a frustration to have to get up every time you/your kids wants more snacks or drinks.

Main target audience for this app is young and middle age adults age 18-50.

"A rad movie deserves some good, warm buttery popcorn and a Dr Pepper in peace!"
Persona 1: John Johnson

Persona 1: John Johnson

Persona: John Johnson

User Pain Points

The major pain point for the users are time.

  • Time, like long lines at the movie theater.

  • Time, as in running late and miss parts of the movie because of long snack ordering line.

  • Time, as in a planner who likes to be prepared and pre-order their snacks.

Another pain point was options, users wants more options when they're at a movie theater.

Comfort. Users don't like that they have to get up and walk out of the salon to get more snacks or refills.

User Journey

To map out the users steps while ordering in the app, I did a journey map. That way I could get a good idea of how they would use the app and simplify their journey to help them reach their most important goal with the product.

The mapping proved to me that the user experience has to be flawless, no hick-ups, quick ordering made easy and not too many clicks.

Scenario: John Johnson

Scenario: John Johnson

Scenario

Where

A majority (pretty much everyone) of the users in my interviews expressed a frustration about long lines. If the user is already running late, they sometimes has to choose between snacks and missing the intro scenes of the movie, or no snacks but don't miss anything of the movie.

The scenario to the left describes when John Johnson, one of the personas, is running late because of traffic. He's already at the movie theater and see's a sign that he can order snacks through an app instead of standing in line. This shows that the app most likely will be used when the user is out of their home and on their mobile device.

SnackZilla

Sketches

To begin my design process I wanted to start off with the home page. On the home page I wanted images, quick order option, search bar, text, profile, navigation and for stakeholders, an option for promotional deals.

I did try several designs but decided to go with F, the 6th one. I wanted the quick order button to be big and visible, a menu on the home page, that way the order process has fewer clicks and the user will be able to order quicker. Also carousel with promotional deals (add on sales), search bar, profile, navigation.

SnackZilla

Wireframes

At the beginning of my process I created low fidelity wireframes in Figma for user testing and to get a better idea of the apps design.

Compared to my sketches, this got a little bit of a different look. I added the CTA on the top of the app, Quick Order Your Favorites. The user can also see the full menu or decide to start a big new order.

SnackZilla

Wireframes

The wireframes also shows the options to pick deliver to seat or pickup.

SnackZilla

Wireframes

Since time is one of the major pain points, time has to be added. Todays users wants to know exactly when their snacks will be delivered.

SnackZilla

User Testing

Before launching the product, I did a testing round in order to reveal possible usability problems. The usability tests where unmoderated, the only guidance was some tasks the users had to complete within the app.

Round 1 findings

Users wants size options when ordering their snacks

Users wants an easy flow when ordering a product

Users wants to have indicators of their actions, like item added to cart

Round 2 findings

The white background is too bright and distracting when in a dark room

SnackZilla Home Page

SnackZilla Home Page

SnackZilla Design

Once I did the usability test and knew what errors I had to fix, I started to design my app in Figma. The first designs had a fresh and bright white background with the orange/yellow text (for butter and Reese's peanut butter cups) and blue details. The colors later changed again after a second usability test and feedback from other designers. Since the users will be using the app in the dark, the background was changed from white to dark blue. That way it is not distracting others in the movie theater and it is easier to read.

Bright orange buttons makes it easier for user to locate the button for quicker actions. The users don't want to be on the phone for too long and the movie theater want to sell more snacks. If you're a regular the quick order option will really simplify the process, since it will save the users previous orders.

Based of the personas the app is designed for users that is out and about and need to be able to order through their mobile devices.

SnackZilla Prototype

SnackZilla

Takeaways and next steps

This project was my first one in UX design and I have so much learnings through the whole process. First off, you can never conduct too much research. The more research the better. Second, I definitely see the value of having a team to work with through the process. To get feedback from good and reliable sources is so valuable. But the best feedback comes from usability tests!

If this was a real life project, the next step would be to launch the app and measure the success by sales. I would conduct more usability tests to make sure there are no errors in the design of the app. I would also add more features, like having the movie ticket available in the app and and option to tip your delivery person.

"You really need to go to all movie theaters and get this app out there!"
Coworker, Queen Creek Arizona