UX Design Case study: Snackery
Introduction
Hi, I am Adeeba. I recently completed Google’s UX Design Professional Certification program in association with Coursera. The first project I have chosen was to design a snack ordering app for a movie theater.
Project Duration
November 2021 — January 2022
My role
UX Researcher, UX Designer
Responsibilities :User Research, Paper and digital wireframing, Low and high fidelity prototyping, Conducting usability studies, Accounting for accessibility, and iterating on designs
The Problem
Long lineups in front of the snack bar and carrying large order back to the seat causes frustration and moviegoers can’t enjoy their precious relaxation time.
The Goal
Designing an app “Snackery” to let users orders snacks in an easy and effective way without frustrating long lineups and carrying large order back to the seat.
User Research
The problem is defined, next step was to conducting user research to know about the user, pain points and their needs.I conducted user interviews and understand the user needs and pain points.Based on the information from the interview, I created personas and user journey maps.
I conducted user research to find the pain points of the users when buying snacks at the interval time of the movie theater. I conducted interviews and created a user journey map to know the pain point of the users that I am designing for.
The user group was moviegoers between the age of 20–60 who go to the movie theater weekly or within a month. The user research helped to know the pain points when buying snacks during movie time and start the initial design of the snack ordering app “snackery”.
Persona
Personas are fictional users whose goals and characteristics represents the needs of a large group of users. Here I created two personas for two different groups, one for the Person who goes to the movie theater for all upcoming releases and the Second user group who enjoys movie time with family.
Persona 1 : Alan
Problem Statement: Alan is a busy professional who needs a snack ordering app because crowded lineups and rush in the snack shop and large order is frustrating while waiting with his children.
Persona 2:Sam
Problem statement: Sam is a 3-year university student who goes to the movie theater for all new releases who needs a snack ordering app to order snacks in advance because he is frustrated about the long lineups in front of the snack shop and is disconnected from watching movies
User journey map:
Mapping Alan’s and Sam’s user journey helped to know the pain points and the scope of the snack ordering app in movie theaters.
User pain Points
User research helped me to identify the pain points that users faced at the snack ordering time.
- Long Waiting
- Availability
- Carrying large orders
- Lateness
Ideation
Based on the personas and user journey maps, I have got the initial design ideas to start the designing process.
Paper wireframes
Paper wireframes helped me to quickly iterate on the initial design ideas.
Design Decisions
After the ideation process I came up with three design decisions and the Snack ordering app is built upon these three design decisions.
- QR Code generation for order: A QR code is generated at the end of the checkout process. Delivery of the ordered snacks is done by scanning the QR code.
- Two delivery modes: Two types of delivery modes are provided,Delivery to the seat and pick up from the counter.
- Two payment modes: As an accessibility consideration two payment modes are included, Cash on delivery and online payments.
User flow diagram
User flow is the path taken by a typical user on an app or a website, so they can complete a task from start to finish. For snackery, User flow begins from the selection of snacks and goes through adding selected snacks into the cart, selecting payment and delivery options, order confirmation, and QR Code activation.
Story boards
Storyboards visually describe and explore a user’s experience with a product. I created big- Picture storyboards to know the user needs, their context, and why the product will be useful to the user, and also created close-up storyboards that concentrate on how the product will work.
Digital Wireframes and low-fidelity prototype
Tool: Figma
Based on the Paper wireframes I created digital wireframes.
Low fidelity prototypes connected the primary user flow of selection and ordering of snacks and were used in the usability study with users.
Usability study
I conducted two rounds of usability studies. The first usability study helped to know the key user needs and iterate on the wireframes. The second round of usability study helped to iterate on the mockups.
Usability study Round 1 findings:
- Make labelled add to cart button
- Add “ Add to cart button “ into the bottom navigation bar.
- Include detailed description of the product.
- Combine delivery mode page and payment mode page into a single page
Based on the Round 1 of the usability study findings, Iterated on the designs and Solved the problems associated with the main user flow after that I designed additional screens.
Usability study Round 2 findings:
- Include dark mode to help improving eye strain in low light environments.
After the usability study, I iterated on the designs and created Mockups based on the research findings
Design Changes before and after usability study
Mockups and High-fidelity prototype
Examined the finding from the usability study and iterated on the mockups and created a high-fidelity prototype that meets user needs. Also, included a dark mode to help improve eye strain in low-light environments.
Design System
Accessibility Considerations
- Used labelled Icons to easily navigate between pages.
- Used alternative text to images for Providing access to the users who is visually impaired to use screen readers.
- Two payment and delivery modes are accessible for all users to order and buy snacks.
Impact
The app makes users easily order and buy snacks from the movie theater and get relaxed while watching the movie.
“This app is very useful for moviegoers. I will be one among them .” — user feedback
What I learned
Designing an app that meets users’ needs and solves their pain points creates a happy path in user journeys. User feedback and iteration are the keys to every design.
Thank you