Case study:
SeatFoodie
Google UX Portfolio Project
Project Introduction
Introduction:
SeatFoodie is an complete movie theatre experience app that let’s you book movies and order snacks without waiting in queue at a movie theatre.
Project Duration:
12 April 2023 to 28 May 2023
My role:
UX designer designing an app from conception to delivery
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project Overview
The Problem:
Ordering Snacks in a Movie Theatre by the traditional way of Queuing up in a line.
The Goal:
To make the ordering process more user friendly, convenient & accessible.
Understaning the User
User Research - Summary:
During my user research for a Snack Ordering app for a Movie Theatre, I identified our primary user group as busy movie-goers who prefer the convenience of ordering snacks through an app rather than waiting in long lines. I discovered that time constraints were not the only reason why users opt for snack ordering apps. Some users faced difficulties in getting their desired snacks due to busy schedules, dietary restrictions, or limited availability at the theatre. Additionally, some users preferred to avoid the hassle of waiting in lines or finding a parking spot near the theatre. My research emphasized the importance of convenience and accessibility for our target users, and I am working towards designing an app that caters to their needs.
User Research - Pain Points:
1
Long Queues
Waiting in long queues to order snacks can be time-consuming and frustrating for users who want to enjoy their movie experience without interruptions.
2
Limited Snack option
Movie theatres often have limited snack options, which can be disappointing for users with specific dietary requirements or preferences.
3
Accessibility issues
Accessibility issues such as physical barriers or visual/hearing impairments can make it challenging for older adults or users with disabilities to navigate the theatre and order snacks.
4
Time Constraints
Busy schedules can make it challenging for users to find time to go to the theatre and purchase snacks, especially if they have other obligations or interests competing for their time.
User Research - Personas:
Based on the user research, I created two personas whose needs, goals, motivations and frustration represent the potenial users of my app
User Research - Storyboards:
To visually understand the user’s experience, I created big picture and close up storyboards
Starting the design
Starting the design - User Flow:
After completing my user research, I initiated my design process with the creation of a user flow
Starting the design - Paper Wireframes:
With the user flow mapped out, I then proceeded to create paper wireframes. Taking the time to iterate of each screen of the app on paper, I ensured that the elements that made it to digital wireframes would be well-suited to address users pain points. For the Home Screen, I prioritized a quick and easy access to movies and snacks to help users save time.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Starting the design - Digital Wireframes:
After ensuring the inclusion of all required features in the paper wireframes, I proceeded to design digital wireframes, basing the design on the findings from the user research.
Quick and easy access to movies to help users save time
Easy access to navigation
Movies selected are displayed here along with number of tickets and seat number
Offers button so users can get discount on their favourite movies and snacks.
Starting the design - Digital Wireframes:
Starting the design - Low-fidelity prototype:
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was booking a movie and ordering snacks, so the prototype could be used in a usability study.
View the low-fidelity prototype - Low-Fidelity Prototype
Testing and Iterating the designs - Round 1:
Summary
I conducted a usability study to gather insights and refine the initial design concepts. The findings from this study informed the progression from wireframes to mockups.
Parameters :
Methodology: Unmoderated Usability study
Location: Remote, India
Participants: 5 Participants, 3 Males, 3 Females and 1 Non-Binary Individual
Length: 1 Hour
Key Performance Indicators (KPIs):
Time on task
User error rates
Conversion rates
System Usability Scale
Findings
1
Users wanted an option to go back to Home Screen after booking a movie
2
Users wanted a more obvious Back button
Affinity diagram
After the usability study, I created an affinity diagram where I grouped similar observations in order to create themes
Iterations
Participants thought an add to cart function would be nice to have. So while creating the mockups, I added an option to add the item to cart, or go to checkout after selecting the seats
Refining the design
Refining the design - Typography and color:
Typography:
Logo: Mitir - Semibold
Heading: Myanmar text - Bold
Information: Segoe UI Variable - Semilight Display
Color:
#E0A106
#023047
#FFFFFF
#E8E8E8
#000000
Refining the design - Mockups:
Refining the design - High-fidelity prototype:
Using the completed set of mockups, I created a high-fidelity prototype. The primary user flow I connected was booking a movie and ordering snacks, so the prototype could be used in a usability study.
View the low-fidelity prototype - High-fidelity prototype
Testing and Iterating the designs - Round 2:
Summary
I conducted another round of usability study to validate and fine-tune my designs. This stage highlighted areas in the mockup that required further refinement and ensured a user-centric design.
Parameters :
Methodology: Moderated Usability study
Location: Kolhapur, Maharastra, India
Participants: 5 Participants, 3 Males, 3 Females and 1 Non-Binary Individual
Length: 1 Hour
Key Performance Indicators (KPIs):
Time on task
User error rates
Conversion rates
System Usability Scale
Findings
1
Users wanted an option to go back to Home Screen after ordering snacks
2
Users wanted an option to add or remove items in Cart and Checkout
3
Users wanted more information about the movie before booking it
Affinity diagram
After the usability study, I created an affinity diagram where I grouped similar observations in order to create themes
Iterations
Participants wanted an option to go back to the home screen. So I added a “Go Back to Home” button at the end of the snack ordering process
Participants were frustrated that they couldn’t add or remove items in the cart or checkout page. So I added an option to add or remove items in both the cart and checkout page
Participants wanted more informaton about the movie before booking it. So I added a few categories like genre, duration and rating of the movie. I also included the price here as the price was only revealed at the checkout screen before.
Accessibility Considerations
1
Use of easy to read colors
2
Used icons to help make navigation easier.
3
Used detailed use of imagery for movies and snacks to help users.
Going Forward
Impact:
The app makes booking movies and ordering snacks really easy without waiting in queue at the movie theatre. The app also makes users feel like SeatFoodie really think about their needs.
What I learned:
While designing the SeatFoodie app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs and played a big part.
Next Steps
1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2
Conduct more user research to determine any new areas of need.