Watchlist

Designed an application to provide users with movie ratings, summaries, and releases.

Timeline

BCIT React JS Project
2 Weeks Execution Time
Completed Aug 2019

Applied Skills

Competitive Analysis
Content Strategy
Wireframing
Product Prototyping


Summary

Watchlist is a movie database application I built with the React JavaScript framework. Dynamically storing movie titles within the last 6 months, it helps users see which recent films are popular and high-rated according to their genre.

This project involved connecting to a movie database API, finding useful purpose for it, and then designing and prototyping the entire application using React JS.

About Watchlist:

“Which movies is everyone talking about? Watchlist is always up to date. Browse for your favourite genres or movies, check their ratings, and see how they match up!”

Objectives

  • Find a product purpose for the API data provided by The Movie Database (TMDb).
  • Design a user interface that accommodates varieties of movie thumbnails.
  • Create a React prototype of the movie database application.

Inspiration

Trending Movies

Growing up, I was always out of the loop when it came to knowing which movies everybody was referencing and talking about. My parents only enjoyed watching historical and crime dramas – so I was out of luck when it came to getting a wide range of movie recommendations.

In homage to those awkward years, I felt like I could use my assignment to also satisfy my inner child and alleviate those awkward memories.

Data Management

After obtaining the API key from The Movie Database’s website, a connection with the API database was established:

API key pulling genres from TMDb.
API key pulling genres from TMDb.

Our project’s only hard requirement was to at least show movie listings by genre. Beyond that, we had a choice on the information we wanted to display our movie database.

API data from TMDb.
API data from TMDb.

Product Features

Our instructor showed us some examples of past work and we got to work. The prior examples and what most of my classmates went with were:

  • A movie poster or wide image.
  • The complete movie summary.
  • The genre of the film.
  • Perhaps a rating or release date.

For my application, however, I felt that using the data to show a full, detailed movie summary with was a bit irrelevant and unnecessary – as the main TMBd website already fulfilled the purpose of giving comprehensive film reviews:

TMDb mobile website.
TMDb mobile website.
TMDb desktop website.
TMDb desktop website.

To create a valid use-case for my product, my movie database would function as a preview site – for those who just wanted to check which movies were trending or released.

User Stories

“I want to know what others think of a new movie before I decide to watch it.”

Casual Movie Goer

“I want to know which recent fantasy titles are good to watch.”

Fantasy Film Fan

Ideation

Main Components

  • A “Popular” section, a TMDb formula based on recent and popular films.
  • The “Genres” section to browse recent/relevant films in their genre.
  • An “About” section to tell users about myself and the application.

Poster Thumbnails

Movie posters stored in the API data would be my primary visual aid that I would design around:

Wireframe Iteration

Watchlist mobile wireframe.
Mobile wireframe.

Movie posters would be generally displayed in a 1:3:5 ratio.

For different screens.
Responsive wireframes for different screens.

Logo Concept

The app needed to have a minimal amount of additional elements and colour to avoid style clashes with colourful movie posters.

Watchlist brand logo.

Typography

The logo typeface used was “Crimson Text”. Heading and body typefaces were sans-serif using the “Blinker” typeface, to maintain design simplicity.


Implementation

React Prototype

The prototype was built using some React best-practices:

User Interface

Mobile App Preview.
Tablet preview.

After prototyping my bare-bones application, UI elements were added and iterated upon to address accessibility or usability needs:

  • A border was added between each movie poster to show separation.
  • Any of the three menu options would be underlined if recently clicked.
  • When scrolling down, a back-to-top button was added for usability.
  • Fade-in effects were added to give an interactive feel upon use.
Tap / Hover information.
Tap / Hover information.

Upon tapping (or hover on desktop), a short summary would show, with a link to The Movie Database for detailed movie breakdowns.

  • Movies without images had a filler image placed.
  • Movies without ratings would be assigned a rating of “N/A”.
Filler image and N/A rating.

Insights

My first dive into the world of React taught me the importance of double-checking your existing code and structure before continuing.

It affirmed that the best match for multiple colourful images/thumbnails is less colour, often just black or white. This explains why Netflix is primarily black, while Instagram, Facebook and other social mediums who cannot control the style of media content on their applications have white backgrounds.

> Back to my work