Aaron Charles-Rhymes
UX Designer

Trailor Moods

Movie Trailer Rating Made Easy & Fast

Trailer Moods

Problem

Moviegoers and fans would like to have a mobile-friendly online database application of movie trailers, where they can openly critique and rate movies based on their mood.

Trailer Moods

Solution

The goal is to create a mobile application that is available for Android and iOS users. This mobile application can provide a faster, more enjoyable way for moviegoers to rate the trailers they’ve viewed to give others an indication of which movies to look out for. They can rate each trailer with emojis to convey their emotions and receive discount movie tickets or free movie items depending on the amount of trailers they rate. This mobile application would be called “Trailer Moods”.

1. User Research

  • Brainstorming

  • Conduct online surveys (via Google forms)

  • Evaluation of ideas and features for the app

  • Feature prioritizations

  • Thematic analysis

  • Competitor Analysis

2. Define

  • User personas

  • Customer journey

  • User Flow

  • Information Architecture

3. Design

  • Color palette / typography

  • Wireframes

  • Mock-ups

4. Conclusion

Trailer Moods

Success Metrics

The app would be free for consumers but, in order to absorb the marketing costs users reaction data, the developer could charge the movie trailer industry a monthly subscription fee.

They could also utilize the existence of social media sites such as: Facebook, Twitter, YouTube, etc. to promote the movie to movie lovers.

The bigger the client base, the more you can charge the movie trailer industry monthly, which would also be beneficial to the movie trailer companies.

Trailer Moods

Target Market & Audience

Trailer Moods target market will be for movie lovers who loves the experience and reaction of seeing a movie trailer and going to a movie theater.

  • Age Range: 15 to 60+
  • Loves watching new movies trailers
  • Have a lot of emotions
  • Love discounted or free promotions

Trailer Moods

Pain Points

To organize all the feedback received from online survey , I summarized the main pain points below:

  • Not Commenting/Reviewing
  • Not Watching the Movie Trailer
  • No Promo Offerings

Trailer Moods

I. Brainstorming

Now that we have defined the problem that we are trying to solve, we will begin by generating a list of ideas that could potentially solve these problems.

Here are a number of solutions that we think might be beneficial to include in the application:

II. Conduct Online Surveys

Through a conducted online survey, we have gained a clearer understanding of our potential user base. Through this insight, we have built a stronger case for solving their pain points when it comes to viewing trailers and watching movies.

Listed below are the questions prepared in preparation for our online survey:

  1. What is your country of residence?

  2. How old are you?

  3. How many times on average have you visited a movie theatre per year?

  4. Why did you choose to watch a movie? Describe your decision making process

  5. How important is it to watch a trailer in your process?

  6. How often do you decide to watch a movie immediately after the trailer?

  7. After you watch a trailer you like, what do you look after?

Here are the recorded responses based on the surveys we conducted online:
Trailer Moods
Trailer Moods
Trailer Moods
Trailer Moods
Trailer Moods
Trailer Moods
Trailer Moods
Trailer Moods

III. Evaluation of Ideas and Features of the App

From there, we worked to summarize each participant’s needs with regards to creating the trailer moods app:

Trailer Moods

IV. Feature Prioritization

Since there were a number of features that we had recorded based on gathered data, we decided to make a feature prioritization.

The feature prioritization helps rank our potential features from the most important to the least important. This is a crucial process for the web development team in the future, so that they can better understand high-priority features.

Trailer Moods

V. Thematic Analysis

After we managed to rank our features and recorded the data from our online surveys, we created a systematic method to break down and organize additional data. Through this method, we conducted a thematic analysis.

We created appropriate codes to better facilitate the discovery of each significant theme:

Trailer Moods

VI. Competitor Analysis

We managed to conduct a competitor analysis to better assess the strengths and weaknesses of our current and potential competitors. We believe this analysis can provide us with both an offensive and defensive strategic context to identify opportunities, as well as threats.

The Define Phase
Trailer Moods

I. User Personas

After the research phase, we created two personas. These personas are integral in helping us design our mobile app, as this serves as our reference to meet the needs of our target users. They represent the summarization and communication research of our target audience in a succinct and digestible way.

Trailer Moods

II. User Flows

From there, we moved into user flows. This would be the path taken by our users to complete a certain task. The flow demonstrated and outlined below takes them from the starting point of the app through a set of steps towards their goal and final action, such as rating a movie trailer with emojis.

III. Customer Journey

We then proceed with creating the customer journey map or CJM. This journey would be the complete summation of experiences that a user goes through when interacting with the application.

Trailer Moods
Trailer Moods

IV. Information Architecture

We also created the information architecture for the application. You can see from here that we managed to structure all the layouts that we will soon be designing on our mock-ups soon.

The Design Phase
Trailer Moods

I. Color Palette / Typography

For the color palette, we decided to go with a combination of warm and cool colors, whereas for the fonts, we decided to go for a “Sans Serif” look (to make it more readable, especially on mobile).

Trailer Moods

II. Wireframes

We began sketching out the ideas through low-fidelity wireframes. As you can see on the image provided, we’ve undergone at least 2-3 design iterations until we managed to conclude and settle into our final designs before designing the mock-ups.

III. Mock-ups

After we finalized the design of our wireframes from a number of iterations, we then created the high-fidelity mock-ups:

The Conclusion

Getting people to answer the surveys and gathering this critical data was one of the biggest challenges in the project, apart from the brainstorming and ideation stage. I also found out that based on the data I’ve gathered, it was easier for me to design the wireframes and mock-ups. Currently, I am working on improving the overall design based on continued review feedback and analytics tracking.