Metacritic Redesign
Summary
This popular entertainment website suffers from poor accessibility for icons and fonts, redundant content on the homepage, and outdated UI elements. This project is an attempt to improve these shortcomings and provide an intuitive, modern, and pleasant user experience for the audience.
Extensive user research was conducted to identify the pain points and user expectations to strategize the design process and determine project goals.
During the design process, the color contrast ratio as per WCAG requirements was considered to improve the font (4.5:1) and icon (3:1) visibility. The navigation section was redesigned and changed to click-based as opposed to the previous hover-based navigation. The footer area was also decluttered to only display relevant information. A basic design system, color palette, and font family were also defined.
The current Metacritic website is highly customizable for the editor as the information is constantly updated. These factors were considered while the redesign like the addition of carousels (Trending), scrollable sections (New & Notable), and news areas.
Please go through the case study below to see the complete process and final prototype.
Project Duration: 3 weeks
Team size: 1 person
Tools used: Figma, Miro
Project Files and Resources
Metacritic Website: https://www.metacritic.com/
Figma Project: Please send me a request to access the entire project and clickable prototype jumdeatharva@gmail.com
Case Study
