CineSnack
The easiest way to have food delivered to you mid-movie.
CineSnack is a mid movie food ordering app that allows users to place orders from concessions at anytime during their movie going experience from the comfort of their seats.
Problems
Moviegoers who desire refreshments are forced to leave the theater and miss important plot points. Conversely, moviegoers occasionally arrive late at the theater and are unable to wait in line for concessions. Users need convinient way to order without having to get up from their seats.
Goals
Create a responsive website that adjusts to users varying screens that would enable customers to place orders and have them delivered to their seats.
Understanding the User
Concerning research for development many avenues were explored including: user interviews, competitive audits, audit reports. etc. I initially focused on the users ability to place an order before the theatre experience began. After some research and interviews I realized the importance of being able to place an order mid-movie. Most United States based theaters do not offer seat delivery service and certainly not mid-movie,
Lack of options
Users who wait in line usually are unaware of the availability of any specific item the theater may or may not have.
Having to wait in line
Users may be late for movie and don’t have time to wait in line for concessions. This option would allow them to skip the line and head straight to their movie.
Inconvenient
Most movie theaters do not provide the option to pre-order leaving users at a disadvantage.
Pain Points
Personas
User Journey
Mapping Sidney Jones’ journey revealed how helpful it would be for users to have access to a dedicated CineSnack app.
Paper Wireframes
Taking time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well suited to address user pain points.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy navigation was a key user need to address in the design in addition to equipping the app to work with assistive technologies.
Low-Fidelity Prototype
The low-fidelity prototype connected primary user flow of searching for and ordering food from the comfort of your seat, so that the prototype could be used in a usability study with users.
Usability Study
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.
Round 1 Findings
People want to navigate easily.
People want to check out quickly.
Round 2 Findings
Familiarity accomplished by altering navigation.
People want access to the full menu.
High-Fidelity Mockups
Early designs allow users to access the food section from the main page of the movie theaters website. Usability study concludes that the food section was easier to navigate on all three size screens in this responsive design.
High-Fidelity Prototypes
The final high- fidelity prototype presented cleaner user flows for searching for food and ordering from concessions with ease.
Accessibility Considerations
Provide access to users who are visually impaired though adding alt text to images for screen readers
Exceeding the minimum color contrast standard.
Ensure adequate space for controls.
Use clear language
Takeaways & Next Steps
Moviegoers can enjoy their snacks without having to interrupt their moviegoing experience.
User research as well as testing was critical to ensure no bias during the design phase.
Collect and analyze user feedback to continue iterating the responsive website.
Continue user testing to see how people actually use the app and identify any issues or pain points.
Thank you for your time reviewing my work on the CineSnack responsive website! If you would like to keep in touch, my contact information is provided below