1 of 25

Snack ordering app for cinemas

Ali Rahmat Putra

2 of 25

The product:

This app is designed to help people save their time when they want to order snacks at cinemas with online order and scheduled order feature.

Project overview

Project duration:

1 month (June 2023 - July 2023)

Preview of selected polished designs.

3 of 25

The problem:

Users want to avoid waiting in the line while ordering snacks at cinema.

Project overview

The goal:

Build an app to allow users order snacks and scheduling the order.

4 of 25

My role:

UX researcher, UX designer, UI designer

Project overview

Responsibilities:

Conducting interviews, wireframing, prototyping, conducting usability study, accounting for accesibilities and iterating on designs.

5 of 25

Understanding

the user

  • User research
  • Personas
  • Problem statements
  • User journey maps

6 of 25

User research: summary

I was conducted an interview to empathize with users. Before conducting a research, I had assumptions that people have problem with ordering snacks at cinema. People doesn’t want to wait in the line and miss the movie intro. After the research, I found that people have the same problems.

7 of 25

User research: pain points

Time

Too long to wait in line when buying snacks.

Product

The snacks they bought were cold because it was ordered too quickly.

Information

Not knowing information about menu availability.

1

2

3

8 of 25

Persona: Monica Tan

Problem statement:

Monica is a busy bank employee and movie lovers who needs order her snack online because she wants to avoid the line at food kiosk.

9 of 25

User journey map

Image of user journey map

User journey map helps me to find improvement opportunities that can be useful features of the app.

10 of 25

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Starting

the design

11 of 25

Paper wireframes

The goal was to draw lots of ideas quickly and save time.

These are wireframes for Home page.

12 of 25

Digital wireframes

The goal was to make a easy-to-use home page.

I only included important sections to make it not confusing.

Help users to search cinemas effectively

Allow users to navigate easily to their order info.

Allow users to search the cinema name

13 of 25

Digital wireframes

I want the users choose order type first, so I put it on the top. Then users will see menu list.

To filter and find the menu quickly

Bold CTA to make it more noticeable to users.

Allow users to order instantly or scheduling the order.

14 of 25

Low-fidelity prototype

The main flow start from the home page. Users will choose a city and a cinema, then proceed to order the snack.��Lo-fi prototype link - Figma

15 of 25

Usability study: findings

Round 1 findings

Gap between section too short.

1

Information is not really useful.

2

Round 2 findings

Not clear button labeling.

3

Confusing navigation label.

1

Edit order from checkout page.

2

16 of 25

  • Mockups
  • High-fidelity prototype
  • Accessibility

Refining

the design

17 of 25

Mockups

With a better spacing, users will easily navigate through each section.

Before usability study

After usability study

18 of 25

Mockups

The label for “Back” button was not clear. I changed it to “Back to home” to make users know what action that they take.

Before usability study

After usability study

19 of 25

Mockups

20 of 25

High-fidelity�prototype

The final prototype presented cleaner user flows for ordering and scheduling an order.

Hi-fi prototype - Figma

21 of 25

Accessibility considerations

Keeping content short, clear and simple to allow users with dyslexia use the app easily.

Using high contrast colors and readable font size. That will help users with low vision.

Using simple and linear logical layout.

1

2

3

22 of 25

  • Takeaways
  • Next steps

Going forward

23 of 25

Takeaways

Impact:

“This app really useful! I will definitely use it.

“I love the scheduled order feature. Really help me”

“This app will save my time! No more waiting in the line.”

What I learned:

This is my first project that I do my own research. I learn that understanding the user is really important part of designing. With a proper research, I’m able to take meaningful insights and turns that into a great design.

24 of 25

Next steps

I will try usability study with more participants. Testing with more sample would make the app getting better for most people.

I want to add more illustrations in the app. It will make the app more engaging.

I feel the home page have too much space. I want to add some elements like voucher section or recommended snack section.

1

2

3

25 of 25

Let’s connect!

Thank you for your time reviewing my work! If you’d like to get in touch,

my contact is provided below.

Email: alirahmatputra@gmail.com

Portfolio: https://alirahmatputra.framer.website/