Snack Ordering App for Star Theater
App design to provide an intuitive, efficient, and enjoyable snack-ordering process.
Snack Ordering App for Star Theater
Project URL: Hi-Fidelity Prototype
Tools: Figma
Client Name: Star Theater
Completed Date: August 01, 2023
Table of contents
Project Overview
Star Theater is a fictional theater I used for my Google UX Designer Certification project. Their direct competitors are Cinemark and AMC Theaters. Star Theater mission is to become to-go-place to have fun and experience great customer service. They want to make cinema nights enjoyable events by offering an app allowing their customers to order their favorite snacks easily and ahead of time.
The Problem
Cinema visitors don't have time to stand long lines to order snacks before their movie time.
The Goal
The primary goal was to enhance user's experience by designing the snack ordering app to provide an intuitive, efficient, and enjoyable snack-ordering process. The objective was to reduce wait times, user's frustration and improve order customization.
My Role
My role was to lead the app and responsive website design from conception to delivery.
My Responsibilities
My responsibilities included conducting user research, creating wireframes and prototypes, iterating on designs based on user feedback, and ensuring the final product adhered to best practices in user experience and visual design.
2. Understanding the User: Research Summary
We're creating a snack ordering app to help people place and pick up orders instead of queuing, so they can skip the lines and the payment process is streamlined. During user research, I conducted interviews and created empathy maps to better understand the users I'm designing for and their needs.
User Research Pain Points
1. Time
Working adults with children have limited time for an entertainment in their schedule.
2. Anxiety
Users feel pressured to make quick decisions at the counter. Users experience anxiety from fast paced environment.
3. Staying on a budget
Going over budget due to making quick decisions and not having enough time to look at best deals on snacks.
Persona: Jennifer
Problem statement: Jennifer is a busy single mom who needs efficient tool to order food ahead of time because she does not make wise decisions in fast paced environment.
User Journey Map: Jennifer
Mapping Jeniffer's user journey revealed how helpful it would be for users to have access to a snack ordering app.
3. Starting the Design
Paper Wireframes -> Digital Wireframes -> Low-Fidelity Prototype
I started with paper wireframes, a draft showing iterations of home page of the app on paper to ensure that the elements that made it to digital wireframes would be well-suited to address user pain points.
Home Page Paper Wireframes
Paper -> Digital Wireframes
Main User Flow: Order Snacks via Food & Drinks Tab
4. Usability Study
I conducted a usability study for a Low-Fidelity prototype. Five participants, three males and two females, between ages of 18-65 were asked to complete unmoderated usability study. Research questions this usability study tried to answer were:
- What can we learn from the user flow, or the steps that users take to order a snack?
- Are there any parts of the user flow where users get stuck?
- How easy or difficult was the app for users?
Usability Study Findings: Research Insights
1. Unsure how to access shopping cart
Most users were expecting shopping cart at the top right corner of the page instead of right bottom corner.
2. No confirmation message when snack added to a cart
In general, users want to see a response to their actions. When adding a snack using Your Favorites, users were not notified about successful action.
3. Shopping cart summary after Checkout Button
Most users found the flow of the checkout process confusing. They were expecting a summary of their order before they clicked checkout button, instead of after Checkout button.
5. Refining the Design
Mockups | High-Fidelity Prototype | Accessibility
Mockups: Home Screen Changes
- – Simplified header
- – Recommended section has horizontal scrolling instead of carousel
- – Bottom navigation icons changed
- – Food & Drinks tab renamed to Snacks
Confirmation message does not require user’s interaction, it dissapears in few seconds
Action button Start Over was added
Main User Flow: Order Snacks via Snacks Tab
Accessibility Consideration
The desgin is accessible to users who may have an impairment or disability.
Provided access to users who are vision impaired through adding ALT TEXT to images for screen readers.
The use of icons made navigation simplier and easier.
The use of images to represent different snacks help all users to better and quicker understand the designs.
6. Takeaways: Impact
The users described the app as fun and engaging. Most users found the process of ordering snacks easy and quick. All users found Your Favorites section on the home page useful and felt like the app was built for them. Designing a snack ordering app for Star Theater highlighted the importance of user-centered design and seamless integration within a specific environment. It reinforced the significance of creating an intuitive interface that caters to visitors’ needs, allowing them to effortlessly order snacks and enhance their experience.
What I Learned
Throughout this project, I learned the importance of research and testing. I learned that successful app design goes beyond aesthetics. It involves empathizing with users, understanding their pain points, and incorporating features that align with their preferences. While designing the snack ordering app, I experienced that design is on-going process. Each iteration pushed my design further.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.