Concessions Ordering App for a Movie Theater
Client: Certification project
Problem: Moviegoers need a more convenient and accessible way to order concessions at the movie theater.
Goal: Design an app that allows users to easily browse concessions, place orders, and pick up their orders at their local movie theater
Solution: I created a straightforward user flow that included images in the menu, and text labels under iconography to ensure the app was usable to a variety of moviegoers.
My Role: UX designer from conception to delivery
August 2022 - February 2023
Design tool used: Figma
Responsibilities: User research, wireframes, prototypes, conducting usability studies, and iterating on designs
To understand the users I’m designing for and their needs, I used secondary research, created personas and user journey maps.
Users expressed frustrations when ordering concessions, such as accessibility when trying to view menus and ordering in a timely manner.
Research: Personas
Problem statement:
Genevieve is a retired person who needs accessibility options when ordering through an app because she is visually impaired and still wants to enjoy concessions at the movie theater.
Problem statement:
Jeremy is a working parent who needs to make family outings easier because sharing things he enjoys with his family is important to him.
User Journey Maps
Mapping Genevieve’s user journey revealed how helpful having some accessible features in an app for the movie theater would be to the concession ordering process.
Mapping Jeremy’s user journey showed how useful an order ahead option could be for speeding up the ordering process.
Ideate: Paper Wireframes
Creating the paper wireframes gave me a chance to establish the basic structure of the app screens and allowed me to iterate quickly. The wireframes helped me to decide which design elements to include that would also address the user pain points. For the menu screen, I focused on including two layouts for the user to choose from.
Design: Digital Wireframes
My original thought was that having multiple menu layout options, with photos included in both, would address the key user need for increased visual accessibility.
By including photos on every screen of the ordering process and increasing the size of important buttons, users with language or visibility barriers are able to complete the checkout process easier.
Prototype: Low-fidelity
My low fidelity prototype connected the primary user flow of selecting a theater, browsing the menu, and placing the order, so that the prototype could be used in a usability study with users.
The low-fidelity prototype, made with Figma, can also be viewed here.
Test: Usability Study
I conducted two rounds of usability studies. Findings from the first study helped guide the design process from a wireframe to a mockup. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
You can find my usability study notes here and my affinity diagram here.
First Round Findings
Selecting a location needs to be the first step in the user flow
Users were unfamiliar with all the icons used
Users preferred the photo menu layout
Second Round Findings
The confirmation page needs a pick up time listed
Product page needs “decluttering”
Iterate: Usability Study Results
My early design allowed users to begin the order process from the home page but also allowed users to skip selecting a location to order from. The final iteration makes selecting a location the only option available to begin the user flow.
Before Usability Study
After Usability Study
Iterate: Usability Study Results
During the second usability study, users commented that the product page felt cluttered. After the final iteration, I adjusted the spacing to give more room around each button and adjusted the “size” buttons to coordinate with the size of the product being selected.
Before Second Usability Study
After Second Usability Study 2
Design: Final Iteration
Prototype: High Fidelity
My final high fidelity prototype is a straightforward user flow that begins with selecting a theater location, then guides the user to selecting a product and completing the checkout. The product page has more accessible buttons and there is a time for pickup being given rather than a duration of time.
The high-fidelity prototype, made with Figma, can be viewed here.
Design Kit
Takeaways
What I learned from this project:
While designing the Our Theater concessions ordering app I learned the importance of usability studies and peer feedback. The initial iteration was greatly improved after implementing the insights from both usability studies and the overall design came together after considering the feedback from peers.
What I learned about myself as a designer:
I was surprised by how much I thoroughly enjoyed every step of the product development cycle. I was enthusiastic about the design process but did not feel so attached to the design that I felt unwilling to change it. I found myself feeling excited about the usability study results and finding ways to address the user pain points. I also gained a breadth of new knowledge working with Figma.