UX/ UI Case Study

Movie Home is a movie trailer app

Project Overview

The Product:

Movie Home is a movie trailer app that offers users a wide range of services such as viewing movie trailers, purchasing tickets, and learning more about the movies they love. Movie Home targets traditional moviegoers and stay-at-home families by providing users with local theaters’ screen times and available video-streaming services.

Project duration:

Feb/ 2023 to Jul/ 2023

The Problem:

Busy workers and students lack the time to stay updated with newly released films.

The Goal:

Design an app that allows users to view movie trailers, learn about new movies, and purchase tickets.

My Role:

Lead UX/ UI Designer

Responsibilities:

User Research
Wire framing
Prototyping

Understanding the user

User research: summary

I conducted interviews and created personas to understand the user’s needs and frustrations with the product I am designing. A primary user group identified through research was busy single parents who don’t have time to plan for a movie trip.

This user group confirmed the assumptions about Regal Cinema customers, but the research also revealed that time was not the only limiting factor for picking a movie or going to the movie theater. Other user problems included competition from online movie streaming services such as Netflix or HBO Max, difficulting planning their trip with their children to the movie theater, and difficulty researching an age-appropriate movie for their children.

Persona: Steve

Problem statement:

Steve is a busy single parent who needs a way to discover new movies so he can take his family to the movie theater.

User journey map

Steve wants to find a good movie to watch with his family.

He may want to watch a trailer, search for local movie theaters and check for movie times prior to purchasing a ticket.

He may want to purchase snacks for his family to enjoy while watching the movie.

Starting the design

Paper wireframes

Drawing out the iterations of each screen ensured that the elements that made it to the digital wireframes would meet the needs of the user. I prioritized large imagery to help the user identify their movie selection and added a define header and footer space for easier navigation throughout the app.

Digital wireframes

Basing my design choices on user research, I thought it was important to keep the home screen with large imagery to help the user to select a movie.

Digital wireframes

Users wanted a one-page selection screen that would include the trailer, movie description, and additional information about the movie.

Low-fidelity prototype

The low-fidelity prototype connects the primary user flow of filtering movie selection and viewing the movie trailer that would be used in the usability study.

View Movie Home app
Low-fidelity app

Usability study: findings

I conducted two rounds of usability studies. Findings from the first round helped guide the design choices from wireframes to mockups. Findings from the second round helped to refine the high-fidelity prototype.

Round 1 findings

Users need a more universal home icon

Users need more visual for their movie selection

Round 2 findings

Users need more filter options

Users were unable to play the trailer

Refining the design

Mockups

Based on the first round of findings, I replaced the image placeholders with movie posters and added title placeholders.

Mockups

The second usability study revealed that users needed more filter options to select their movies, so I defined general filter and menu options.

Mockups

High-fidelity prototype

The final high-fidelity prototype presented a cleaner user flow for filtering movies to viewing the movie trailer.

View Movie Home app
High-fidelity prototype

Accessibility considerations

Used detailed imagery to help users quickly identify a movie selection

Used large icons to help users to navigate within the app

Used high contrast color palette so users can easily read content

Going forward

Takeaways

Impact:

The app helps users make more informed decisions on selecting a movie by providing detailed information about their selection. One quote from peer feedback: “ I think the app was well designed and I like the filter feature. I can see this app being very useful.”

What I learned:

I learned that from ideation to prototyping, many of my design choices would be heavily influenced by peer feedback in order to meet the needs of the user experience.

Next steps

Integrate a ticket-purchasing user flow so users can purchase screen times after watching the trailer.

Provide links to video streaming sites that have the full-length feature film available for users who wish to watch the film online.

Conduct another usability study to test the additional content and identify any users' pain points.

Let's connect!

Thank you for your time reviewing my work on the Movie Home trailer app. If you would like to get in touch, my contact information is provided below.
Email: contact@chhaymedia.com
Website: https://chhaymedia.com/

Copyright © 2023 Chhay Media