UX/UI Designer
Wireframer
Prototyper
Usability Researcher
Snaction! makes mobile snack ordering and delivery a reality for the many regional and independently owned and operated movie theaters in the country.
Often the only alternative is to arrive to the theater early, or miss critical moments of their movie experience while standing in line at the snack stand rushing to decide on a purchase.
The Problem
Moviegoers regularly face two problems when going to see a movie -- getting the ideal selection of snacks and making it to their seat before the movie starts.
This often means rushing to pick the same basic things and waiting in line with the anxiety of missing the start of the movie.
The Goal
Movie fans and theater patrons want to be able to choose their snacks more mindfully and to not have to rush to find their seats in the dark with their hands full.
Being able to order through a mobile app means relaxing more and enjoying the theater experience without the snack stand anxiety.
The Personas
The Color Palette, Typefaces, and Button Design
The color palette and visual elements of Snaction Backstage share those of the Snaction Mobile app, but in different proportions. Less black is used and more of the white for better readability. The accent colors are all still the same and used for buttons and interactive elements.
Primary:
Soft White
HEX: FFF8EF
Provides a comfortable background for readability.
Secondary:
Noir Black
HEX: 252525
Moody and dark, just like how a movie theater should be.
Accent 1:
Sultry Green
HEX: 005245
Implies progress but keeps it cool. Come hither but take your time.
Accent 2:
Dramatic Red
HEX: 9E1A00
Lives to draw attention to itself.
Accent 3:
Mysterious Plum
HEX: 710A57
Takes a backseat and lurks in the shadows.
Roboto
Light Italic
Sleek and stylish in its own modest style. Leads the way and looks good doing it.
Chakra Petch
Regular
A little boxy. Something similar to what you'd see on a marquee. Still very clean and readable at small sizes.
Primary Button
Dramatic Red fill calls attention. Labels are Chakra Petch in Snow White. All four corners have a 10px radius.
Secondary Button
Secondary buttons are pill-shaped with Mysterious Plum fill. Label is Chakra Petch.
Initial Ideation
Snaction! Backstage is primarily designed to support the functionality of the Snaction mobile app. With a mobile system built around ordering snacks during movies, a support system would naturally be needed for order fulfillment in the concession stand.
Functionality was added to support inventory management, refunds and replacements, and User Role/permissions management
Three personas were built around my own experience working in fast food service. While I am very proud of what I've built and designed for the Snaction! system as a whole, there were some important things left out of Backstage that I would have found sooner with more thorough research prior to wireframing and design
Usability Research, Insights, and Revisions
Prototype testing revealed a lot of issues that didn't come up in the wireframe testing, which was focused more on basic navigability. Once the design became more fleshed out, it became clear that test participants really needed a bit more role play to understand what they were testing exactly.
There was uniform distaste for the menu and inventory management system across the board and required a complete redesign for improved visual hierarchy and balance, and far more sample text to make input fields more intuitive.
It was honestly very helpful in developing the intuitiveness of the product because test participants didn't have experience working in a movie theater or concession stand which simulated new employee training really well. It did however create a long list of needed revisions that extended the expected timeline of this project.
Post Mortem
Snaction! Backstage was a challenging interface to build out since it organizes a lot more data between inventory management, order fulfillment, and customer and purchase data history to process refunds and item replacements. There are a lot of moving parts in play, which took a lot of time to build out and test and then rebuild into a functioning prototype.
Another limitation that this project faced was in early market research and usability testing. The goals and requirements for Backstage were inherited from Snaction Mobile, which has an entirely distinct end user. My research participants were also from my personal network, and while they
provided a vast amount of helpful feedback they still lacked some of the industry specific experience that would have no doubt provided better insight.
Given more time and better funding I would do some more market research with participants who actually have worked in the fast food industry, ideally with specific movie theater experience if possible. This design also left out a key part of concession sales which would need to be added -- in-person transactions at the counter -- since the mobile orders were the primary focus.
