UX/ UI Case Study

Gold Cinema Is a Movie Theater and On Demand Movies Website

Project Overview

The Product:

Gold Cinema is a movie theatre website that offers their users movie trailers, screen times, and movie rentals.

Project duration:

Aug 2023

The Problem:

Many movie theater websites have cluttered layouts that make it difficult to navigate the site. They contain large images that can slow loading times and include glitches during the payment process.

The Goal:

Before launching the website we want to understand the user’s experience navigating the flow of browsing movies, watching trailers and purchasing screen time 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 and user journey maps to understand the user’s needs and frustrations with my design product. The primary user groups identified through research were young filmgoers and students who frequently watch movies. I discovered that many users want more features that include browsing movie trailers, movie reviews, and online movie rentals in addition to selecting a movie for their next theatre experience.

Persona: Steve

Problem statement:

John is a busy film student who needs an all-in-one movie website that offers a variety of movie services because he wants to keep up with the latest releases in the genres that he likes.

User journey map

I created a journey map for my user to understand possible pain points and improvement opportunities that might occur while the user is navigating through the website.

Starting the design

Sitemap

Based on my research findings, it became evident that users expressed a strong desire for enhanced features, an improved checkout process, and more comprehensive product descriptions as their primary pain points.

In response to these insights, I made a deliberate choice to maintain a streamlined navigation system. This approach was designed to empower users with the ability to swiftly locate the specific content they sought, thereby addressing their needs more effectively.

Paper wireframes

Creating iterative drafts of each screen was a crucial step in guaranteeing that the wireframes would effectively cater to user requirements. Emphasizing prominent visuals was a deliberate choice to assist users in promptly recognizing their preferred movie selections.

Additionally, the inclusion of a well-defined header and footer space was strategically integrated to enhance site navigation, ensuring a smoother user experience.

Paper Wireframes: Screen variations

Digital wireframes

Transitioning from traditional paper-based wireframes to digital ones enhanced my ability to comprehend how various design elements influenced the user experience.

Digital wireframes facilitate efficient iteration and collaboration, allowing for real-time adjustments and feedback helping to identify potential usability issues early in the design phase.

Digital wireframe screen size variation(s)

Low-fidelity prototype

The low-fidelity prototype connects the primary user flow of selecting a movie, watching the movie trailer, and purchasing a ticket for the usability study.

View GoldCinema website
Low-fidelity prototype

Usability study: parameters

Study Type:

Unmoderated usability study

Location:

United States, remote

Participants:

5 participants

Length:

5-10 minutes

Usability study: findings

I executed a usability study aimed at refining the user experience in the process of selecting a movie, viewing its trailer, and purchasing a ticket. The primary goal was to identify any elements that posed confusion or challenges to the user.

Finding 1

User want to be able to see their ordering summary throughout the checkout process

Finding 2

Users prefer a main header for navigation

Finding 3

User want more options when selecting their movie theatre

Refining the design

Mockups

I revamped the checkout process to ensure that users could access their order summary at any point during the checkout journey. This enhancement allowed users the flexibility to review their order details at their convenience and provided them with the option to cancel their transaction at any stage of the process.

Mockups

I revamped the header design to facilitate effortless navigation for users, enabling them to access their desired content with ease.

Mockups

I incorporated additional filter options, expanding the choices available to users when selecting a movie theater.

Mockups: Original screen size

Mockups: Screen size variations

High-fidelity prototype

The high-fidelity prototype showcases the implications of the redesign, highlighting how it enhanced the user flow for selecting a movie, viewing trailers, and purchasing movie tickets.

View GoldCinema website
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:

GoldCinema is a website that provides users services, including browsing trailers, ticket purchasing, and on-demand rentals. A quote from a user," I found the website to be very well designed and I could see myself using it."

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

Incorporate checkout process flow for remaining product and services

Design layout for food and drinks menu

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