STUBGRABBER

Stubgrabber

Bringing the Joy of the Big Screen for a Smaller Cost

Role

– UX/UI Designer
– UX Researcher

Timeline

– 2 Weeks

Tools

– Figma
– Google Forms
– Zoom

The Problem

Many ticketing services/apps often find themselves to be tricky to use, especially with navigation and hidden fees. Some users also find it difficult to find lower prices for tickets to movie theatres located near them and often have to resort to Google or opening many different tabs to find what they are looking for.

Our Key Users: avid movie-goers and users who want to find cheap movie tickets.

In order to understand the main pain points of these users, I sent out a Google Survey sheet asking the following questions:

– How often do you buy movie tickets online?
– How would you rate the difficulty of finding cheap movie tickets online on a scale of 1 – 5 (1 = easiest, 5 = hardest)?
– What factors do you consider when buying movie tickets online?
– What are your main concerns when buying movie tickets online?

5 users sent back their responses and based on this information, I learned that users typically have an average time trying to find cheap movie tickets for theatres near them and getting the seats that they wanted.

Quotes from users:

– “Whenever I find a ticket, the seats are automatically chosen for me instead of letting me choose.”
– “I want to find a theatre near me with good seats, but I just get sent to a big theatre like AMC which is far from my place.”
– “Some ticketing places add a lot of unnecessary fees that I don’t enjoy paying.”

Introducing Stubgrabber, an online service that provides users movie movie theatre tickets based on price and location. Stubgrabber works like a normal movie theatre/movie ticketing website where users can find tickets in theatres near them. Users will be shown theatres that are near them and allows them to pick available seats to their own liking.

The Sitemap

To start off the design process, I began planning out the layout for site navigation via a sitemap.

The sitemap follows a basic structure similar to that of other ticketing websites.

Low Fidelity Prototypes

Based on the user research, I developed the following wireframes above on Figma. The wireframes show the user journey walking users through the process of booking a movie ticket. To ensure the entire user journey was shown, I added in a payment system as well for the complete experience.

On the 2nd week, I devised a style guide for the high fidelity prototype with dark colors that give off a movie-like environment.

The high fidelity prototypes I designed used this style guide and followed the original wireframes I made on the 1st week. The high fidelity prototype focuses on the ticket booking process from finding a theatre to the final purchase.

Step 1: Selecting a Movie

Users can select a movie from the home screen as well as the “Movies” tab.

Step 2: Pressing “Get Tickets” on the movie page

When users select a movie, they can read the synopsis of the movie, watch trailers, and see images of the movie. If they feel like the movie is worth a watch, they can press the “Get Tickets” button to start the booking process.

Step 3: Select a Theatre

Assuming that users have logged in before and added information such as city and zip code, users will then select a theatre that is within that range.

Step 4: Select a Showtime

Step 5: Selecting Seats

Step 6: Entering Payment Information

Step 7: Order Confirmation

To see the high fidelity prototype, please click here.

This prototype was built with 2 main functions in mind: finding a theatre closest to you and being able to select your own seat. While pricing was also one of the main pain points users talked about, that is something that has to be focused on when the final website is built and released to the public.

To see if the design helped solve some of these pain points, I conducted a user tests with 5 key-users. The key tasks were as follows:

– Find a movie to watch (multiple routes).
– Book tickets for the movie.

After the user tests were conducted, 5/5 participants were able to complete the tasks above with no difficulty.

Quotes from participants:

– “It seemed fairly simply to book tickets to a movie and I liked that I had a lot of options for theatres and seats.”
– “I like the idea of being able to pick my own seat without having to go to the theatre.”
– “The design kind of feels like I’m on the path to going inside a movie. It makes me feel excited for the movie without even being there.”
– “I do think there are some things that can be changed but overall a very simple process that I am very familiar with.”
– “The idea that I can also access local theatres with possibly lower ticket prices on the location section definitely entices me to go see more movies.”

Although this was a quick project on UX Research and Design for the Google UX Course, I learned that being able to create an MVP for a product does not take a lot of time, resources, and commitment. The project length may have been 2 weeks but it allowed me to understand priorities and build a prototype that will solve the main user pain points while leaving some room for thought on what will come next.

Even though the project has concluded, that doesn’t mean that my work is truly over. The next steps I would follow are:

Adding user memberships for discounts and personalization.
Adding filters for locations such as distance and price.
Personalized recommendations based on user purchase history and preferences.