Project Overview
Moovy is facing a challenge with long concession lines during snack checkouts, leading to customer frustration. The traditional snack purchasing process require customers to stand and wait in line, resulting in rushed decisions and a less immersive experience.
Moovy is facing a challenge with long concession lines during snack checkouts, leading to customer frustration. The traditional snack purchasing process require customers to stand and wait in line, resulting in rushed decisions and a less immersive experience.
To address this, Moovy needs a streamlined snack ordering app that allows moviegoers to place group orders directly from their mobile devices for in-seat delivery. The target audiences for the app include students attending movies with friends, date night couples, parents with young children, working professionals, and moviegoers with disabilities.
Role
Product Designer
Tool Used
Figma
Understanding the User
To understand the user, I conducted interviews with 10 individuals representing key target audience segments for the Moovy snack ordering app. These interviews revealed valuable insights into the pain points and needs of potential users.
To understand the user, I conducted interviews with 10 individuals representing key target audience segments for the Moovy snack ordering app. These interviews revealed valuable insights into the pain points and needs of potential users.
User Personas
Based on insights gathered from user interviews, the following personas were created for the project.
Based on insights gathered from user interviews, the following personas were created for the project.
User Journey Map
Ideation and Design
The Ideation phase started with sketching out the wireframe. A key feature envisioned for the app was a QR code scanner that would allow users to scan a QR code from their seating area. This scanning process would automatically identify the user’s seat location to ensure in-seat delivery of snacks and drinks. Additionally, anyone who scanned the same QR code would be able to join a group ordering session, allowing friends or family seated together to easily place orders together.
Low-fidelity Prototype
After the wireframing phase, I created a low-fidelity prototype so I can test it out with users. I decided to use a dark theme to reduces eye strain and to ensure that the interface is easier to view in low-light conditions.
Usability Testing
To identify areas for improvement, I conducted usability testing with 10 users. The goal was to observe how real users interacted with the first draft of the UI and gather feedback on clarity, ease of navigation, and overall experience.
Here are the key findings:
Here are the key findings:
Unexpected Item Addition
Users were confused by the sudden appearance of items, like the matcha drink from the low fidelity prototype, that they hadn’t personally added.
Users were confused by the sudden appearance of items, like the matcha drink from the low fidelity prototype, that they hadn’t personally added.
To reduce confusion, I added the names of the people who ordered each item and displayed the total number of items in the cart. This makes it clear that it’s a group ordering app, helping users understand when items were added by other group members.
Clickable Menu
Users did not realize the menu was interactive and thought that it was a static list, which led to navigation issues.
To make the interaction clearer, I added visual cues such as background pop-ups to indicate that the menu items are clickable. This helps users intuitively recognize interactive elements.
Order Tracking
Users wanted a quicker way to track their order status without needing to navigate back to the homepage.
To implement this feedback, I changed the “Back to Home” button to “Track My Order,” allowing users to easily check their order status straight after ordering.
Accessibility Considerations
Color Contrast Ratios
The design ensures strong contrast ratios to support users with low vision. The background color and text maintain a contrast ratio of 16.28:1, while buttons with white text achieve a contrast ratio of 10.37:1. Both meet and exceed the WCAG standards, enhancing readability and accessibility.
The design ensures strong contrast ratios to support users with low vision. The background color and text maintain a contrast ratio of 16.28:1, while buttons with white text achieve a contrast ratio of 10.37:1. Both meet and exceed the WCAG standards, enhancing readability and accessibility.
Screen Reader Optimization for Interactive Elements
Key interactive elements will be optimized for screen readers. For example, the “Add to Cart” button will announce the specific item being added, providing clear feedback for screen reader users and improving the experience for those with visual impairments.
Key interactive elements will be optimized for screen readers. For example, the “Add to Cart” button will announce the specific item being added, providing clear feedback for screen reader users and improving the experience for those with visual impairments.
Alt Text for Product Images
All product images are designed to include descriptive alt text, enabling screen readers to convey snack and drink item details to visually impaired users. This ensures that users can understand and make informed choices, even without visual context.
All product images are designed to include descriptive alt text, enabling screen readers to convey snack and drink item details to visually impaired users. This ensures that users can understand and make informed choices, even without visual context.
What I Learned
Through the user testing process, I was able to understand the difference between being the designer and using it from a fresh perspective. As the designer, it was easy for me to navigate the ordering flow and understand the features. However, user testing revealed that for people who had never used the app, certain aspects were confusing. While it was clear to me as the designer that items appeared due to others in the group adding them, users often felt confused without a clear indicator or label.
I learned that user testing is invaluable in uncovering blind spots in the design and helps create a more
user-friendly, intuitive experience. This feedback allowed me to make significant improvement to make the ordering process easier for users.
I learned that user testing is invaluable in uncovering blind spots in the design and helps create a more
user-friendly, intuitive experience. This feedback allowed me to make significant improvement to make the ordering process easier for users.