top of page
000_FINAL BANNER_Mesa de trabajo 1.png

ROLE

UX/UI Designer

(individual project)

DURATION

August, 2022 -

January, 2023

TOOLS

Figma, Illustrator, Photoshop

SUMMARY

Ready, Snack, Action! is a mobile app that allows users to order their snacks before going to the movies. This app offers snack combo options depending on the movie you are going to see; in addition, it works with a pick-up system for people who arrive just in time to see a movie, eliminating long lines and decision time before enjoying a movie. The name arises as a pun on the popular phrase in cinema Ready... Set... Action!

PROBLEM

Busy people lack time before watching a movie at the cinema and they don't want to have to choose their food in a hurry as they arrive.

GOALS

The goals are to eliminate a deciding step for people who don't want to decide, advise people who want to elevate the movie-watching experience with a snack, and eliminate long lines with the pick-up as-you-arrive option

1
Investigation

profile2-03.png

PRIMARY USER

Gavin is a student and part-time barista who needs to pick up snacks for a movie right when he arrives to the movie theatre because, as a busy person, he values relaxing and wants to enjoy it intentionally.

perfil1-03.png

SECONDARY USER

Susie is a mom with a full weekly schedule who doesn't want to have to think about what snacks to buy at the movies so she can relax and enjoy time with her family.

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don't have much time between getting off work and going to the movies.

 

This user group confirmed initial assumptions about movie theater customers, but the research also revealed that time was not the only factor limiting users: most are in charge of making decisions during their work, which leads them to be tired of deciding, will choose any snack in a hurry and often stick to the same one, although they have desires to branch out.

 

The main pain points I addressed with this project were:

TIME

Users don't have much time between arriving at the cinema and watching a movie.

DECIDING FACTOR

Users want to branch out in snack choices but don't know what to choose or don't want to choose altogether. 

LONG LINES

Upon arriving at the movie theater, there's a long line to purchase a snack

2
Design process

INFORMATION ARCHITECTURE

Based on the investigation of the needs of the users and counting on the contribution of the users themselves through card sorting, I arrived at the following information architecture for the application.

info architecture_Work table 1 copy.png

USER FLOW

I built a user flow of what a basic trip looks like from start to finish when purchasing a snack combo. This helps to understand how users can interact with the product, visualizing the navigation through its objectives.

user flow-1.png
IMG_20230611_135032605.jpg

PAPER WIREFRAMES

The drafting process worked to determine which screens and factors to take into account when making the digital wireframes. The priority was to create a simple and concrete path that the user follows when using the app.

DIGITAL WIREFRAMES

The objective of digital wireframes was to test an early version of the app. Easy navigation was the main thing that users needed to see in the design.

This section provides snack combo options based on which movie the user is watching.

The down bar provides navigation through the app.

home wireframe-04.png
movie wireframe-04.png

Based on the time users were watching the movie, the snacks would be ready to pick up on arrival.

LOW-FIDELITY PROTOTYPE

Prototipo baja fidelidad.png

Here you can find the low-fidelity prototype.

USABILITY STUDIES

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

ROUND #1

1. Users want to customize their snack orders and time of pick-up.

2. Users were confused about the purpose of some sections.

3. Users want their payment information already in the app

ROUND #2

1. Users didn't find useful the profile button in the down bar.

2. Users would like to have their food preferences included in the app to filter the food it shows them.

3
Final design

MOCKUPS

mock up-low and high-05.png screens
Captura de pantalla 2023-04-26 113626.png

HOME PAGE

During the usability study, several users expressed confusion regarding the movie section, in particular, they were wondering if movie tickets can be purchased in the app; building on this, I implemented a descriptive text below each title to clarify what can be done in each section of the app.

Also, all users expressed that a sidebar/hamburger menu is more convenient for them to find all the available sections in a list format instead of icons divided between bars.

Before the usability study.

After the usability study.

SELECTING A SNACK

Regarding the moment of adding snacks to the cart, before the test, the combos were pre-made and users only had to choose the one they wanted, however, they expressed their need to be able to customize the elements of the combo they chose (for example, drink size and pop). This way, implemented after the test, users avoid experiencing frustration in case they cannot find a combo that suits their needs.

Recording 2023-04-26 113805.gif

After the usability study.

Grabación 2023-04-26 114424.gif

CART

This section was the one with the most pain points during the usability study.

  • First of all, they expressed that it would be more convenient to have their payment method data saved in the app itself so that they don't have to fill it in each time a purchase is made.

  • Secondly, several users mentioned in the second round of testing that they preferred a dropdown menu to choose when to pick up snacks instead of typing a time manually.

  • Lastly, I added several screens with the general information of the order as the user goes through the payment process, to prevent user errors and make the status of the purchase visible.

After the usability study.

USER PROFILE

Before the usability study, the user profile included information to contact the person (name, email, phone number), but users mentioned an opportunity to include information relevant to their experience of buying snacks. For example, marking food preferences to filter the combos and snacks that the app shows them, and a payment methods section to store information about it and speed up the checkout process.

Screenshot 2023-02-01 204635.png
Captura de pantalla 2023-04-26 144500.png

Before the usability study.

After the usability study.

STYLE GUIDE

The signature color combination for Ready... Snack... Action! arose from a retro palette inspired by a movie theater, contemplating colors such as red, white, and yellow/beige to allude to the characteristic element of the place: popcorn. Although it is a muted palette, the idea is to be able to contemplate the different movie poster designs without generating a high visual conflict.

N_guia de estilo.png

HIGH-FIDELITY PROTOTYPE

The request to follow in the application is to purchase a classic combo to watch Little Women.

ACCESSIBILITY CONSIDERATIONS

1

Provided access
to users whom are vision impaired through adding alt text to images for screen readers.

2

Used icons to help make
navigation easier, as well as a sidebar to find any page they want to find.

3

Used minimal iconography for some steps to help all users better understand the designs.

4
Conclusions

IMPACT

I hope this design positively impacts the real world, improving the movie-watching experience and making people branch out more on snack choices.

LEARNING

While designing the snack app, I learned how to create an app from scratch, from sketches to an actual functioning prototype, with my first experience using Figma. Usability studies influenced each iteration of the app’s designs, though it would have helped to have some form of peer feedback as well.

IN THE FUTURE...

The next step would be to perform another round of usability testing to validate whether the pain points experienced by users have been effectively addressed; also, it must be reviewed if the design is viable in terms of programming to incorporate the corresponding changes.

bottom of page