Snaction! mobile
Snaction! is a system that allows moviegoers to order their snacks quickly and seamlessly through the theater's concession stand, with the option to have the snacks delivered to them. Snaction! is designed with independently owned theaters in mind which tend to be small to mid-sized, but can be implemented for any theater.
Design System
Color Palette
Variations of colors were selected that have an old Hollywood quality, vibrant but also aged — think red carpets, dramatic banquets, and rich tapestries and drapes. The secondary colors were chosen to represent black and white film and a gold spotlight.
Buttons
(enlarged to show detail)
Primary Button
Four Corner Radius, 10px
Default Fill, #9E1A00
Default Stroke, #710A57, 3px
Label Color, #FFF8EF
Secondary Button
Four Corner Radius, 6px
No Fill (gray bg added)
Default Stroke, #710A57, 5px
Label Color, #FFF8EF
Tertiary Button
Four Corner Radius, 50px
Default Fill, #710A57
No Stroke
Label Color, #FFF0AE
Typescale
Satisfy, a script font, was selected for really only the Snaction! title, providing a dramatic flourish to the brand. Otherwise all text in the Snaction! app is either a variation of Roboto or Chakra Petch. Both are sans serif for readability. Headers use Roboto Italic for its slender statuesque quality. Body text, buttons, and labels use Chakra Petch for its boxy angular quality that resembles an old marquis sign.
Problem Statement: Movies are such an exciting event for the family and date nights, but the concession stand is always a pain point. The moments before the movie never seem to allow enough time to stand in line and wait for snacks to be prepared. After all, the previews are often the best part of the experience.
Competitive Analysis: Some large theater chains have developed similar systems that are proprietary to their brand. Not all of them are built equally and many leave something to be desired in terms of snack categorization and recommendations. Snaction! makes mobile snack ordering and delivery a reality for the many regional and independently owned and operated movie theaters in the country, where the only alternative is to arrive to the theater early, or miss critical moments of the movie-going experience.
Survey: A small group of participants was surveyed about their movie-going habits, typical considerations when making snack purchases, and pain points during the snack purchasing process. Key findings were:
Budgeting was critical to snack purchases. Most participants felt snacks were overpriced.
Time spent waiting to purchase snacks meant time missed from watching the movie.
Finding the right kind of snacks that would last the length of the movie and provide the best combination of flavors (so they didn't have too many salty snacks and not enough sweet or a large enough drink to balance it out).
Goal Statement: Design a mobile app that enables movie theater patrons to order snacks from the comfort of their seats and skip the long wait and stress of ordering from the concessions counter, designed in a way that isn't distracting to other movie-goers.
Personas: Survey results were distilled into two end user personas who represented the major needs and pain points.
After wireframing, a preliminary usability test was conducted with five participants varying in age, gender, and level of ability. This began as an unmoderated remote study, which I quickly realized was not the best method as testers had a lot of questions and struggled with the Zoom recording controls. The scond half of the wireframe user tests were done in person to help navigate the prompts and process better. Overall the test still revealed some great insights.
The hi-fidelity prototype test was conducted via Zoom, a mix of in-person and remote, but entirely moderated. 5 participants (2 women and 3 men between 20 and 40, and two having sight disabilities) were led through a series of pre-written prompts and follow up questions.
There was a lot that I learned during this design, mostly with regard to unmoderated usability studies. Even though Zoom is a household tool now, participants made a lot of mistakes when it came to sharing their screens and recording their feedback.
Test users were also very confused by the concept of UX design and generally navigating the prototype in Figma. I quickly determined that usability studies would need to be moderated to ensure the correct usage of Zoom and to provide more guidance through the process.
I would love to revisit this design to make the menu screen more interactive and generally update some elements with auto-layouts to better preserve the spacing.