Problem

The cinema wants to offer customers a convenient way to buy tickets.

Goal

Design a mobile application for the purchase of movie tickets.

My role

UX Designer

Duration

2021

Product

The local cinema wants to offer a new way of purchasing tickets for movies, to its customer. In the future, customers will be able to read about aired movies in their local cinema and pre-purchase movie tickets on their smartphone.

User research

I conducted interviews and created empathy maps to better understand the user’s needs. Our primary user group are: busy, young to older adults who don’t want to spend a lot of time in line at the counter to purchase their movie-ticket. Also, they are familiar with smartphones and are used to purchase things directly on their smartphones.

Time

Working and other busy people don’t have time or don’t want to spend time at the counter to buy their movie-ticket.

Accessibility

Some existing platforms who sell tickets are often designed primarly for wider screens like desktops and are not optimized for smaller screens

Payment methods

Existing platforms often don’t give enough payment methods to choose from.

Movie details

Users often have to use more than one app to decide which movie they want to watch

Persona

Persona of: Ticketing-app for a movie-theater

Problem statement

Lisa is a frequent but busy movie theatre client, who needs a mobile app to buy movie tickets in advance, because she doesn’t want to stand in line at the counter.

User journey map

Paper wireframes

Taking the time necessary to draft different iterations of each screen of the app on a sketching app ensured tht the elements that made it to digital wireframes would be well-suited to address the user’s pain points. I tried to come up with a simple, elegant solution who gives the user just enough information to decide wether or not, he or she wants to go watch the movie or not.

I took inspiration from different VOD (video on demand) services that most user already know well in order to lower the learning curve and offer a easyto-use solution

Paper wireframes of: Ticketing-app for a movie-theater

Digital wireframes

Low-fidelity prototype

Usability study: findings

The conducted usability study showed that only small changes were needed before declaring the design „ready for development“.

Round one findings

Users want to book a seat and pay at the counter

Users want to set a timer or get reminded of an upcoming movie, they bought a ticket for.

Users are confused by the movie-rating system.

Round Two findings

Users would prefer a bottom navigation-bar.

Users would like to see more than two payment methods.

Refining the design

Transition from a sidebar-navigation to a bottom-bar.

Added a search button on the top right corner of the screen.

Added a order button in the
categories section.

Mockups

High fidelity Prototype

Accessibility Considerations

Contrasts

Color contrasts of text-elements were checked using the Stark plugin.

Icons

Icons were added to most buttons to help describing their function.

What I learned

Working on this case study showed me what it really means to work as a UX Designer, that it is not just sketching wireframes and bringing them to life with Figma or another design application the way it feels right in the moment.

It also gave me a deeper Insight on accessibility and how to check designs on contrasts for example, where tools like the “Stark” plugin for Figma, are especially helpful.

Other cases

Account creation flow for a social networking site for musicians →

App for wild-camping in Switzerland →