top of page
Theater App.png

MOVIE THEATER APP

Background

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.

Overview

The Challenge

My Role

Research

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.

Affinity Mapping

Affinity Mapping.png

Pain Points

1

Users want to be able to use their phones to order tickets and have them digitally accessible.

2

Current website was not screen reader/assistive technology friendly and therefore inaccessible to users with limited vision.

3

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:

Competitive Audit 1.png
Competitive Audit 2.png
Competitive Audit 3.png
Competitive Audit 4.png
Research

Define & Ideate

With the data and knowledge gathered from initial research, I created some user personas and journey maps to start the design process.

Peronsas

User Journey Maps

Vanessa User Journey Map.png
Oliver User Journey Map.png
Define
Vanessa T.

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).

Frustrations:

  • 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

Goals:

  • 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 S.

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.

Frustrations:

  • 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

Goals:

  • 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.

Sketching & Wireframing

Storyboard Close Up.png
Storyboard Big Picture.png
IMG_5229.heic

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.

Low-Fi 1
Sketch

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

1

Users made note of the simplicity of the app and would like to keep it that way

2

Users found it a bit difficult choosing their seats and would like the seat picker screen to have more obvious instructions

3

Users found that the home and back buttons aren't as obvious

Test

End Result

Low-Fidelity

Low-Fi 2.png

High-Fidelity

Screen Shot 2022-09-15 at 12.08.25 PM.png

Style Sheet

Sticker Sheet.png

Final Prototype

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.

Accessibility Considerations

1

Provided access to users who are vision impaired by making the app screen reader-friendly.

2

Color contrast passed by WCAG standards.

3

Used icons to help make navigation easier.

Result

Going Forward

Impact

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!”

Next Steps

1

Conduct another round of usability studies on the high fidelity prototype to refine the design for an even smoother checkout process.

2

Create a mobile website option for the theater for users who don’t want to download an app.

Conuclusion

Finally

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.

bottom of page