Case Study: Pop Cinema - Snack Ordering App

This project was for my Google UX Design Professional Certificate . The objective of the course was to learn the foundations of UX design, including empathizing with users, building wireframes and prototypes, and conducting research to test the designs. I completed this project over the course of 3 weeks, and learned an incredible amount about UX Design, and how I can mix my knowledge in Graphic Design in this area.

Tools used: Figma, Adobe Photoshop, pen and paper.

My Role: UX Designer designing a Snack Ordering App for Pop Cinema from conception to delivery.

Responsibilities: Conducting interviews, papel and digital wireframing, low and high-fidelity prototyping, conducting usability studies, account for accessibility and iterating on designs.

The Product

Pop Cinema is a fictional movie theater that also sells snacks, drinks and candies. They offer a large number of items in the menu

The problem

It takes a long time to buy snacks at the cinema, the lines can be long and people miss parts of the movies to go buy their snacks

The goal

Design an app for Pop Cinema where users can order their snacks to be delivered to the movie theater or to be picked up at the counter

User Research

The research conducted to this project was interviews, where was possible to find the pain points and necessities of the possible users of an app to order snacks in a movie theater.


During the research some assumptions changed, and it was very important to find how some users like to have the app available to check promotions, prices or just don’t stay on a line and don’t waste time picking up food.

Persona: Anna

Anna is a High School teacher with needs to find a practical way to buy snacks when she goes to movie theater because she don’t have free time to came early and stay on long lines.


Pain Points

Time

Working adults are too busy to get in the movie theater a long time after the movie begin and wait on a line to order snacks

Anticipation

Some people are not hungry when a movie begins, after some time they want snacks but they don’t want to lose some minutes of the movie

Prices

If the user knows the price of snacks in anticipation, they can avoid bring their own snacks from home to the movie theater and order there 

Starting the Design

Paper wireframes

Thinking about the interactions that each screen can bring on paper brought a series of new ideas and improvements to be applied in the project.

Digital wireframes

To improve the initial design, the results of the user research were studied and adapted to the wireframe. 

Low-fidelity prototype

The low-fidelity prototype presented a initial way to construct the user flow. 

Usability study: findings

Round 1 findings

Round 2 findings


Refining the design

Mockups

Early design provide the information about adding a item to the cart in the snack selection page, but after usability study the design was revised and now there is a confirmation page. 


After the second usability study, a home screen was implemented in the design. With that, users have one more way to access features that already are listed in other parts of the app. 

Key Mockups

High-fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for order snacks and checkout.

View the Pop Cinema High-fidelity prototype

Accessibility considerations

The colors used in the project were adapted for accessibility issues and the icons used always have an explanatory text, and there is more than one way to get to different parts of the application, with special attention to parts where they were used

What I learned


While designing the Pop Cinema Snacks app, I learned that it’s very important to make usability studies from different points and views and needs

Next step


Conduct more usability studies to validate and then improve future areas of the app

Thank you for your time reviewing my work on the Pop Cinema Snacks app!