top of page

Dark Horse Cinemas

Problem

Solution

Buying a movie ticket just because the poster looks attractive has over the years led to bad user experience and disappointment and so has watching movie trailers without closed captioning.

Design a trailer browsing app that is accessible and allows users to watch trailers with closed captioning, earn rewards and without interruption from in-app and in-video advertisements.

My Role

UX Designer (UX Research, wireframing, prototyping) / UI Designer (visual design, typography, Iconography)

Duration

156 hours
March,2022
Self started project

Overview

Research

To better understand the needs of the users, I began the design thinking process by conducting primary and secondary research. 
My assumption was that there would be need for closed captioning and an ads free app even for users who have no accessibility concerns. This is because most users would preferably use closed captioning and undergo some form of stress watching trailers and getting interrupted from ads. The technology for browsing trailers has already been invented and so putting this into consideration would help narrow down my focus to core user pain points.

I interviewed 6 Participants about their current experience with trailer browsing apps and identified key user pain points :

  •  Users want a reliable and easy way to browse movie trailers.

  •  Users get frustrated by in-app and in-video advertisements.

  •  Users want closed captioning included in the trailer videos.

  •  Users want to get rewards or perks for using the app.

User Interviews

To get a sense of the strengths and weaknesses of the current market, I downloaded and analyzed 3 trailer viewing apps.

Competitive Analysis

Using insights from my Primary and secondary research, I created a Persona that reflects my target user base.

Persona

User Journey Map

I created a Journey Map to visualize the current user experience with trailer browsing apps and drew insights to aid me create an improved app.

User Flow

Starting the Design

I started the design by sketching wireframes on paper before moving on to creating digital wireframes

Paper Wireframes

Digital Wireframes

I created a Digital Wireframes from my wireframe sketches in Figma and built the more screens for the trailer browsing app.

Low Fidelity Prototype

I connected the screens of my digital wireframes to create a functional prototype for the first usability testing. 

Usability study

The information I gathered from the Usability study was represented in an affinity diagram and specific iterations were made.

Refining the Design

I started refining the designs after the usability study by creating mockups on Figma and implementing some changes based on the outcome of the usability  study such as including a visible search bar. 

Mockups

UI Design

Typography

Cambay - Font Size 18,19,22,24,25 and 26
Piedra - Font size 32

Colors

High Fidelity Prototype

I connected the screens of my mockups and added animations. I did a second usability testing and iterated on my high fidelity prototype.

Reflection

This is my first UX design project that allowed me to explore the movie industry as well as empathize with users to a great extent. it taught me the complexities that come with designing with inclusivity in mind. I also learnt that to truly solve the problems of users, one has to understand the thoughts, feelings and needs of the user. Personal biases have a way of making you see things in a different light when you should see things from the user's point of view. Recognizing the biases I had helped me develop a product that actually addresses users' pain points.

Next Steps

I want to add more features to the app and make it a full blown movie theatre application. therefore, my next steps would be to : 

  • Include a digital box office on the app to help users skip the line at movie theatres​

  • Include detailed screens for cast and crew bio to enable readers read about the cast and crew as well as get direct link to their social media profiles

  • Include more screens to show how screen casting and buttons work

  • include a responsive map within the app instead of using the third party app "Google Maps".

  • add light mode option.

bottom of page