MOVIE THEATER APP
As part of one of the Google UX Design Professional Certificate courses, I was tasked with creating an app to meet the specific need of a hypothetical business.
Kasanova Theater is a local movie theater located in the
tri-state area. Kasanova Theater wants a mobile app that is
screen reader-friendly and climate conscious.
The theater used to require paper tickets to be printed before seeing a film and wanted to switch over to a digital ticket system. The
theater’s goal is to retain the current clients and get new
moviegoers to attend monthly matinees.
My role in this was the sole designer and researcher. This project took place over two months as I conducted interviews and a usability test, gathered data, and created the product using Figma.
The original design was formatted for mobile screens specific to iOS.
I conducted interviews and created an affinity map to understand the users I’m designing for and their needs. A primary user group identified through research was frequent moviegoers who preferred to order movie tickets ahead of scheduled times.
This user group confirmed initial assumptions about Kasanova Theater’s customers, but research also revealed that moviegoers prefer to have fast checkout with saved user information.
Other user problems included social interaction, interests, or challenges that make it difficult to use desktop websites when making last minute entertainment plans.
Users want to be able to use their phones to order tickets and have them digitally accessible.
Current website was not screen reader/assistive technology friendly and therefore inaccessible to users with limited vision.
Users wanted a quick checkout process with their data saved for future and recurring orders.
Comparative & Competitive Analysis
I conducted a competitive audit on four apps/websites that are direct and indirect competitors to find out what works and what doesn't in ordering tickets online and for mobile.
Conducting a competitive audit suggests ideas to solve early problems in my designs and gives an idea of products already in the market and their designs.
The goal for the competitive audit was to go through the ticket purchasing process on mobile (if applicable). The results are below:
Define & Ideate
With the data and knowledge gathered from initial research, I created some user personas and journey maps to start the design process.
Vanessa is a 30-something pediatrician and trauma doctor with crazy hour shifts and some time off in between. She has a visual impairment that limits her reading ability on smaller screens so she uses a screen reader on her phone. She has no issue using the desktops at home and work since the screens are much larger and provide visual aids (iconography).
Website/app not visual aid tool-friendly
Can only use desktop to order tickets since mobile view is too small
Not having a lot of time off makes her time extremely valuable
Order tickets on app with screen reader and visual aids
Efficiently order tickets without app crashing or needing to start over
Able to maximize time off and enjoy latest big-hit movie
She’s single and enjoys hanging out with friends. But, to connect with her patients, she goes to see every new superhero movie that hits theaters. At first, she went to see what the hype was all about but ended up really enjoying the special effects and cool superpowers. She now goes to the theater every 3 months or so, but never on opening weekend since she finds it almost impossible to order tickets since the site isn’t screen reader-friendly. So she settles for some time during the week when she has time off. It would be nice to experience an opening weekend screening since everyone else in the theater is there for the same reason you are.
Oliver is a 28 year old accountant living in Chicago and enjoying all there is about his late twenties. He goes on lots of dates and hangs out with his buddies. His go-to date spot is the movie theater since it’s the perfect place to try the yawn-stretch-shoulder trick. And he loves going to see the latest releases with his buddies, usually in a group of no less than 7 people.
Printing movie tickets is a waste of paper and not eco-friendly
Site on mobile lags and sometimes crashes
Need to restart purchase order
Info needs to be input over and over, tedious
Order tickets online and scan ticket at theater
Avoid talking to people to focus on date
Enjoy movie nights with group of friends (go-to ticket buyer)
Would like info to be saved to make checkouts faster
Since he orders tickets frequently, he knows how to navigate the site in his sleep. Though he thinks it’s wasteful, the theater requires a printed ticket. He would prefer a way to save and present his ticket digitally to cut down his carbon footprint. And, if possible, cut out the need for staff interaction completely by checking-in to the movie with a scanner kiosk. He likes to focus on the people he’s with and not get distracted by others. Lastly, since he’s a frequent user, he’d like to be able to save his information for future purchases to make the movie-going experience even better.
User Journey Maps
Sketching & Wireframing
These are first draft sketches of the initial home screen for the app. Various elements were used to create the first iteration of
the digital wireframe including the bottom menu, movie posters with times, and the slider at the top of the screen.
Testing & Iterating
I conducted a usability study on the low fidelity wireframes that lead to design insights for the mockup and high fidelity prototype. Another usability study would be beneficial to refine the designs.
Usability Study Findings
Users made note of the simplicity of the app and would like to keep it that way
Users found it a bit difficult choosing their seats and would like the seat picker screen to have more obvious instructions
Users found that the home and back buttons aren't as obvious
The final high-fidelity prototype presented cleaner user flows for ordering movie tickets and checkout. It also meets user needs for storing their data and tickets with a simple bottom navigation bar.
Provided access to users who are vision impaired by making the app screen reader-friendly.
Color contrast passed by WCAG standards.
Used icons to help make
The app makes frequent moviegoers of Kasanova Theater feel like their experience is customized just for them.
One quote from peer feedback:
“The app made it so easy to order multiple tickets and the process was so fast, I didn’t have to think about rushing to the theater!”
Conduct another round of usability studies on the high fidelity prototype to refine the design for an even smoother checkout process.
Create a mobile website option for the theater for users who don’t want to download an app.
While designing the app, I realized that creating an app is very different as opposed to creating an experience for a desktop/mobile website. An app has a more specific purpose that makes the user experience more streamlined.
Usability studies & peer feedback were immense help on the design iterations.