SVS Cinema

Project Vision

SVS Cinema is an app that enables users to order and pay for their movie snacks online, allowing movie-goers to conveniently collect their goods from a kiosk at the theatre, thereby bypassing lengthy queues. This project adhered to to the human-centered design philosophy, ensuring that the user’s needs, motivations, and challenges were considered every step of the way.

Goals

To integrate snack ordering with the typical movie ticket ordering process.
Enable users to quickly and effortlessly collect their order.
Strategically utilize navigation to assist users in easily navigating through the primary user flow.
Keep the checkout process simple and easy to complete.

Kickoff

In this project, I took a goal-orientated design approach to ensure that design efforts were always focused on the user’s goals for using the app. To do this, I conducted industry research and initial user surveys of the target demographic, created user personas and user journey maps, and then conducted a competitor analysis. My aim was to address the following questions:

Who are the primary users?
What are our primary user's goals and motivations?
How can we faciliatate the completion of our primary user's goals?
What pain points do users typically encounter?
What unique value propositions are our competitors providing?
What can we learn from the user journey of our competitors apps?

Survey Results

Off all ticket purchases are purchased online

0 %

Of moviegoers are between the ages of 18 and 24

0 %

Of moviegoers are between the ages of 25 and 39

0 %

Of moviegoers purchase snacks at the movies

0 %

Of moviegoers cited queues as a primary pain point

0 %

User Personas

Alice

Age: 19

Occupation: Student

Alice is a movie buff who enjoys going to the movies with her friend every Friday night. Unfortunately, this happens to be the cinema’s busiest time which means waiting in large queues and often missing the first 5-10 mins of the movie. Alice needs a way to pre-purchase her movie tickets and snacks ahead of time, so that she can skip the queues and not miss out on the movie.

Andrew

Age: 37

Occupation: Marketing Manager

Andrew works long hours and looks forward to the occasional night at the movies with his wife and kids. While he prefers to order his tickets online ahead of time, he and his family are often late for their movie. Andrew needs a way to pre-purchase both movie tickets and snacks for himself and his family ahead of time so that he can avoid waiting in a queue.

User Journey Mapping

In this project, I constructed a user journey map to represent the string of processes involved in completing the current user journey of a primary user from start to finish. This user journey map helps identify how we can facilitate the user’s goals and address their pain points.

Competitor Analysis

I looked at several competing cinema apps that have similar functionality and user flows to SVS Cinema. In general, the competitors mostly provided clean, minimal interfaces with excellent imagery choices. Each competitor possessed a streamlined navigational system that, when used correctly, greatly assisted the user through the ordering process. Some key opportunities identified from my analysis that can be capitalized upon are:

Provide information on the types of theatres
Include friendlier, natural, and more inviting language choices.
Streamline the checkout process, minimize fields and steps.
Declutter the UI to ensure that only the most pertinent elements are displayed.

The User's Journey

Using the competitors’ apps as a starting point and based upon the goals of the primary users, I constructed a user flow diagram to highlight the primary user flow of the app, including its optimal path and periphery paths. This user flow diagram was built with the intention of becoming the basis on which to base the app prototypes on. Circles represent user actions, rectangles represent screen states, and diamonds represent decisions.

Wireflow

After completing some initial storyboarding and constructing a user flow diagram, I constructed an initial set of low-fidelity frames so that the primary flow and base functionality could be tested, iterated upon, and refined. These frames were created to emulate the user-flow diagram (above) as closely as possible.

Testing and Iteration

This project required multiple rounds of usability testing – an initial test for the low fidelity prototype and successive tests for each round of iteration for the high-fidelity prototypes. Affinity diagrams were used to synthesize the results and identify patterns from which insights for refinements and improvements could be made. The key insights obtained were:

After synthesizing the usability study results, patterns were formed and categorized into insights.

Please see the slide deck below for more information!

Refinements

Improved the quantity selectors

The previous version of the quantity selectors (drop-down selectors) was found to be clunky and cumbersome to use. They were less than ideal for mobile devices and required an additional push gesture to use than the upgraded quantity selectors. The new quantity selectors require fewer gestures to interact with and are conveniently positioned where the users thumbs should be.

Improved seating selection

The new seating selection screen not only provides visual feedback (highlighted selections) on a user’s selection but now also includes an element that depicts the placement of the cinema screen. This not only removes any ambiguity regarding their seating placement, but also their positioning relative to the cinema screen.

Improved confirmation screens

Additional confirmation screens have been added to the app, specifically the ticket and snack selection flows so that the user gets confirmation of their actions. Furthermore, the confirmation screens have added imagery that corresponds to the ticket or snack choices they have chosen. The added imagery improves the page’s overall scalability, particularly for those who don’t require confirmation.

Improved back button functionality

More back buttons have been added to the app, particularly the snack and ticket selection flows. This enables users to undo or reverse minor choices, which are particularly beneficial for users who are indecisive. The addition of more back buttons also facilitates exploratory browsing and experimentation (particularly with different combinations of snacks and drinks).

Goal completion

Integrate snack ordering with the typical movie ticket ordering process.

In addition to being able to order movie tickets, users are able to use this app to order snacks and drinks. The primary flow of this app (order tickets -> order snacks -> checkout) was designed to be very linear and to keep users on the optimal path. With this said, however, the navigation easily allows for detours and backtracing.

Enable users to quickly and effortlessly collect their order.

Each confirmed order generates a unique QR code which functions as a receipt for that order and is saved on a ticket dashboard. User’s can use this QR code to verify their order and collect the tickets and snacks they have purchased at a special kiosk.

Keep the checkout process simple and easy to complete.

The checkout process has been stripped of unnecessary fields and visual noise, leaving the bare essentials in place. The entire checkout process is boiled down into 3 steps – Review order, select the payment method and enter payment information.

Strategically utilize navigation to assist users in easily navigating through the primary user flow.

The navigational structure has been optimized with the purpose of guiding the user through the entire ordering process, thereby eliminating guesswork and deviations from the optimal path. Buttons have been included on the confirmation pages to help users transition to the next step, while a sticky navigation menu has been attached to the bottom of the screen for the user’s convenience. If a user wants to explore periphery functions, they can utilize the hamburger menu.

Style sheet

The color scheme, typography, and buttons were extended from ux.svswebdesigner’s own style system so that the app becomes a visual and stylistic extension of its ‘parent’. With this said however, its color scheme is well suited to a cinema app. The black space and white space draws the user’s attention towards the movie posters and snack items, while the splashes of brand red add personality and increase the salience of buttons to facilitate movement through the user journey.

Colors

#EE2D53

#231F20

#000000

#FFFFFF

#E7E7E7

Type

H1 Heading

H2 Heading

H3 Heading

Body text

Buttons

Key takeaways

This project really stressed the importance of successive rounds of usability testing and iterative refinement. It may not be obvious at first, but there’s always a way to improve, refine, and streamline elements and flows within an app.

This project also stressed the importance of user-centered design. A significant portion of time should be allocated towards defining the users, understanding their motivations, and discovering their pain points. The user’s goals and pain points should be considered during each and every phase of the UX design process.

The next steps from here should be: