CineGo

(August - November 2022)

Overview

CineGo is a mobile ticketing app for a movie theater that aimed to relieve time constraints and ambiguity in the ticket-purchasing process. This was my first foray into UX design and part of my Google Grow course, so I was elated to get to stretch my creative chops and create something that would be wildly beneficial to a user while maintaing a sleek, approachable look.

Role

UX Designer

Responsibilities

Conduct user research and usability studies, wireframing and prototyping designs, and iterating upon the designs while accounting for accessibility needs.

The problem:

Mobile ticketing apps for movie theaters are often outdated in design and important data is hard to find when navigating through advertisements.

The goal:

Design a mobile app that is easy to use and saves precious time without burying the user in an overly ad-saturated platform.

Summary of user research:

Utilizing user research through personas and empathy maps, I gained an understanding of my users and their needs. The primary user group that I found myself designing for was frequent movie goers between the ages of 20 and 30.

This user group gave me some key insights that really brought the needs of this demographic to life. Apart from pre-existing apps looking outdated and having an overabundance of ads, users found the time-constraints and lack of available resources to be challenges as well.

User pain points:

1. Time

Typically college students or young professionals, the user group mentioned has little time to make thorough arrangements on the fly.

2. Ads

By removing advertisements (if possible altogether) the user can clearly navigate a mobile app and save time, all while circumventing typical privacy concerns and general grievance involved with advertising.

3. Outdated

The aesthetic approach by known movie ticketing applications is bleak. An updated, modern design will make users want to return.

Persona:

Etienne

Problem statement:

Etienne is a university student who needs to save time when purchasing movie tickets because he has a busy schedule.

User journey map:

Documenting Etienne’s user journey revealed some key accessibility needs that weren’t addressed, or implemented in a way that is clear to the user.

Paper wireframes:

During the process of creating paper wireframes I noticed patterns of common layouts and why users prefer some of the other.

Digital wireframes:

Although a rough and bland model of the mobile ticketing app, the first digital wireframes show that basic layout of a film page with an IA that is easy to understand and navigate.

Taking pointers from streaming services, I decided to make the home screen simple with options laid out in a fair and familiar way.

   

The low fidelity prototype:

Using the digital wireframes for each page, a low-fidelity prototype was pulled together. The primary concern was the flow to purchase a movie ticket, which would be used later in usability studies.

Round 1 findings:

1.

Users wanted to buy movie tickets quickly.

2.

Current movie-ticketing apps appear outdated.

3.

Accessibility features are often hard to find or non-existent.

Round 2 findings:

1.

The planned “yellow” color scheme is too abrasive.

2.

Accessibility features are still difficult to directly find.

Affinity diagram:

Created using feedback from usability studies.

I wanted to create something that looked modern but still retained the simplicity that would keep users coming back. In the long-term, users did not enjoy the yellow background.


I simplified the color scheme and opted to keep it fun while still accessible. After testing with multiple users, the navigation at the bottom right was a clear winner over the common dashboard along the bottom.

The two following images show the progress made after following through with the advice from usability studies.

The hi-fidelity prototype:

The last prototypes show a clear understanding of user needs: a seamless flow, a fun aesthetic that keeps the user coming back, and easy access to the features that are needed.

1.

The colorway keeps contrast between text and elements in the forefront, making the app easy to read and navigate.

2.

The app would have the ability to swipe back in addition to using the standard “back button,” assisting those who may have certain motor function needs.

3.

All posters for films have movie text visible and in large, readable fonts.

Impact:

The app has transformed the journey of buying a movie ticket from a complicated expedition to a leisurely tap!

One quote from user feedback: “I will say, those were the simplest steps I think any app could possibly have for ordering tickets, without you know, everything being on the same screen.”

What I learned:

While designing this app, I learned that accessibility features go beyond helping just a single demographic of people… everyone can benefit from these design changes.

What now?:

1.

I’d like to incorporate one more series of interviews and research, I have not yet gained the amount of feedback I’d like to on this high-fidelity prototype.

2.

Some of the settings that I’ve wanted to add are still missing, Figma does not have the ability for such additions.