Overview

IMDb is one of the world's most popular and authoritative sources for movie, TV and entertainment content. Users can find ratings and reviews for the newest movies and TV shows on the website as a reference for what they want to watch.

Goal

The redesign aims to improve the website's usability and navigation by creating a structured navigation system, clear information hierarchies, and cohesive visual language.

Role

UX Researcher
UX/UI Designer

Tools

Figma
Adobe Illustrator

Skills

User Research, Interview, Competitor Analysis, Information Architecture, Ideation, Usability Testing, Wireframe, Prototype

Time

Feb - Mar 2023

Problem

How to improve the IMDb website's information structure in order to elevate usability?

IMDb is an authoritative database for entertainment content. However, the website’s usability poses significant challenges due to confusing navigation and massive yet disorganized information. Additionally, an inconsistency in UI elements between minor and main pages contributes to a cluttered design.

Solution

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Reorganize Information Hierarchies & Enhance Visual Content

Straightforward Navigation

Deleted the hamburger menu and moved the secondary pages' button to the navigation bar
Regroup content that are logically related into one page
Reduce unnecessary clicks and travel by creating preview buttons

Redesign IMDb website navigation bar

The redesigned IMDb movie info page

Clear Information Hierarchy

Highlight and prioritize important features such as "Rating" & "Reviews"
Reduce repetitive information and buttons
Rearrange information into clear define groups

Enhance Visual Content

Deleted unnecessarily information and columns to create a clean and clutterless interface
Create more engaging graphic content to make the website visually appealing
Ensure a consistent UI and visual style across the website

The redesigned IMDb home page hero section

Research

User Feedbacks

The website is hard to navigate due to confusing information hierarchy and cluttered interface

In order to discover users needs and struggles with the IMDb website, I recruited five individuals who love to watch movie on a daily bases to use the current IMDb website and recorded their experience with the platform.

Interview

Rating and reviews are the reasons most people visit the IMDb website therefore should be prioritized

Following the user testing, I conducted a series of interviews with five individuals to find out about people's movie watching habit, preferences, problems and their personal experience with the movie information platforms.

01.

People tend to look for movies on streaming platforms, Google, or social media

02.

People will just search for movie information on Google instead of movie websites

03.

People value the User Ratings & Reviews feature of IMDb the most

Competitive Analysis

Distinctive features should be given topmost priority

To start off the project, I analyzed the IMDb website and four another popular entertainment information platforms. I found that IMDb's strength is its authoritative database and the ratings & reviews produced by a large user communities. Yet in comparisons, some competitors have a cleaner interface and more organized content hierarchy.

Rotten Tomatoes

Metacritic

Netflex

Google

Research Insights

Based on the feedbacks and insights I received from the research phase, I summarized three major painpoints of the IMDb website that need to be fixed to improve usability.

01.

Information overload & Poor Navigation System

There massive amount of content on each page makes users hard to process and navigate.

02.

Unstructured Information Hierarchies

The unclear information hierarchies force users to spend more time finding the information they want.

03.

Inconsistent & Cluttered Visual Design

The cluttered interface and inconsistent UI further affect the website's readability and usability.

Design & Improvements

After all the research and define, here is how I redesigned the website to solve the problem.

01. Improve Navigation

Redesign the Navigation Bar:
From the user testing, multiple users had ignore the hamburger menu from the original navigation bar and only browsed on the homepage. To make the navigation more straightforward, I deleted the hamburger menu and moved frequently used pages' buttons to the navigation bar so users can go to the pages right away.

Reduce Unproductive Flows:
‍By adding genres to movie cards, users can have a sense of what the movie/show is about and determine whether they are interested without clicking through all the pages.

The original movie cards

The redesigned movie cards with genre tags

02. Reorganize Information Hierarchies

To enhance the website’s information structure and user flow:

Reordered the information hierarchies to prioritize the more valuable features (identified from research) so users can find the information more efficiently.
Deleted repetitive content and sections to declutter the page and help user navigate the information.
Grouping logically related information into one section to help navigate.

The original IMDb movie info page:

The redesigned IMDb movie info page:

03. Redesign the Visual Elements

Enhance Visual Effects:

Removed the two columns layout to clarify the interface
Deleted repetitive content and information to reduce clutter
Added engaging visual elements such as animated slide deck to present trending or upcoming movies or shows

The original IMDb website's hero section

The redesigned IMDb website's hero section

Make UI and Visual Consistent Across the Website:

The original IMDb user review page

The redesigned IMDb user review page

Final Prototype

View Prototype in Figma



｜Home Page

When the users first landed on the page, they would receive recommendations on upcoming/trendy movies, tv shows, and news.

｜Movie Info Page

This page contains detailed information about the movie, including trailer video, images, cast, tech information, awards, user rating/reviews, where to watch, and related news.

｜ User Review Page

The collective movie ratings and reviews provided by large user communities are one of the most important and unique features of IMDb. There are also professional and extra reviews from external resources.

Visual Design & Style Guide

Reflection

Information Architecture

The biggest challenge of this project is to restructure the massive amount of information on the pages and create clear information hierarchies. I spent a long time defining the topmost prioritized features and redesign the webpage's layout to highlight these features. I also removed repetitive informations from the page and regroup logically related content together to declutter the page. Compared to the original website, the redesigned version looks less clutter and easier to navigate.

If given more time, I would like to find ways to add advertisement on the website while maintaining a clear and user friendly interface. For platforms like IMDb, advertisement is a big part of their income. However, all the ads on the page hugely affect the website's usability. As a designer, it is important to find the balance between a product's commercial value and usability.

IMDb Website Redesign