Role
UX/UI Designer
Team
4 UX/UI Designers
Tools
Figma
Canva
Timeline
2 weeks - Web
UX/UI Design
Description
Heuristic Evaluation/UI Redesign
Overview
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?
We conducted a comprehensive heuristic evaluation of the IMDb website and redesigned the user interface to improve overall functionality and accessibility.
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.
UI Redesign
Main Menu
3
Major Usability Problem
​The exit button 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
Aside from the IMDb home button on the header, there is no clear indication of an exit button.
​
​There is a lack of consistency in text styling, sizing, colours and overall branding with the IMDb brand. This is evident in the text primarily in the text sections.
​
The use of white space once the user scrolls to the bottom leaves a sense of anticipation that there is more content.
Recommendation
Delete news page white space, 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
Help Center
3
Major Usability Problem
Overwhelming use of links that clutter the page and cause more confusion for the user trying to find a specific section of the website.
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
Error 404
2
Minor Usability Problem
The IMDb header and footer are not visible on this page, which can leave users confused with the site's navigation.
​
The error page does not explain in plain language or indicate the problem aside from the obscure link that directs the user to the homepage.
​
​
Recommendation
Provide users with multiple navigation options by reintroducing the header and footer.
Redesign the error page by incorporating elements such as the return button and movie quote link to provide the user the ability to control their next page destination.
Next Steps
Usability Testing
Test and reiterate designs with larger user base, 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 KPIs/heatmaps.