Client: Student project at Learn with Google

My Role: Entire product design from research to conception, visualization and testing


Project Time: 2 months

The Product

Royal Night Cinema is a local movie theater that offers a variety of snack concessions. The typical customer for Royal Night Cinema spans a wide range of ages, from teens to the elderly and includes people from all walks of life. Royal Night Cinema’s goal is to make every customer’s experience enjoyable and easy.

This particular movie theater lacked a contactless way to order snacks before showtime. The goal of this project was to design a website and app that allows a wide variety of users to order snacks remotely and efficiently.

It should be noted that this project was guided by Learn with Google’s UX Design training course. This training helped me begin my studies as a user experience designer, to explore approaches to digitization of contactless ordering at service based establishments. and to find out how online ordering can be designed in accordance with WCAG (Web Content Accessibility Guidelines).

Research Summary:

While conducting research, I found that while most people love going to see a movie waiting in a congested line at the concessions stand to order snacks is their least favorite part of the experience. Of the apps that are currently offered by large movie theater chains, product information and customizable options are lacking during the ordering process. Users want a contactless way to order snacks with lots of additional information about each product and an option to customize the snacks (see User Personas and Pain Points below for complete details).

My research goals were to understand different user group needs, understand the snack ordering experience, identify user frustrations with snack ordering, and identify common behaviors within the snack ordering experience.

User Personas:

This course provided me with many different personas to choose from with very basic information about each person. The intention was for students to read each persona and select several who would not only be likely users of my design, but also who would benefit greatly from a contactless ordering app. From there, students were to expand on each individual’s persona by building a user narrative around them, then select a primary persona, or the individual whose pain points will address the needs of all the personas.

Paulo is our primary persona. He is a person with a hearing impairment who needs a contactless way to order snacks at a movie theater because he struggles to communicate effectively with the cashiers upon check out.

Paulo

Michelle frequents the movie theater with her multiple children and therefore needs to be able to order snacks efficiently so she can reduce the stress of trying to get her kids situated into their seats on time. 

Michelle

Pain Points:

Theater snack apps/websites often lack information on each product such as nutritional info or product descriptions.

1

There is rarely an option to have snacks delivered to your seat.

2

While you may be able to customize your snacks at the counter, an option to customize your snack remotely is often lacking in current apps (adding butter to popcorn, no ice in drink, etc).

3

Designing the Solution:

Early Sketches

Mobile

Website

Digital Wireframes

During the process of moving from paper to digital wireframes, I focused on finding solutions to the pain points described above.

Design features include:

Organized snacks by category

Product info including a description and nutritional info

Customizable options on some snacks

Detailed cart summary

Simple checkout process

Ability to select how you would like to receive your items

Site map that is apparent and easy to use

Option to repeat a previous snack order to save time and clicks

Mobile
Variations

Usability Study Findings

Unmoderated ~ USA, Remote ~ 5 Participants ~ 30 minutes

A detailed analysis of user interactions revealed important insight from the usability study:

1

Payment Success

Users were unsure if the purchase went through for the first several seconds after clicking “Place Order”

2

Purchase History

Users weren’t able to easily navigate to their receipt to review on the website.

3

Back Buttons

Customers were not able to go back to the previous screen during the checkout process.

Refining the Design:

Mockups

Edit 1

Based on the insights from the usability study, there were necessary changes to be made in regard to the site’s navigability. To let the user know their purchase was successful, I added a clear header to the “Purchase Success” page on the website, which also improves the experience for those using assistive technology. I also added a loading bar graphic to clearly indicate the to the users that the purchase is being processed.

Edit 2

To solve the issue of users not being able to find their purchase history, I changed the wording within the tab header “Purchases” to say “Receipts.” This should help users more easily navigate to their receipts to find information about their tickets and orders and also repeat previous snack orders.

Edit 3

Finally I added the back buttons necessary to allow users to return to the previous screen in case they wanted to double check or change any information about their order.


To review either mockup, select either:

or

Conclusions

If I could do this project again, there are a few things I would have done differently:

  1. I knew close to nothing about operating Figma when starting this project. I am now armed with a great deal more knowledge by going through the lessons and watching countless tutorials online. Although I am still a beginner designer, I am more confidently able set up my project from the beginning to allow for more efficient design.

  2. I would do another round of usability testing after the high fidelity mockups were created. I took a great deal of time going through this course and learning as much as I could from each lesson, but there are times when one must finalize their product and move on to the next, much like real life project schedules call for.

  3. I would like to take more time to learn about Web Content Accessibility Guidelines and fortify my design to be as accessible as possible. From here, my next goal is to properly learn how to incorporate Alt Text and Landmarks via Figma.

Additional Notes:

This project marked the beginning of my journey into the world of UX Design. Through it, I delved deep into the intricacies of the design process, began building my skills within Figma, learned how the designing for accessibility benefits not only disabled folks, but everyone who uses the product, and absorbed a plethora of other valuable insights. I am very eager to continue this journey as this work not only feels meaningful, but it is fun!!