Development

A React-based movie website that allows users to search for movies by title, sort them by genre, view trending and upcoming movies, and bookmark their favorite movies. The website is designed to be user-friendly and visually appealing.

  • Role: Designer/Developer
  • Context: Competitive Analysis
  • Duration: April 2024

The Project

The goal of this assignment was to create a platform where users can explore and discover movies. The aim was to incorporate features that allow users to easily filter through a vast database of films based on various criteria such as genre or release year. Additionally, users can sort their search results based on parameters like popularity, alphabetical order, or release date. Users can also aggregate their favorite movie to a saved list.

Competitive Analysis

Pinterest

Users can save ("pin") images and videos to their boards, organizing them based on their interests or themes.

Screenshot of a Pinterest board.

YouTube

YouTube lets users save videos to a "Watch Later" playlist and can like videos, which saves to a “Liked Videos” playlist. Additionally, users can also create playlists and add videos to them for easy access and organization.

Screenshot of a YouTube Watch Later playlist.

Letterboxd

Users can mark movies as "Liked" or "Favorite" to highlight films they particularly enjoyed or want to showcase on their profile. They can also create lists and add movies for organization.

Screenshot of the Letterboxd film page.

Competitive Comparison Chart

Categories

  • Organization: How well does the website allow users to organize their favorited items through folders and categories?
  • Sharing: Does the website offer features for sharing favorited items with others or integrating them with social media platforms?
  • Customization: To what extent can users personalize their favorite lists with tags, descriptions, or notes?
  • Privacy and Security: Can users control the visibility of their favorites, and are there measures in place to protect their data?
  • Intuitive Design: Is the interface easy to navigate?
  • Recommendation: Does the platform provide notifications or recommendations based on a user's favorited items?
  • Sorting and Filtering Categories: Are there a sizable number of categories to sort and filter the data? Are the categories relevant to the content?

Category Pinterest YouTube Letterboxd
List Organization Great Good Good
Sharing Great Great Good
Customization Good Ok Great
Privacy Great Great Great
Intuitive Design Good Ok Ok
Recommendations Great Good Poor
Sort/Filter Categories Ok Good Great

Analysis

Overall, all three websites organize their information well in their favoriting function. All allowed users to create lists to manage their favorites, with Pinterest excelling by allowing users to create subsections in their lists. As for adding information, all sites had a spot for users to add descriptions to their list. However, while YouTube only offered a space for the name and description for each list, Letterboxd excels by allowing users to add tags and notes for each film added to each list. All three platforms prioritize privacy and security, with options for controlling the visibility of favorited items and employing measures to protect user data. In terms of intuitive design, Pinterest has clear navigation to their favoriting feature, while YouTube and Letterboxd requires the user to tap on a dropdown of extra options to add to playlists. Pinterest and YouTube offer personalized recommendations based on favorited items, while Letterboxd only recommends recent watched movies from friends. Pinterest did not offer sorting, YouTube had basic sorting categories of date added, date published, and most popular, and Letterboxd had a large range of options such as sorting by name, popularity, release date, rating, interest, film length, etc.

Features to Implement

  • Organization: Allow users to items effectively.
  • Easy Navigation: Design a clean and intuitive user interface with clear navigation and prominently displayed favoriting options. Minimize unnecessary steps or dropdown menus to streamline the process of adding items to lists.
  • Sorting: Allow the users to sort the list of items displayed by popularity, date released, and rating.
  • Filter: Allow the users to filter the list of items displayed by genre.
  • Search Enginer: Allow users to search directly for the content they want.

Movie app wireframe to high-fidelity mockup.

Result

Desktop

Features

  • Dynamic Background: The background of the banner changes on each reload to a random poster of a popular movie.
  • Search Bar: Users can search directly for a movie by title.
  • Sorting: Users can sort by name, popularity, release date, and rating.
  • Filtering: Users can filter movies by genre and the time range of release date by selecting filters and clicking the filter button.
  • Movie Cards: Movies are displayed with their poster, title, rating, and release date.
  • Favorite: Users can save movies by clicking on the heart on the bottom right of the movie card. They can also click again to remove a movie from their favorited list. To view the list, users can click the Favorites link at the navigation bar.

Final webpage on desktop.
Next Work

Iterative Design

Thanks for messaging!
Contact

Let’s talk.

New projects, work inquiry or even a coffee.

Kiara Vong

First-generation college student from Hawaii.

I'm currently a Software Engineer at Capital One. I got my BS in Computer Science at Brown University. My pals describe me as a caring, reliable, hardworking team player. I'm passionate about interaction, UI/UX, and human-centered design. My driving force is understanding people, having empathy towards the challenges they are presented with, and helping them find solutions through intuitive design and insightful interaction. When I'm not coding, you can find me playing with my foster cats, going on Pikmin Bloom, or watching K-dramas!

  • React.js
  • UI/UX
  • is Fun.
  • Semicolons.