PitchIn
Case Study
Website and app for volunteering
Research | Users | Wireframes | Usability Test | High-Fidelity Prototype | Design System | Next Steps | Lessons Learned
Overview
The Credits is a movie theater located in Cincinnati, Ohio that has been open for the last 30 years. They are constantly seeking to enhance their customers' experience, and they have noticed the growing popularity of dine-in movie theaters. In response to this trend, they are exploring ways to improve their concession stand offerings.
the goal
Create a responsive website that addresses the inconvenience of long concession lines and customers missing parts of the movie to get refreshments.
They aim to reduce the time customers spend away from the movie and improve their movie going experience.
Starting with Research
I started my research by taking a look at 4 movie theater chains to get a feeling for the processes that already exist. Some theaters offer in-house dining while others only offer snacks and drinks. My competitive analysis showed me:
Admired and Inspired By:
- Online refreshment ordering that links to ticket sales through profile
- Clear labeling of menus and call-to-action buttons
- Rewards programs for ticket and refreshment orders
- Allergen and nutritional information listed
Room for Improvement:
- Some larger theaters do not list menus as they differ at each location
- Barriers to viewing menu including ticket order or registration prerequisites
- Overcomplicated menus can make finding options more tedious
- Some theaters do not promote refreshments on the home screen
Let's Meet the Users
With some initial information gathered, I was ready to start getting to know my users and learn about their experiences.
research goals
- understand common challenges people face when ordering refreshments at the movies
- pinpoint common frustrations people experience with the ordering process at movie concession stands
I began by talking to people who attend the movies at least once a month.
I asked about their ordering habits, who they tend to go to movies with, and challenges
they
face in the process.
This is what I learned:
Anthony, 33
Occupation: Dental Assistant
Hometown: Cincinnati, Ohio
Family: one child
"Going to the movies is an experience for our family, from the trailers, to the snacks, to the main show!"
Goals:
- Find an easier way to get snacks when taking child to movies alone
- Clear communication and streamlined ordering process
- Help his child with autism, who is a movie superfan, have the best viewing experience
Frustrations:
- The snack counter line is always busy which can be overwhelming for his child
- It can be difficult to juggle refreshments and taking care of his child when by himself
- Hates missing part of the movie when going to get refills
Anthony is a devoted father to a 7-year-old autistic child. He cherishes
spending
quality time with his son,
especially at movie outings where they can indulge in their shared passion
for
films.
As Anthony’s child has special needs, he seeks a simplified and
efficient
ordering process that
minimizes wait times and provides clear communication. He
needs
reliable and accessible service
that accommodates his son’s diet and allows him to spend more time enjoying
the
movie stress-free.
" My children have different interests and are all different ages, but movies are something we all can enjoy together "
Goals:
- Find an easier way to get snacks for a large group at the movie theater
- Accommodate her family with their favorite snacks and drinks
- Create a memorable, enjoyable experience for her family
Frustrations:
- It takes at least two people to carry all of the refreshments they need for a large family
- Long concession lines can be difficult making sure everyone in her group arrives early enough
- It takes a long time to coordinate the order with a large group
Mia is a dedicated daycare teacher with a husband, 4 children, ranging from
13 to
28,
and 2 grandchildren.
The movies are something her whole family can enjoy
together
despite their busy schedules and different interests.
With a large family, Mia is looking for ways to simplify the ordering
process.
She
needs a way to easily coordinate
several orders, assistance with delivering refreshments to the
seats,
and wants to minimize her to-do list to enhance
her experience.
Mia, 56
Occupation: Daycare Teacher
Hometown: Cincinnati, Ohio
Family: Partner, 4 children, 2 grandchildren
Click image to enlarge
Click image to enlarge
Click image to enlarge
Click image to enlarge
Wireframing
Based on the research and empathy exercises, the design should include solutions that save the user time. Users want to have the option to order ahead or get delivery to their seat. The design should include an intuitive ordering process and a quick checkout process. View wireframes in-depth.
Click image to enlarge
Usability Testing
Using my low-fidelity prototype, my usability study consisted of 5 participants who go to the movies at least once, every 1-2 months. Using my digital wireframes, I asked them each to complete the following:
- Prompt 1: From the homepage, please navigate to the food/drink menu
- Prompt 2: Open up the website and customize a large, coke fountain drink order for yourself
- Prompt 3: Now, add a medium popcorn with two toppings to your cart
- Prompt 4: Please find the cart, review your order, and complete the order by checking out
- Prompt 5: How did you feel about the website overall? What did you like or dislike?
After organzing and grouping the feedback, it was clear that three of the main processes needed some improvement: the ordering process, the checkout process, and the cart.
Results
After organzing and grouping the feedback into an affinity diagram, it was clear that three of the main processes needed some improvement:
ordering process
checkout process
cart feature
High-Fidelity Prototype
Based on patterns identified through the affinity diagram, some key elements were incorporated into the design:
5 out of 5 participants, were frustrated that pricing and quantity on food/beverage items were not listed or unclear.
Users need clearer communication and more information about food/drinks to make an informed decision and purchase
Improvements:
- The ordering process was updated to include dropdowns instead of buttons so more information like pricing and sizing could be added
5 out of 5 participants were frustrated by the checkout process being lengthy and including too many output fields
Users need a simplified checkout process that can pull in information from the account to reduce input
Improvements:
- I included a progress tracker to help users know how much/what details are left during the checkout process
- A sign-in feature was added that will be prompted before checkout if the user isn’t already logged in. Functionality will be added in development to pull in the user’s saved data and auto-populate checkout fields.
3 out of 5 participants were annoyed that they could not order their refreshments ASAP and instead had to select a specific date/time
Users need to have more options for ordering, including the option to order ASAP to help quicken the user flow
Improvements:
- An “ASAP” button was added to the ordering process for both pickup and delivery in addition to the order ahead feature
2 out of 5 participants were confused by the pickup/delivery toggle button
Users need buttons to be more intuitive and indicative of which option is selected
Improvements:
- The toggle button was redesigned and the color was updated to red. This allows for greater contrast to help the user easily tell which option is selected
2 out of 5 participants were frustrated that they could not edit their order from their cart
Users need more useful cart features including ways to edit their order, add or remove items
Improvements:
- The cart was updated to include buttons that allow users to edit the amount as well as remove items by changing the amount to zero
- This was also updated for the cart shown throughout the checkout process so they can continue to edit their order up until placing it
Bonus
The homepage felt out-of-date and busy. It also did not include an easy way to purchase movie tickets.
While purchasing movie tickets was not the focus of this case study, I felt it was important for the overall design to rework the homepage and include this
Improvements:
- Updated the main banner to better showcase movies and allow user's to more quickly find movie tickets
- Updated the overall design to a more modern design
Design System
Next Steps & Recommendations
Accessibility:
- Implement additional accessible design elements such as keyboard and screen reader accessibility
- Translate the website into additional languages so that the language feature can switch languages properly without losing the message
Hand-off:
- Create a detailed outline explaining design decisions and interactions
- Ensure all design files and assets are organized and labeled correctly
Additional Testing:
- Conduct further usability testing to get a better understanding of the feeling the new website created
- Track use of the website and use of the online ordering process compared to in-person sales to ensure it’s meeting users needs and desires
After Launch:
Track the following KPIs after launch:
- Number of online orders: How many people are making online orders versus at the counter?
- Return on Investment: How much revenue is the new service bringing in compared to the costs of the added work on employees?
- Customer Satisfaction: How are the users responding to the new web service?
Lessons Learned
Simple Processes Aren’t Always Simple
While I thought a movie refreshment ordering process would be simple and quick to
create,
as
they already exist for many theaters, it turned out to be less black and white. This
project
was a great reminder that every project deserves just as much love and attention as
the
next.
Just because a process already exists in the world, each unique company needs work
that
is
custom tailored to their needs and services. And that tends to lead to a new set of
challenges, even for something that may seem familiar.
As Easy As Clicking a Button
While switching from dark and light mode might be a simple click for users, it
entails
much
more for the designer. This was the first project in which I included the option to
switch
between dark and light mode and I learned that it takes careful consideration to
transition
your design over to a dark mode.
One of the biggest considerations was accessibility. Once I transitioned to darker
backgrounds, how would I ensure the text, icons, and color scheme still made the
site
easy
to read and use while keeping consistent feeling and branding?
A Fresh Pair of Eyes
It can be easy to miss little (or big) details when you’re sucked into a new design
and
deciding if that text box should be one or two more pixels to the left. On this
project,
I
realized I did not include pricing anywhere in the design until making modifications
to
the
high-fidelity version.
While this could have been a large mistake, it was quickly taken care of by simply
having a
fresh pair of eyes look over the design and point out what was missing. Thank you
usability
studies!
