9 - First Order Chat_pixel_quite_black_p
2 - Home Screen_pixel_quite_black_portra
Fruitbat Logo - White.png

This is

An app with a chatbot, designed to take your orders for popcorn and drinks at the cinema, without ever leaving your seat.

2 - Home Screen_pixel_quite_black_portra

Project Origins

At the beginning of my certification program, I was given a prompt for my first UX project: design a snack-ordering app for a movie theater in Texas.

This was a lot harder to envision in the middle of a pandemic. The cinemas were closed and streaming services delivered new releases to our homes.

But lots of people still missed going to the movies, so conducting research was not hard.

Objectives

  • Help users order food from anywhere in the cinema, for  pickup or delivery to their seats.

  • Help users order food when they are running late to their showing and don't have time to stop at the concession stand.

  • Help users order food between double features. 

  • Help users who struggle to read menus behind the concession stand.

Research

"If I'm hungry or thirsty during a movie, I'll usually try and tough it out."

"My experience ordering food at the theater is that it always takes too long and everything is extremely overpriced.

"The menu board is often in small print, and it's hard to read the text, and know what the cost is before I get to the front."

During this course, I conducted questionnaire surveys and unmoderated usability studies due to the social distancing guidelines in place at the time. This had the added benefit of allowing me to practice my writing skills in the context of UX design for the first time, and revisit the necessity of open-ended questions in our work.

User Personas

Mila De Leon

Mila is an avid moviegoer who works for a nonprofit that teaches children the basics of filmography. She recently needed to watch more movies for her job and purchased membership at her local theater, but the member's only line takes too long. She would rather order food ahead of time, before the movie.

pasted image 0.png
Riaan Acharya

Riaan is an immigrant from India who doesn't like going to the movies very much, but his spouse does. He speaks fluent English, but since it isn't his first language, he takes his time to read words carefully, making the small words of a menu a frustrating pain point. He would rather use his phone to look at the menu.

639329-indian-men.jpg
20201218_004829.jpg
20210112_220524.jpg

Crazy Eights have yielded some of my favorite ideas during my years as a game designer, and it's refreshing to see their presence in UX design.

(On a related note, if anybody knows where I can find a theater with a minibar built into every seat, please reach out to me.)

Sketches

These early wireframes detail some ideas for the start of a user flow where the moviegoer begins to order food. A couple of them deviate away from the use of a chatbot, because early surveys indicated that people did not like them in the realm of tech support.

One app I kept in mind was Woebot, a chatbot that uses Cognitive Behavioral Therapy to help you regulate your mental health better. Its user flow switched between menu options and freeform writing exercises, and I thought one of these could carry over to the concepts behind Fruitbat.

Wireframes

These wireframes detail some of my first work in Figma, and I took to it very well. I've been fluent in graphic design programs for well over a decade now, and Figma uses many of the same tools. It's just honed in on UX/UI design.

Personally, I prefer using Figma over paper for wireframes. Part of it is because I'm big on conservationism, and would rather cut down on my paper waste. The other part is that Figma makes everything collaborative, and a little room to breathe and think never hurts.

Fruitbat - Digital Wireframes.PNG
Fruitbat - Prototype.PNG
Style Guide.png

Refinement & Prototyping

The tight turnaround of beta tests with Google enabled quick iteration and an environment where other testers rapidly provided feedback to developing projects. As a result, entire menus were abandoned in favor of a direct user flow, and the navigation bar doubled as a tracked for the steps a user needed to take.

The prototypes took shape very quickly during this learning sprint. A notable web formed around the concept of Fruitbat telling you that you needed to Check In before you could place the order.

A - Order Now - Missing Check In.png

Style Guide

For a project of this complexity, a style guide helped immensely when I opted to shift certain colors in line with Material Design's guidelines on accessibility. Changes came quick and easy with the understanding of how to assemble sticker sheets such as this one.

Final Designs

1 - Starting Screen_pixel_quite_black_po
2 - Home Screen_pixel_quite_black_portra
3 - Confirm Theater_pixel_quite_black_po

Fruitbat is an app with a chatbot, purpose-built to let you order food and drinks anywhere in the cinema.

4 - Correct Theater - Choice of Delivery
5 - Deliver to Seat_pixel_quite_black_po
8- Enter Seat Number_pixel_quite_black_p

With this app, you can check in at your favorite theater. Fruitbat will walk you through the process to ensure a correct delivery.

8 - Home Screen - Checked In_pixel_quite
A - Order Now - Missing Check In_pixel_q
9 - First Order Chat_pixel_quite_black_p

Fruitbat is friendly and organizes the food for you, so you know exactly where to find your favorite snacks. And if you make a mistake, it's easy to correct.

Fruitbat Logo - White.png
14 - Home Screen - Order Pending_pixel_q

Take the hassle out of arriving at the movies. Late. On an empty stomach.

What's Next?

As far as first projects go, this work, plus the coursework on the foundations of UX design, could not have immersed me to the craft more effectively. Before I even finished this project, my job even gave me the chance to contribute insights on the user experience of an upcoming exhibition, and with their support, I helped solve a user flow problem that improved the flow of large crowds through the space during a pandemic. I even wrote an article on Medium about it!

More importantly, it taught me that I've engaged with the realm of user experience for years. From organizing live action events at conventions as a production assistant, to laying out and designing my own novels for publication, all of it tied back to this umbrella of UX design. Do I want to learn more about Figma and visual design principles? Absolutely. I just can't believe it took me this long to spot it.

As for Fruitbat, it's a love letter to cinemas which I sorely missed during the COVID-19 pandemic. While I will refine the current prototype every now and then, its function fills a niche that movie theater chains are on the cusp of filling with their own apps. But these ideas spark something new every time; learning how to harness Figma enabled me to start wireframing a personal project in the realm of tabletop game design. I'm looking forward to applying the lessons on research to that project at a future conference.