Keylight hero image

Case study

Keylight

A case study on a movie ticketing app. Users can easily and quickly purchase tickets, pre-order food & drinks, learn about the movies, and locate theaters.

MOTIVATION
DURATION
ROLE
COLLABORATORS

Google ux bootcamp
3 months
Ux/ui designer, ux researcher
none

The problem

While movie ticketing apps claim to be time-saving and easy to use, that isn’t always the case. There are often too many steps and seat-selection features are too small to read or select.

RESEARCH STEPS TAKEN: INTERVIEWs, COMPETITIVE Audit, PERSONAs, Affinity Map

Brands analyzed for competitive audit

Personas

Affinity map

Starting with low-fidelity design

With the data gathered in the research phase, I moved the case study forward by creating a flow chart and sketches.

Sketches

flowchart

WIREFRAMING

My goals when creating the digital wireframes were to: create a simple layout, use high contrast to help accentuate important features, account to large touch points, and achieve successful readability/legibility.

Wireframes: Main user flow

testing

Before moving forward with the high-fidelity design, I first sought to test the user flow with the wireframes by creating a low-fidelity prototype.

TEST METHOD: Usability STUDY

1- Mix of men and women

2- Ages between 25-70

3- Visit cinema at least twice a year

4- Volunteer testers

About the testers

Study findings

1. Movies vs. theaters

CHANGE MADE: I UPDATED THE HOME SCREEN WITH A ‘DEFAULT MOVIE THEATER’ SECTION. USERS WILL BE ABLE TO KNOW, CHANGE, and save THEIR THEATER LOCATIONs.

2. Locating items

CHANGE MADE: I CREATED ILLUSTRATIONS FOR MENU ITEMS IN THE FOOD & DRINKS PAGE TO account for users with all types of capabilities, especially the visually impaired or neurodivergent.

3. Pick-up time

CHANGE MADE: I ADDED A “pick-up time” section in the summary and confirmation screen so users can quickly confirm and / or edit their pick-up time of preference.

BRANDING

While diving into the history of cinemas, I came to love and appreciate the nostalgic visuals of neon lights. I created the logo, selected high-contrast colors, a retro-inspired typeface, and created simple 3D illustrations.

Branding

Mockups

With all of the research assets, sketches, digital wireframes, and branding, I moved to the finish line by creating mockups and a high-fidelity prototype on Figma.

High fidelity prototype

Check out the high-fidelity prototype on Figma:

view prototype.

FINAL THOUGHTS

This case study impacted me and jump-started my love for user-centered design. I learned how to conduct user research following ‘design thinking’ methods.

Looking back I’m excited to see areas that could use improvement. The first to be addressed would be the current lack of vertical white space between all elements. Next, I’d re-think the use of the bright orange color and dull it down a bit, use a dark text color to account for readability following WCAG color contrast standards.

Overall, I thoroughly enjoyed working on this case study.

Let's build something together, get in touch!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Copyright © Michelle McCormick 2024. All rights reserved.