Movie Trailer Apps

Project 1

Are you a movie lover who wants to watch the latest trailers on your phone? Do you want to discover new movies, genres, and directors? Do you want to share your opinions and ratings with other movie fans? If you answered yes to any of these questions, then you need Movie Trailers, the ultimate app for movie trailers.

LUMASCOPE is the best way to watch and explore movie trailers on your mobile device. You can browse through hundreds of trailers from different categories, genres, and countries. You can also search by title, actor, director, or keyword. You can watch trailers in HD quality, read movie summaries and reviews, and add movies to your watchlist. You can also rate and comment on trailers, and see what others think of them.

Our movie trailer app will allow users to preview movies and ability to watch current and upcoming movie trailers which will help the users to make decision on which movie to watch in theatre. We will measure effectiveness by analysing the ticket sales and view counts.

Role : UX designer creating a trailer watching app from conception to delivery

Responsibilities : User research, interviews, competitive audits, paper and digital wireframes, low and high-fidelity wireframing, usability studies, accessibility, design iteration.

Tool : Figma

Timeframe : September 2022 - November 2022

Target Audience :Movie lovers who want to watch the latest trailers on their phones. They are interested in discovering new movies, genres, and directors, and ratings with other movie fans. They are also looking for a convenient and engaging way to access and explore movie trailers on their devices.

Key Challenges

Users have hard time when it comes to deciding on which movie to watch and finding movie trailers for the movie playing in the local theatre requires multiple apps and uncurated discovery. Morever, users also have to buy tickets by walk in at the movie theatre as there is no reservation site for the local theatre. Furthermore, They have limited storage space or data on their phones to download or stream trailers and at the same time they have a hard time keeping track of the movies they want to watch or have watched. Our main focus into developing the app was to design an elegant app focused on viewing, saving, and referencing trailers that would then lead seamlessly into movie ticket purchases.

User Research

User Survey

I selected five participants who loves watching movies in theatres and avid moviegoers who enjoy watching different genres and styles of films. I kept the age ranges and gender identities wide , with people that ranges between 18-59 years old and mixed genders including two non binary participants

Buying In-Person : Have to wait long queues to purchase tickets and uncertainty on tickets availability arises.
Limited Information : Small local cinema do not publish movie schedule online, which sometimes make it hard for the people to plan a movie night( including accessibility needs such as wheelchair or availability of seats close to the screen. This indicated that we should bring all the information in one app.
Memory issues: We're all receiving a lot of information all the time. It was easy to see something and then immediately forget what it was. This indicated the need for some kind of saving or bookmarking feature to share later.

Competative Audit

Running a competitive audit was both easy and difficult. On one hand, there are a lot of trailer watching apps around; on the other hand, most of them are not particularly focused on trailers. I found a few common patterns to be compared with the local cinema which was TGV Cinemas, Cinemas Malaysia and Youtube( indirect competitor)

Low engagement or interaction with other users or communities - Both of the competitors doesn’t have such features in their apps which makes us to use it as our opportunity to develop the apps with community engagement
Outdated UI overall that was difficult to understand - I was surprised at just how outdated the apps were but TGV Cinemas had the most modern and up to date UI , which might explain its popularity overall.

Persona Creation

I then created a user journey map to further outline what my persona was like. I decided to focus on Danielle ,partly because my research had leaned more towards her age group than my other persona’s. In making Daniella's persona, I decided to outline her user journey and identified a few relevant pain points.

Multiple Apps : Finding trailers was uneasy as it requires multiple apps and verifying whether the movie will be shown at the nearest theatre. This is more steps than should be necessary for the app I intended to create.
General Information : Needs preview information such as reviews and rating before deciding the movies to watch. This features are important to be included in the app that i intend to create

Design and Refinement

Paper Wireframes

After the brainstorming based on the data, i begun my sketching process into paper wireframes before moving on digitally ,taking the time to draft iteratation of each screen of the apps is to ensure that all the elements that were made into digital wireframe would be well suited to address the user pain points Furthermore, i’ve always kept in mind about how to make it easy and useful at the same time to fulfil user’s needs. Moreover , it also helps me to visualize and come up with better solution which will solve the user problems.

Digital Wireframes

As the initial design phase continued, i made sure the design to based on feedback and findings from the user research. I refined the initial paper wireframe and proceeded to create the digital wireframes. The transition is to ensure how the design may solve user pain points and improve user experience .i included few elements such as voice control and search buttons to make it easier for the user to have better user experience. Moreover, i added a loyalty program reward system to the design to attract more users to use the app. Lastly, i made sure i make those designs to be neat and clean and I also included several different visual principles and UX designs.

Low Fidelity Prototype

Relatively, i moved into early low - fidelity prototype stages. The low-fidelity prototype created a user flow focusing on search filters, saving for future viewing and then ticket purchasing. This leads to several time changes between the designs.

View Lo-Fi Prototype

Usability Studies

I conducted usability studies with few individuals. These were unmoderated remote usability studies to make it more convenient for everyone . They attempted to watch the trailers then book a showtime through the app. The results of my usability study weren't worthy for the first timer design, if I'm being honest but everyone seemed to handle using the app fairly well.

Preferred payment method - Most of the participants wants to be able to choose their own preferred payment method for their own convenience
Search filters - User don’t notice there is a way to filter movies and this indicated the hi-fi design should make it out stand.
Rate movie trailers - User came across movie review section but wants a way to rate the movie trailers after watching it.

Solving the preferred payment method

I figured out that i should change the payment page as it seems like the source of most problem, i decided that i should came up with better design for the payment options so i changed it to be more noticeable with modern design instead of sticking with the old design.

High Fidelity Prototype

Here's the final high-fidelity version of the app prototype that i made after making changes with the designs. I made the background in dark mode as to make it more stylish. The most important part of the high-fidelity prototype here for me was to emphasis on images and colours. Besides that, i wanted to make the app to be fun and friendly so i focused on making it in two tone which was black and turquois and i added few colours too as i thought it would make the app to be more brighter. Morever, i also felt that adding the images was a bit overwhelming but still i pull it through.

Result & Reflection

This app moves everything into a single location which allows users to browse trailers, save trailer and book their movie ticket instantly.

While working on this project, i learned how the usability studies could affect the designs and how it could bring changes to the entire design. Besides that, trying to think of a user - centric design, especially with the mobile requires thought towards what is at the bottom of the screen and what isn’t.

There were also major concern where the colours could be too bold and bright for some users, i am definitely working it to be more user friendly colour palette while keeping consistent with brand.

Next step in this project is i’ll make sure to implement all the features or redesign it based on the usability test and run more usability test in near future. Lastly, conduct more usability studies next time to determine whether any issues related to the app needs any improvement or refinement.

Page updated

Google Sites

Report abuse