Personal Project (Google UX Design Certificate)
A mobile application for pre-ordering snacks at local theaters, reducing wait time and creating an efficient experience for moviegoers.
Project Overview
The Product
Unlike many industry-leading movie theaters, there are theaters that do provide the option of ordering their snacks online, or through an app. The Pack & Snack allows moviegoers to purchase their favorite snacks in the comfort of their homes or time while providing theaters with an alternative way of advertising their products.
Product Duration
July 2022 – August 2022
The Problem
Many customers are not comfortable ordering snacks in-person due to the lack of time.
The Goal
Design an app for movie theaters that allows users to easily order and pick up their favorite snacks.
My Role
UX designer designing an app for movie theaters from conception to pick up
Resonsibilities
Conducting market research, interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research
Summary
I conducted market research and interview while also creating empathy maps to understand the users of the app and their needs. A primary user groups identified through the research was moviegoers who do not have time and seek efficiency in the order process.
This user group confirmed initial assumptions about the potential users of the Pack & Snack app, but after conducting research and interviews, there were other groups that can benefit from the app. These groups included those that require translations, accessibility features, and other challenges that make it difficult to purchase the snacks in-person.
Pain Points
1
Time
Ordering in-person can be time consuming for those that have tight schedules
2
Accessibility
In-person ordering experience does not provide enough accessible features
Persona
3
Misc.
Many customers do not feel comfortable ordering in-person due to personal conditions
Problem Statement:
Maria is an immigrant nurse and a mother of two who requires an efficient and easier way to order snacks for the movies because she does not have the spare time to order the snacks and make it to the movie on time.
User Journey Map
Mapping Maria’s user journey revealed how beneficial it is for users to have the option of ordering their snacks through the Pack & Snack app.
Starting The Design
Paper Wireframe
Drafting the iterations of each screen of the order process on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I focused on the display of products the theaters offer.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital Wireframe
Users needed a way to easily view the menu. This layout presents the menu in different categories as well as images and names of the corresponding menu.
Users can easily view the list of menu as well as images that goes with them, making it easier for users to make their decisions.
Theater’s products can be displayed here making it easy for users to view them.
Users can easily navigate through different categories of snacks with these navigation tools.
As the initial design phase continued, I focused not only on the display of products but also focused on easy navigation that can improve the users’ experience.
Key navigation elements are grouped together at the top of the screen to make it efficient for users to order.
2
Low-Fidelity Prototype
I used the complete set of digital wireframes to create a low-fidelity prototype. The primary user flow shows the snack ordering process using the Pack & Snack app, so the prototype can be used during the usability study.
Usability Study Findings
Round 1 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.
Users didn’t find the address screen necessary
Users wanted a clear navigation
Users want to choose the pickup time
1
3
Round 2 findings
Users want to change the purchase button design
It was difficult to navigate to the QR code screen
Navigation bar is too small to recognize
1
2
3
Refining The Design
Mockups
The early design required users to provide their address, but after the usability studies, I realized that there was no need for this option and added the summary of the user’s order so users could check their order before finalizing the purchase.
Before usability study round 1
The second usability study revealed frustration with navigating to the QR code screen. The time until pickup was separated from the QR code button and the separate button with the QR code was added so that users have two options of scanning the code.
Before usability study round 2
After usability study round 1
After usability study round 2
High-Fidelity Prototype
The final high-fidelity prototype presented a complete user flow for navigating through the app and ordering the snacks. It also met user needs for selecting locations, choosing pickup time, refined the purchase button, and navigating to the QR scan screen.
1
Icons were used to assist in navigation throughout the app
2
To view the hi-fi prototype, please click on this link
Accessibility considerations
Images of items were placed along with their names and details, allowing users to visually define them.
3
Provided access to users who are vision impaired by adding alt text to images for screen readers.
Going Forward
Takeaways
Impact:
The Pack & Snack app allows users to efficiently and comfortably order their favorite snacks by meeting their needs.
Quote from study participant:
“It was so easy to order the snack through this app. If this was an actual app that my local theater uses, I would use it all the time to order my snack since it would save so much time and other hassle.
What I Learned:
While designing the Pack & Snack app, I learned that there is always room for improvement and that usability studies are key to improving the design.
1
Conduct additional user research to identify any possible improvements that can be made to the app.
2
Next Steps
Conduct third usability studies to test the additional features added and to see if the final design properly solved the pain points that were brought up during the earlier studies.