top of page
IMDb.png

Problem

Have you ever wanted to find out more information about a movie or TV show but had trouble doing so?

 

With IMDb being the go-to source for information on movies and TV shows, how can we improve the way the website communicates its product offerings? 

Outcome

Conducted a comprehensive heuristic evaluation of the IMDb website and redesigned the user interface to improve overall functionality and accessibility.

Tools

Figma
Adobe Illustrator

Canva

Duration

2 weeks

Roles

UX/UI Design

Meet Our Team

Justin.png

Justin

Cheung

Tina.png

Christina

Borteye

Duff.jpg

Duff

Isberg
Sneha.png

Sneha

Gophane

Sneha Gophane

UX/UI Design
Sketcher

What is a Heuristic Evaluation?

Nielsen Norman Group defines heuristic evaluation as a usability engineering technique that identifies usability issues in a user interface design, allowing them to be addressed during an iterative design process.

Jakob Nielsen and Don Norman, pioneers in the user design process, outlined 10 general principles that are commonly followed in heuristic evaluations.

1

Visibility of System Status

3

User Control and Freedom

5

Error Prevention

7

Flexibility and Efficiency of Use

9

Recognize, Diagnose, and Recover from Errors

2

Match Between System and the Real World

4

Consistency and Standards

6

Recognition Rather Than Recall

8

Aesthetic and Minimalist Design

10

Help and Documentation

What is a Severity Scale?

The overall usability of a design can be measured by the use of a severity scale, where the higher the score, the more severe the usability issue is. Severity ratings can help determine where the most resources are required in order to solve a usability issue.

For the purpose of this project, we focused on usability issues that scored greater than 2, allowing for opportunities to redesign the user interface to improve overall accessibility.

0

No Usability Problem

1

Cosmetic Problem

2

Minor Usability Problem

3

Major Usability Problem

4

Usability Catastrophe

User Task Flow

Beginning at the IMDb homepage, our user's initial objective is to discover content available for streaming on Amazon Prime. They navigate to the "Explore What's Streaming" section, then proceed to browse details related to a specific show, such as actors and news stories. After encountering difficulties with the full screen hamburger menu, they attempt to seek assistance by clicking on the help center. Ultimately, the user exits the website without accomplishing their original goal.

User Task Flow IMDb.png

UI Redesign
Main Menu

2

Minor Usability Problem

User Control and Freedom

The exit icon is not marked clearly and disappears when you scroll, which could confuse some users.

Recommendation

Fix scroll position of top navigation so it is always accessible on the page, no matter how far you scroll. This gives users a clear option to exit the menu anytime.

UI Redesign
News Page

3

Major Usability Problem

User Control and Freedom

No exit button for the user, limited navigation.

Consistency and Standards

Lack of consistency in text styles, sizes, colours and overall branding with the IMDb brand.

Recommendation

Delete news page whitespace, remove majority of news links in the sidebar and enlarge the text size to be clear with titles and sections. Also make the news story photo & text larger, and make a stronger border with a shadow for the news story section to draw users attention to the actual story.

UI Redesign
Error 404

2

Minor Usability Problem

Help Users Recognize, Diagnose, and Recover from Errors

Does not explain in plain language or indicate the problem, and suggest a solution.

Recommendation

Add an IMDb logo, some navigation buttons, and change the 404 page to be consistent with the IMDb brand.

UI Redesign
Help Center

2

Minor Usability Problem

Aesthetic and Minimalist Design

Excessive information, clutter and lack of white space. Causes more confusion than understanding for anyone that lands on this page.

Recommendation

Categorize links under cards or dropdown menu that navigates users to another screen with information links pertaining to that category. Also, adding the IMDb header and footer for access to navigation links.

UI Redesign
Carousel Functionality

2

Minor Usability Problem

Aesthetic and Minimalist Design

Users will expect to be able to click and drag all the carousels on IMDb's website, but they do not have that functionality.

Original Carousel.PNG

Recommendation

Add in carousel functionality that users would be expecting. Clicking the left and right navigation buttons is the only way to navigate these currently, and they constantly have inaccessible colour contrasts as they are just white outlined buttons against a changing background.

Revised Carousel.gif

Next Steps

Usability Testing

Test and reiterate designs with real users, confirming if usability issues have been resolved.

Meet With Developers

Discuss and potentially implement the solutions identified from our heuristic evaluation.

Launch Live Site

Release improved site with changes implemented and monitor feedback from users.

Hope you enjoyed your stay!

Want more?

2e7c3d9b8e375703edb2d123d3d790b1-sticker.png
bottom of page