Stellar Cinema App
The Stellar Cinema app streamlines the process of buying movie tickets and snacks by enabling customers to make their purchases online. This feature not only saves customers time but also ensures a smoother arrival at the movie theater. The Stellar Cinema app targets users of various ages who go to movies and like to save time in queues.
Date:
January 2023 to March 2023
Role:
UX designer responsible for all aspects of the design process for Stellar Cinema app.
Problem:
Busy customers lack the time to visit movie theater to purchase tickets in advance and gets stressed when they need to stand in queues upon arrival.
Goal:
Design an app for Stellar Cinema that allows customers to purchase movie tickets and snacks online so they can be ready to see a movie as soon as they arrive to the movie theater.
User Research
I conducted interviews and created empathy maps to better understand the needs and frustrations of the users that I am designing for.
A primary user group identified through research lives in metropolitan or suburban areas with various age, gender and occupation.
This user group confirmed initial assumptions about struggles with movie ticket purchase, but research also revealed other pain points users might have, like face-to-face communication with movie theater workers and challenges when searching for movies to watch.
Persona: Hilda
Problem statement:
Hilda is a student from Denmark who needs to find an easy way to order movie tickets by herself because her dyslexia and lack of English knowledge make it hard to do it without asking others for help.
Hilda's journey map
Storyboards - Big Picture and Close Up
I created storyboards to visualize the user experience and map out the user flow. Storyboards also made me empathize with the user and better understand their needs.
Pain Points
Information - It is more efficient to gather all information in one place instead of checking multiple websites for information
Accessibility - Platforms for purchasing a movie ticket should be equipped with assistive technologies
Location - Finding a movie theaters location or the right cinema hall might lead to frustration
Paper Wireframes
Creating multiple versions of the home screen using hand drawing helped to quickly sketch out many different ideas of how the screen should look. That made it easy to create one refined design that is put together from the best ideas from all wireframes.
Stars were used to mark which elements would be used to create digital wireframes.
Digital Wireframes
Moving further with the app design the digital wireframes were created with focus on user research and feedback
Usability Study - Round 1
Parameters
Study type:
Moderated usability study
Location:
Šiauliai, Lithuania
Participants:
5 participants
Length:
30 minutes
Findings
1: Users want to select a date before searching for movies
2: Users want the ordering process to be fast and simple
3: The ordering process has too many unnecessary steps
Refined Designs
Mockups
Now that the wireframes were refined based on the finding from the first round of usability study, I moved on and created mockups for the app.
Usability Study - Round 2
Parameters
Study type:
Unmoderated usability study
Location:
Remote
Participants:
6 participants
Length:
10 minutes
Findings
1: The total price for snacks is either missing or not visible enough
2: Users want the ordering process to be fast and simple
3: Map images are confusing and appear interactive for users.
New study findings revealed that the total price for added items was missing on the snacks screen. I added the number of selected items and the total price in the column below so users can easily find that information.
Based on the click path from the new study, I found out that users attempt to use the grayed-out discount. I made some adjustments and added a text to not only rely on color as an indication that the discount is unavailable. I also added information about the applied discount code and updated price above the purchase button.
Refined Designs
Accessibility considerations
To make my designs more accessible, I have used colors with as high contrast as possible from the background so every word or icon is easy to see. I used the Webaim contrast checker to adjust the colors in my designs to have the accepted contrast ratio.
To enhance accessibility in my designs, I used text along with colors and icons to ensure that the visual components are not the only way to show information. Specifically, I used text below icons in the bottom navigation bar to make it possible for text-to-speech readers to explain the icons.
I designed a quick settings menu that can be accessed straight from the home page. That way users can change language and turn on assistive technologies before exploring the app further.
Takeaways
Impact:
Stellar Cinema app meets the users needs and provides an easy user flow to successfully complete their user journey. One quote from peer feedback was: “Great app! The color scheme works really well. It has an easy user flow”
What I learned:
While designing the Stellar Cinema app, I learned that my first designs not necessarily will end up in the final product. I also learned that usability studies are very helpful and provide a lot of information about how users interact with my designs. The feedback from the studies influenced all of my designs in a positive manner.
Next steps
A new usability study would be helpful to find out if all user pain points from the past study were addressed, and if there are any not observed issues existing.
Conduct more user research to find out if there are any new areas of need.