Snaction! Backstage

snaction backstage inventory list button

snaction backstage item detail modal button

snaction backstage order management button

snaction backstage account management button

snaction backstage order management modal

Snaction! Backstage is the SAAS sister software to Snaction! Mobile that supports operations happening behind the snack counter of a given theater. United they form the Snaction! system that can be implemented for movie theaters of all sizes allowing moviegoers to order their snacks quickly and seamlessly, and optionally have them delivered to their seats in the theater. Snaction! Backstage is designed for a web-based experience with an optional tablet application for just the Order Queue.

Design System

Color Palette

Snaction! backstage keeps the same color palette as Snaction! mobile — colors that have an old Hollywood quality, vibrant but also mature — 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

Button shapes are nearly identical to the Snaction! mobile version. The Primary is generally red with a stroke, and the Secondary is generally plum with no stroke. They are otherwise the same size on the screen where they both appear. The Tertiary button style is again much smaller and pill shaped, and is commonly green or the same red color as the primary.

(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: 10px

Default Fill: #710A57

No Stroke

Label Color: #FFF8EF

Tertiary Button

Four Corner Radius: 50px

Default Fill: #005245

No Stroke

Label Color: #FFF0AE

Typescale

Satisfy is used for the Snaction! Backstage title, just as it is for Snaction! Mobile, providing a dramatic flourish to the brand. Otherwise all text in the Snaction! system 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.

H1: Satisfy, 64

H2: Roboto Italic, 52

H3: Roboto Light Italic, 42

H4: Chakra Petch Medium, 30

H5: Roboto Light, 24

Body: Chakra Petch, 20

Button: Chakra Petch Bold, 20

Label: Chakra Petch Semibold Italic, 20

Initial Research

Problem Statement: The Snaction! Mobile app doesn't work without someone in concessions preparing the snacks and managing the selection of snacks offered by the theater.

Competitive Analysis: The competitive audit for Snaction! Mobile was able to compare the more accessible customer-facing applications for snack order fulfillment. The proprietary internal systems however proved more of a challenge, so Snaction! Backstage was designed to meet the needs of Snaction! Mobile.

Given more time and resources, I would love to revisit Backstage as an order fulfillment system that truly focuses on meeting all the needs of a theater concession stand, not only the functions of Snaction! Mobile.

Goal Statement: Design a SAAS web application that supports the functions of Snaction! Mobile — order fulfillment, inventory management, order history, refunds, and subscription/license management.

Personas: Three end user personas were created who represent the various roles working in a concessions service kitchen. Their needs and pain points were fleshed out based on personal experience from the service industry and refined with feedback gathered during testing.

Personas

Carrie Grant

F, 29. Concessions Manager

Needs to focus on overall metrics and financial performance, as well as the operational aspects like inventory and processing refunds.

Also needs to be able to set system permissions and access for her team.

Jordan Purrt

M, 19. Hourly Employee, College Student

Needs a system that is easy to navigate with minimal training.

His ambitions don't have anything to do with snacks or movies. He wants to do the work and forget about it once his shift ends.

Barbara Fjord

F, 65. Hourly Employee, Retired

Struggles a little with new technology. Needs simple navigation, reliable prompts, and good readability.

This is a fun job to keep herself active. Her focus is on the customer experience and wont be bogged down by a complicated system.

Carrie Grant

F, 29. Concessions Manager

Needs to focus on overall metrics and financial performance, as well as the operational aspects like inventory and processing refunds.

Also needs to be able to set system permissions and access for her team.

Jordan Purrt

M, 19. Hourly Employee, College Student

Needs a system that is easy to navigate with minimal training.

His ambitions don't have anything to do with snacks or movies. He wants to do the work and forget about it once his shift ends.

Barbara Fjord

F, 65. Hourly Employee, Retired

Struggles a little with new technology. Needs simple navigation, reliable prompts, and good readability.

This is a fun job to keep herself active. Her focus is on the customer experience and wont be bogged down by a complicated system.

Carrie Grant

F, 29. Concessions Manager

Needs to focus on overall metrics and financial performance, as well as the operational aspects like inventory and processing refunds.

Also needs to be able to set system permissions and access for her team.

Jordan Purrt

M, 19. Hourly Employee, College Student

Needs a system that is easy to navigate with minimal training.

His ambitions don't have anything to do with snacks or movies. He wants to do the work and forget about it once his shift ends.

Barbara Fjord

F, 65. Hourly Employee, Retired

Struggles a little with new technology. Needs simple navigation, reliable prompts, and good readability.

This is a fun job to keep herself active. Her focus is on the customer experience and wont be bogged down by a complicated system.

Sketches & Wireframes

The initial designs for Snaction! Backstage were based on the corresponding needs of Snaction! Mobile. I did start with some storyboarding and quickly produced paper wireframes, though there was more emphasis on getting through the digital wireframing as soon as possible to build using the already existing components and styles.

Order Queue

Dashboard

Inventory

Item Details

snaction backstage digital wireframe item detal modal

snaction backstage paper wireframes order management

Order Detail

snaction backstage digital wireframe order management

snaction backstage paper wireframes account management

Account Details

snaction backstage digital wireframe account management

Sketches & Wireframes

Order Queue

Dashboard

Inventory

Item Details

Order Detail

Account Details

Sketches & Wireframes

Order Queue

Dashboard

Inventory

Item Details

Order Detail

Account Details

Mockups

Snaction! Backstage underwent only one round of usability testing focused on the protoype rather than early wireframe testing. It seemed at the time that with the style sheet and components already created that it would be more efficient to build mockups as soon as possible and collect all the necessary feedback at once. This is not a process that I would plan on following again as it resulted in almost too much feedback at once..

Order Queue

Dashboard

Inventory

Item Detail

snaction backstage mockup order management modal

Order Detail

Account Management

Mockups

Order Queue

Dashboard

Inventory

Item Detail

Order Detail

Account Management

Mockups

Order Queue

Dashboard

Inventory

Item Detail

Order Detail

Account Management

Prototype Usability Testing

The test was moderated via Zoom (a mix of remote and in-person) that consisted of several prompts and questions to measure task completion, drop off, and overall feelings of usability. There were 5 participants, a mix of men and women ranging in age from 25-45 who had not already participated in the usability testing for the mobile app.

Some test users had prior work experience in the service industry, but still were given a thorough walkthrough of the specific scenario and the full background of the Snaction! Mobile app for clear context.

Themes

Most participants expected to be multitasking orders instead of focusing on each order in sequence.

Broadly there were concerns about readability and focus on the right number of orders at one time came up, as well as button position when marking an order as completed.

All test users wanted searchability in the order history screen as the list felt overwhelmingly long.

Multiple testers struggled with the Item Details modal, not fully understanding the purpose of each field relative to how the information appeared in Snaction! Mobile. Adding to the inventory was particularly difficult.

Most testers pointed out functionality issues with the (too basic) Account Management screen, namely adding or reducing the number of available licenses and cancelling the theater's subscription.

Insights

The Order Queue needed to allow the individual items to be marked as ready in addition to the whole order to provide the benefit of multitasking.

The order fulfillment screen was adjusted for better readability and focus. Buttons and text were resized and repositined for easier reach with a mouse.

Searchability was added to the order history screen with improvements to the refund/replacement statuses of each order.

Update visual hierarchy of the Item Details modal, add sample text for better understanding of each field, and revamp the Add to Inventory tool.

Added a lot more functionality to the Account Management screen to allow for better control over available licenses and the Snaction! subscription generally. Also changed user roles from checkboxes to radials to clarify levels of access to the system.

Themes

Most participants expected to be multitasking orders instead of focusing on each order in sequence.

Broadly there were concerns about readability and focus on the right number of orders at one time came up, as well as button position when marking an order as completed.

All test users wanted searchability in the order history screen as the list felt overwhelmingly long.

Most testers pointed out functionality issues with the (too basic) Account Management screen, namely adding or reducing the number of available licenses and cancelling the theater's subscription.

Insights

The Order Queue needed to allow the individual items to be marked as ready in addition to the whole order to provide the benefit of multitasking.

The order fulfillment screen was adjusted for better readability and focus. Buttons and text were resized and repositined for easier reach with a mouse.

Searchability was added to the order history screen with improvements to the refund/replacement statuses of each order.

Update visual hierarchy of the Item Details modal, add sample text for better understanding of each field, and revamp the Add to Inventory tool.

Themes

Most participants expected to be multitasking orders instead of focusing on each order in sequence.

Broadly there were concerns about readability and focus on the right number of orders at one time came up, as well as button position when marking an order as completed.

All test users wanted searchability in the order history screen as the list felt overwhelmingly long.

Most testers pointed out functionality issues with the (too basic) Account Management screen, namely adding or reducing the number of available licenses and cancelling the theater's subscription.

Insights

The Order Queue needed to allow the individual items to be marked as ready in addition to the whole order to provide the benefit of multitasking.

The order fulfillment screen was adjusted for better readability and focus. Buttons and text were resized and repositined for easier reach with a mouse.

Searchability was added to the order history screen with improvements to the refund/replacement statuses of each order.

Update visual hierarchy of the Item Details modal, add sample text for better understanding of each field, and revamp the Add to Inventory tool.

Post Mortem

There was a lot to learn from Snaction! Backstage, primarily the importance of completing initial testing of wireframes. Having the design system and prototype for Snaction! Mobile already completed provided a false sense of accomplishment in designing this companion software, and I incorrectly believed the whole point was supporting the functions of the mobile app.

In reality, the user needs and pain points here were so different from the user needs of the mobile app. If I could I would tell my past self that early testing would definitely be needed here. Ultimately the feedback that came out of the prototype usability test was incredibly helpful, but revealed a lot of things that would have been better resolved early on.

The other major lesson learned is that Snaction! Backstage completely ignores a very significant piece of movie theater snack concessions -- point of sale transactions. The focus coming into the project was so centered around supporting the mobile app that POS was totally overlooked.

The fact that Snaction! Backstage is capable of managing inventory and order history means that it really should encompass all transactions for the snack counter, not just mobile purchases. Otherwise, the theater would still need a separate system for POS transactions and likely wouldn't bother with Snaction!. Were I to make any further changes to this project, I would definitely add a Point of Sale checkout system.