Belcourt Theatre

Mobile App Design

My objective was to design a mobile ticketing app as an exercise to examine what one might look like. I designed for a real-life situation and chose a theater in Nashville that lacked a mobile application.

Project Duration: June-July 2021
Role: Lead UX Designer, UX Researcher, UX Writer and UI Designer.
Tools Used: Figma, Google Sheets, Google Forms, paper

The Problem

Users said they wanted to go to movies and purchase tickets without spending lots of time in line or having to worry about securing and saving a good seat.

The Solution

To create a mobile experience that would allow users to purchase and reserve movie theater seats online and save the ticket to their phones so they spent less time in lines.

The Impact

This design would allow a smaller theater like the Belcourt to compete with larger theaters and possibly increase ticket and concession sales because users would have more security if they were able to reserve a seat before entering the theater. They would also have more time to purchase concession items if they had already chosen their seat. I estimate the ticket sales would increase by 50 percent as the last-minute buyer and single-ticket buyers learned of the reservation system. Concession sales could increase by 30 percent.

The Research

After selecting a focus for the project, I started gathering information on users. I surveyed and interviewed people who use the Belcourt Theatre in Nashville and general movie fans to learn about their pain points when it comes to buying tickets and going to the movies.

I created empathy maps to better understand my users before generating personas, user stories and user journey maps.

I also developed problem statements, hypotheses statements and value propositions to focus brainstorming sessions. I then conducted a competitive audit of the ticketing processes of direct and indirect competitors.

The User

User data showed Belcourt Theatre movie goers were a bit different from the typical blockbuster audience. They were looking for a unique movie experience but still wanted to save time by purchasing tickets in advance and picking their seats, which allowed them to skip lines and spend more time at the snack bar. In fact 100 percent of users surveyed said they wanted a way to reserve their seat before coming to the theater which is why I included a select-your-seat map in my design.

Users liked the sense of security and peace of mind that a reserved seat would add to the experience.

Most users wanted to buy tickets a day in advance and some said they would buy tickets as far as one week in advance.

USER JOURNEY MAP --- Users wanted to find unique movies to watch and spend less time in line

Ideation

I conducted How Might Wes and Crazy Eights to brainstorm solutions. I came up with user flows for the app and also did some storyboarding to explain how my solution would solve user problems.

Storyboard

I used a sketching app and Adobe PhotoShop to turn my sketches into a storyboard.

Wireframes

Finally after developing information architecture for a mobile app, I began sketching early screens on graph paper about the size of a mobile phone screen. This process helps save time by allowing me to explore what layouts would work best before spending a lot of time in digital design programs. I knew that I would need to have enough space to display a week's worth of movies since users said they would purchase tickets a week in advance at most. I also needed to explore layouts for a seat selector map and see what would fit on mobile screens.

Low Fidelity

Low fidelity screens were created in Figma so that I could test the flow and usability of the app before adding high fidelity elements including color and images. This helps save times because you don't want to design elements that you might not even use after testing the process on users.

User Testing

I conducted two usability tests in which I asked users to complete tasks within the app as I observed them. Four out of five users were able to purchase a movie ticket and select a seat within seconds during the test of the Low fidelity app. Some users were confused by placeholder icons in early testing so I used icons from Google's material design resources in future designs. I also changed the book a movie button to select to make the selection process more apparent.

High Fidelity

I used the Belcourt Theatre's main colors and logo found on the non-profit's main website in mockups and the high fidelity prototype so that users would find the new platform familiar and comparable to the desktop experience.

During usability testing of the hi-fi design, there were really no issues detected. However, some users were confused during the ticket date selection. In some countries, the day of the year comes before the month so I changed the screen from what you see next.

Iterations

In the new screen, showtimes are first followed by the day of the week and I spelled out the month and date to avoid confusion.

Iterations

In subsequent designs, the interactive icons were moved to the bottom of the screen to accommodate the growing size of phone screens and wanting to keep things in thumb's reach.

See the full case study below