app bg

Project: Movie Trailer App for a movie theater

Role: UX designer

Duration: July 2022 to October 2022 (3 months)

Project vision

Design an app for X Cinemas that allow users to watch trailers, book movie tickets, and set up a notification system for tracking upcoming movies.

Challenges

2022 10 28 14 removebg preview

Starting line

In this project, I took an approach which proved to be quite effective in my design effort. I found qualitative research methods to be most useful, consisting of research, competitive analysis, stakeholder interviews, and most important our person hypothesis construction. I started by asking myself some initial questions.

“what is the product and who is it for?”

“what do our primary user need most?”

“which users are the most important to the business?”

“what challenges could I face moving forward?”

“who do we see as our biggest competitors?”

“what literature should I review to familiarize myself?”

I conducted a secondary researches and created a poll on movie lovers on a Facebook group and I have also conducted selected interviews to understand the users.

The primary user groups were working adults who have time to enjoy night outs with their friends / partners.

This user group confirmed initial assumption about movie theater customers, but research also revealed that time was not the only factor limiting users from going to cinemas.

Other user problems included obligations, interests, or challenges that make it difficult to select a movie or knowing which theater air a specific movie.

Meet the users

hisham
2022 08 23

Competitive Analysis

I looked at several potential competing companies, and found that they can infringe on the business revenue and popularity. X Cinemas movie trailer app has the opportunity to capitalize on this by bringing ideas from each company to create one stop app without oversaturating the user’s selection.

movie trailer app
cinema guide app
download

Starting the Journey

paper wireframe

After sketching some P&P wireframes and thinking through the preliminary flow, I reviewed it to process the area of importance then started organizing the flow.

I constructed two user flows of what a basic start to finish journey would look like while booking a ticket, or setting a notification for a soon to be released movie. This helps in my understanding ways users can interact with the app as well as allowing me to see navigation through user goals. Then I started organizing the flow in a lo-fi prototype.

main user flow
secondary user flow
lo-fi prototype main flow

Iteration

After creating the lo-fi prototype flow, I did an unmoderated usability study. I asked 5 participants to run through different scenarios in my prototype in hopes of garnering enough feedback to use for the next set of designs.

1 removebg preview

Users need a way to notice the soon to be released movies on the home screen in an easier way

2 removebg preview

Users need better understanding of ways to watch selection in the booking process

3 removebg preview

Users need a way to both book a movie ticket and order food & drinks in an easier way

1 removebg preview

Challenge 1: Highlighting

To make users notice the coming soon section in the home screen of the app, I changed both the font size and the weight of the sub header text.

Highligjt 1
2 removebg preview

Challenge 2: Explaining

Some users had doubts and confusion about the way to watch selection in the booking process of the movie. So I added a little information circle that describes what it means as well as provided and entire page in the menu about way to watch.

Highligjt 1 1
3 removebg preview

Challenge 3: Merging

Some users found that separating the food and drinks tab from the booking process to be annoying and confusing. So I merged both the ticket booking and snacks ordering in one direct process.

Highligjt 2

Style Guide

Combining incredibly vivid colors to create X cinemas signature gradient came from wanting to express to users just how entertaining and inviting our cinemas can be. The splash screen feels warm and welcoming enough to draw the users further in, and also the only place where it is applicable to use this much color, considering our colorful movie selections within the app.

sticker sheet
hi-fi prototype

Takeaway

While designing X Cinemas app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedbacks influenced each iteration of the app’s design.