Chowflix

PROJECT 01

Duration: 2 months

Role: UI/UX Designer.

Hero image
Hero image

Bringing convenience to movie snacking.

Chowflix is an app used to streamline the snack ordering process at movie theaters. The objective is to enhance the convenience of concession transactions at the movie theaters, thereby improving the overall experience of individuals engaging in these transactions. This case study details the design process towards creating this application.

Overview hero image
Overview hero image
OVERVIEW
THE PROCESS:
Design process
Design process
UNDERSTANDING THE PROBLEM:

Individuals of various age groups visit the movie theater for self-care, entertainment, family bonding and various other reasons. Personally, I occasionally visit with my 5 year old child as a means of bonding. Snacking is a regular part of our overall movie-watching experience. However, the stress arises when ordering snacks at the bar due to the long queues we often encounter, and it becomes even more challenging when my child finishes his snack during the movie. These experiences sparked my interest in finding a solution.

Movie theaters generate significant revenue from concession sales, however, insufficient attention has been given to the users/ individuals making these purchases and their overall experiences during concession transactions at the movie theater.

Foundational research (user interviews) was my selected approach to gain a comprehensive understanding of users beyond myself, exploring their needs, challenges, and preferences.

USER INTERVIEWS:

According to the Telefilm Canada's "Audience in Canada Report", moviegoers in Canada range in age between 18-44 years old. Guided by this information, my target audience for the interviews comprised individuals within this age group residing in the city of Calgary, Canada.

Users were approached at a popular cinema, the aim of the interview was explained and the significance of age as a criterion was clearly communicated. The users who fell within the specified age group were chosen and willingly agreed to participate anonymously. During the user interviews, detailed note-taking was employed.

Subsequently, affinity mapping was used to identify and cluster common themes in pain points.

man in gray button up shirt
man in gray button up shirt
PAIN POINTS:

  1. Not all movie theaters have a snack app, requiring you to be physically present at the theater to place an order.

  2. The queues at the snack bar are excessively long, leading to a prolonged and frustrating snack ordering process. The pressure to place orders quickly is heightened due to attendants being in a hurry, and the agitated individuals in the queue contribute to an overall challenging experience.

  3. During the movie, if you need more snacks, you get up and place one. This means missing part of the movie.

  4. The limited apps available are difficult to navigate, as they combine movie selection and snack ordering. The interface is overly busy and distracting, resulting in a lengthier ordering process.

  5. There is a lack of assistive technology for individuals who cannot type or read. additionally these apps do not cater to people who may not understand English, further limiting accessibility for a diverse user base.

  6. Health-conscious individuals require a means to monitor their calorie intake while placing snack orders.

  7. Given inflation, regular movie theater patrons need a solution to save money with every order.

1. EMPATHIZE
USER PERSONAS:

I refined and developed two personas for 2 distinct user groups, drawing from insights gathered during the user interviews. These personas served as a valuable tool to concisely summarize the needs, goals and preferences of the target audience.

user persona -louis
user persona -louis
user persona 2 -patricia
user persona 2 -patricia
USER STORIES:

I also created user stories to help understand from the user's perspective what features needed to be developed and why. They also served as references throughout the project to ensure that the design remained aligned with the target audience.

COMPETITOR ANALYSIS:

Before crafting solutions, a competitor analysis was conducted to identify existing solutions for addressing the pain points. The goal was to explore opportunities for improvement or to develop entirely new solutions. This audit report provides the detailed findings.

2. DEFINE
HYPOTHESIS/SOLUTIONS:

The insights gained from the competitor analysis and user interviews enabled me to pinpoint the deficiencies in the existing solutions and recognize opportunities to enhance the user experience, as well as develop new solutions.

proposed solutions
proposed solutions
STORYBOARDS:

I utilized both big-picture and close-up storyboards, to aid in visualizing and understanding how the proposed solutions would unfold, providing an additional layer of assurance in meeting users' needs and preferences, and illustrating the user journey.

close up story board
close up story board
big picture storyboard
big picture storyboard
3. IDEATE
USERFLOW:

I started the design phase with creating a user flow. This helped me map out the steps users will take to accomplish tasks within the product. It also provided clarity on how different screens and features will be connected to fulfill user needs.

user flow
user flow
INFORMATION ARCHITECTURE:
information architecture
information architecture
SKETCHES AND WIREFRAMES:

Next, I engaged in sketching wireframes on paper, employing iterative process to comprehend the overall architecture of the interface, visualize the user flow and navigation within the application, all while actively conceptualizing and refining design ideas. This step preceded the transition to creating digital wireframes and a prototype.

initial sketches
initial sketches

Digital wireframes:

4. DESIGN

Guided by the user flow, I created an information architecture.

Sketches:

digital wireframe 1
digital wireframe 1
digital wireframe 2
digital wireframe 2
digital wireframe 3
digital wireframe 3
digital wireframe 4
digital wireframe 4
digital wireframe 5
digital wireframe 5
USABILITY TESTING (1)

To ensure that the digital wireframes designed aligned with the needs and expectations of the intended users, and to avoid making assumptions, usability testing was conducted on the prototype. During the testing, I instructed participants to perform specific tasks and asked them questions about their interaction with the product.

The insights gained from the study helped identify preferences in the applications usage:

  • All 5 participants expressed a preference to scan movie ticket on the cart page before checking out.

  • 4 out of 5 participants expressed a desire to save card details for faster transactions during payment.

  • 2 out of 5 participants expressed a desire for an edit button per item in cart, enabling them to easily make adjustments.

Here is a slide presentation of the testing.

MOCK-UPS AND HIGH-FIDELITY PROTOTYPE:

After revising the low-fidelity design based on the feedback from usability testing. I created mockups that served as the basis for developing a high-fidelity prototype.

Below are some of the visual elements that brought the design to life and elevated it to a high-fidelity level.

design guide
design guide
USABILITY TESTING (2) :

Another round of usability testing was conducted on the high-fidelity design to confirm that the design addressed its purpose and effectively met the needs of the users.

Recognized themes from the testing were:

  • 3 out of 5 participants were unable to locate the "sign in " link located at the bottom of sign up page.

    "It was hard for me to notice the sign up link at the bottom of the sign up page" (Participant 3).

  • 2 out of 5 participants would like the buttons wider to increase tap area.

    "I have fat fingers, I find the buttons too small to tap on"( Participant 2).

ITERATIONS:
iteration 2
iteration 2
iteration 1
iteration 1
FINAL DESIGN:

User-centric design:

  • Minimal design, clutter free.

  • Choice of delivery on cart page

  • Calorie breakdown per snack ingredient on menu detail page

  • Points accumulation for discounts toward purchase

This is an interactive prototype, click through to explore.

Inclusive and accessible design:

  • Choice of language.

  • Descriptive images and icons for screen readers.

  • Speech to search feature

  • Feedback interaction for pressed buttons

  • Scan/enter ticket details (with speech to text feature)

5. TEST
WHAT"S NEXT?
  • Enable snack quick-add option for faster checkout.

  • Provide the option to choose preferred time and date for snacks to be delivered or picked up, to allow individuals manage their schedules and place orders in advance.

  • Include the option to apply coupons/offers during ticket purchase for snack orders, enabling individuals to save more on their orders.

TAKEAWAY:

I created user flow and wireframes based on my assumption on how users would navigate the application. However, after creating the low-fidelity prototype and conducting design research (usability testing), I discovered that users preferred scanning movie ticket towards the end of the snack ordering process. This realization emphasized the significance of research and a user-centric design approach, designing not just based on assumptions of user needs but aligning with what users truly require.

Tosin

UI/UX Designer