Role
UI Designer and UX Researcher
Duration
May - June 2024
Tools
Figma
Brief
IMDb (Internet Movie Database) is an online database of information related to films, television series, podcasts, home videos, video games, and streaming content online – including cast, production crew and personal biographies, plot summaries, trivia, ratings, and fan and critical reviews.
Problem
Overcrowded Navigation: The navbar contains an excessive number of links, making it difficult for users to quickly find the information they need.
Lack of Visual Hierarchy: The current design fails to effectively guide users through the content, leading to a confusing and overwhelming user experience.
Information Overload: Pages are densely packed with information, often presenting more data than necessary, which can overwhelm and disorient users.
Outdated Design: The overall aesthetic of the website feels dated, potentially failing to resonate with younger audiences or those accustomed to more modern web designs.
Poor Content Organization: The lack of clear content structure makes it challenging for users to efficiently navigate and find desired information.
Goals
Modernize the visual design of IMDb
Improve overall user experience and navigation
Streamline content presentation
User Personas
Name: Frank Miller
Age: 32
Occupation: HR Manager
Location: New York City, USA
Challenges:
Frank finds the current interface cluttered and difficult to navigate, especially when he's looking for personalized movies and shows recommendations and industry news. He desires a cleaner, more organized layout with quick access to his favorite features like reviews and trailers.
Name: Carla Sanchez
Age: 24
Occupation: Graphic Designer
Location: Los Angeles, USA
Challenges:
Carla doesn’t have the time to dive into movie details, preferring a streamlined, visually appealing UI that focuses on trending content and brief reviews. She is overwhelmed by excess information and would benefit from a simplified interface that helps her discover content efficiently.
Styleguide
Typography
Colour Palette
#E6B91E
#000000
#FFFFFF
#262626
#5799EF
#1F1F1F
Visual Design Decisons
Navigation Bar
Original navigation bar of IMDb
Early iteration
Final iteration
• Eliminated the hamburger menu in favor of a standard horizontal navbar.
• Streamlined navigation options for more intuitive and efficient user journeys.
Movie Card
Original movie card of IMDb
First iteration
Final iteration
Notable changes
Color Palette: Retained IMDb's original color scheme to maintain brand recognition
Typography: Selected GT Walsheim Pro as the new typeface to add more character to the design
Component Consistency: Unified the curvature of all UI elements to match the IMDb logo, creating a cohesive visual language
Final Designs
