MOVIE thEATer • Snack ordering app

MOVIE THeatER is an app created to help people located in a metropolitan area how uses a movie theater often. The role of this app in theirs life is to help them to order snacks in a movie theater. As user, you can order food inside the movie theater or pick it up from the counter.

Our target customers are people with ages between 20-60 years old, living a busy life (parents, students that also work, etc), but who love to have some relax time with snacks in a movie theater.

Movie Theater Mockups

  • Duration: December 2021
  • Role: UX/UI Designer
  • The Problem: For this project, I conducted interviews with users and created empathy maps to understand users' needs for a movie theater. Throughout the research, I was able to notice more needs than when I first started the project. For example, including people with different diets and allergies in the interviews gave me a new perspective on their needs for ordering snacks in a movie theater. My initial assumption was that users prefer to use movie theaters to avoid endless queues when they order food at the movie theater which was confirmed by the research. However, I also discovered that money, accessibility, and having just one app is another pain point that we need solutions for.
  • The assignment: Design a snack ordering app for a movie theater.
  • Responsabilities:desk research • conduct interviews • paper and digital wireframing • low and high-fidelity prototyping • conduct usability studies • iteration based on feedback • accessibility and iteration on designs
  • Pain Point:
    • Platforms for ordering food are don’t take into account the people with allergies. Users may have diverse diets and sometimes they can’t find what they need in food apps.
    • Users are too busy to spend time in endless queues to order food.
    • Snacks are usually expensive in all these kinds of apps. Users want to pay more or less the same price as in supermarkets.
    • Users don’t want to have an app for food orderings and another one for buying tickets and seat reservations. They want to have everything in one place.
  • Software

      Adobe Indesign • Figma • Microsoft Power Point

User Persona

User personas are a representation of the human profile based on archetypal descriptions of users from research. They are useful in humanizing design focus, testing scenarios as well as facilitating empathy with the real user.

Image of Maaria Magdalena Balos
Image of Maaria Magdalena Balos

User Journey Map

Mapping Christopher’s user journey revealed how helpful it would be to fuse both buying tickets and ordering snacks in the main Movie theater app. I’ve also been able to see that sending offers for the app to our users may be a good idea.

Mapping Joana helps me to understand all types of user necessities like food allergies and intolerances. I was able to see how being in a continuous rush can influence her day-by-day tasks.

Image of Maaria Magdalena Balos

Wireframes

To ensure that we take into consideration users' pain points, I started to design a solution using pencil and paper. This way I was able to iterate quickly through lots of ideas in an inexpensive way. Next, once I knew for sure the final screens, I started to design the wireframes digitally. You can see both methods, paper wireframes and digital wireframes below.

Paper Wireframes Digital Wireframes

I've created an low fidelity prototype based on digital wireframes that allows users to order snacks into a movie theater. Please follow the next links to access the low-fidelity prototype.

VIEW LO-FI PROTOTYPE

Usability study: findings

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 One Findings
  1. Users need more payments options when checking out.
  2. Users want a quick check out method.
  3. Users want to see their past orders in their profile.
    Round Two Findings
  1. Motion is a bit basic, needs more work.
  2. The checkout process has too many unnecessary steps.
  3. Buttons overlap some text

High Fidelity Prototype

So finally, after a lot of iteration, I created the final mockup, and with this one, I was able to deliver the high fidelity prototype. Please press the next button to play with the high-fidelity prototype.

VIEW HI-FI PROTOTYPE

Takeaways

Impact: The app makes users find the snacks they need at the right moment when in a movie theater. This snack ordering app is an amazing solution for parents who go to the movie theater with their children.

What I learned: While designing the Movie theater app I didn’t think I would have so many things to take into consideration. I also discovered a lot of pains in the user's journey. Iteration was the main key in the approach and solution of this project.

Next Steps

  • In this project, I've focused on creating the snack ordering process, but users also want to buy the tickets and reserve a seat within the app. This can be one of the steps in this project.
  • Add more payment options.
  • Create the missing screens
  • Make the app more accessible and compatible with screen reading apps.
  • Iterate through design based on user feedback after launch.

Please follow the next links to access the high fidelity prototype and the documentation of this project.

DOCUMENTATION