top of page
Overview

IMDb app redesign

a case study on reimagining the go-to movie database

role

ux design

user research

wireframing

visual design

tools

figma 

photoshop

illustrator

usertesting.com

duration

2-3 months

team

Gabriella Bachman

Yang Cheng

imdb-cover-purple.jpg

background

IMDb is a leading online database for movies, TV shows, and other media content, with over 8 million titles, 10 million individual records, and 80 million registered users. To maintain connectivity and continuity for new and returning users, it is crucial to ensure the website's usability remains sufficient, especially as new categories of information are added to the database.

IMDB_Logo_2016.svg.png

To discover the best approach to redesigning IMDb’s app. We aim to suggest a way to improve the usability of the website, and overall productivity of its online users.

objective

imdb-overview.png
Problem

problem

IMDb's mobile app currently presents a challenge for users in terms of overwhelming navigation due to the abundance of information on the website, resulting in a lack of community presence and content personalization. Additionally, the packed home page creates difficulty in finding information and can be time-consuming for users to navigate.

Research

understand

Before heading into the ideation phase, we analyzed IMDb's current website page by page in order to understand the core of the website and its features. The group and determined these research objectives:

  1. Identify the strengths and weaknesses of IMDb's current website.

  2. Understand the most frequently used features on the site and determine pain points of the website.

  3. Understand the type of demographic that uses the site the most frequently.

As part of the IMDb website redesign project, we conducted a thorough competitive analysis to identify IMDb’s direct and indirect competitors, analyze their strengths and weaknesses, and understand where IMDb stands in the market. Our research included popular websites such as Metacritic, Rotten Tomatoes, and Fandango. This analysis provided us with valuable insights that informed our redesign decisions and helped us to create a more effective and competitive website.

competitors

Unknown.png
rottentomatoes_logo_40.336d6fe66ff.png
Metacritic_logo.svg.png

Key takeaways included:

  • Scoring and review features with filter and sort options are important for movie database websites.

  • Different websites have unique strategies for organizing information.

  • Quick access to featured or trending sections, watchlists, and links to additional information are common on homepages and summary pages.

We conducted user interviews in order to get a better understanding of any problems that IMDb's website could potentially fix.

 user interviews

  • Users want more information on IMDb to rival platforms like Wikipedia.

  • Netflix is the preferred streaming service among interviewees.

  • Reviews and ratings are important factors in decision making.

  • Many users start their searches on Google, and rely on competitors like Rotten Tomatoes.

I created a user persona that reflects the ideal user of IMDb.

user persona

peng_persona-New.png
Ideate

ideate

In order to determine a new information architecture for the IMDb website, we conducted an open card sort exercise with 3 participants. From the card sort results, we examined our findings and grouped patterns.

  • Participants tended to separate anything non-movie related.

  • Participants felt that there should be more sub-genres included.

  • Participants grouped user-oriented contents together.

card sorting results

The patterns that emerged, combined with observations from participant sessions, guided the 3 main findings. We found that participants tended to separate anything non-movie related, they felt that there should be more sub-genres included and that participants grouped user-oriented contents together.

After analyzing the results from card sorting, the group created a site map, a model of a website's content designed to help both users and search engines navigate the site.

developing a site map

Site Map-protoype.png
Design & Testing

wireframes

As a crucial stage of the IMDb mobile app redesign process, low-fidelity wireframe sketches of 18 screens were created and tested to bridge the gap between Information Architecture and Interaction Design. In this stage, two users were tasked with interacting with paper prototypes and completing a set of tasks to provide valuable feedback.

low-fidelity sketches

IMG_0834.jpg
IMG_0844.JPG
IMG_0835.jpg
IMG_0839.jpg
IMG_0837.jpg
IMG_0838.jpg
IMG_0833.jpg
IMG_0836.jpg

Following the creation and testing of the low-fidelity wireframes, another layer of visual polish was added. Through Figma, we created an interactive prototype in the form of medium-fidelity screens. This step further helps to articulate the user flows and content structuring.

medium-fidelity prototype

Screen Shot 2023-03-31 at 4.54.12 AM.png
Screen Shot 2023-03-31 at 4.53.14 AM.png
Screen Shot 2023-03-31 at 4.53.25 AM.png
Screen Shot 2023-03-31 at 4.53.48 AM.png
Screen Shot 2023-03-31 at 4.54.49 AM.png

The medium fidelity prototype of the IMDb app was tested with 9 participants through UserTesting.com.

After conducting medium-fidelity prototype test sessions, some adjustments were made to the wireframes to address users' feedback, such as adding a "Recently Viewed" section to the Home Page. Changes were made to improve functionality, such as making the search icon clickable and adding a fixed bottom navigation bar. The prototype was also updated with a new "Awards & Events" section, larger font size in the navigation menu, and poll sections on movie and TV show listing pages. These changes helped prepare the team for creating high-fidelity screen designs.

user testing results

style guide

After addressing user concerns and adjusting wireframe designs, high-fidelity mockup screens and a style guide were created. The style guide was demonstrated on three unique pages in the mobile and desktop experience to showcase the finished high-fidelity screens.

high-fidelity screens

Movie Info Page.png
imdb-home.png
imdb-showtimes.png
imdb-desktop-home.png
imdb-desktop-Showtimes & Tickets.png
imdb-desktop-movieingo.png
Results

results

We had a few final takeaways at the end of this case study project.

  • Incorporating user test sessions throughout the process provides valuable insights and helps to see the website from the user's perspective.

  • Paying attention to details, such as font sizing and navigation, can significantly impact the user experience.

  • Effective communication is essential for successful collaboration, especially when working with a team with diverse skillsets and working paces.

imdb-results.png
bottom of page