MyAnimeList Redesign
Background
MyAnimeList is one of the most widely used anime and manga tracking platforms, but its UI feels outdated and cluttered. This project reimagines the platform with a cleaner, modern design that improves navigation, personalization, and community engagement. To guide the redesign, I drew insights from AniList (modern UI), Steam (community & library management), and the current MyAnimeList website.
Problem Statement
MyAnimeList has a massive database and loyal community, but its outdated interface, cluttered navigation, and lack of personalization make browsing, tracking, and engaging with content less enjoyable than it should be.
Goals
Modernize the Visuals → Refresh MyAnimeList’s outdated interface with a cleaner, contemporary look.
Improve Readability → Use consistent typography, spacing, and hierarchy for easier scanning.
Streamline Navigation → Reduce clutter and make core actions (browsing, tracking, reviewing) more intuitive.
Ensure Consistency → Establish a style guide for cohesive colors, components, and layouts.
Research and Reference
To ground the redesign, I compared MyAnimeList’s existing interface with similar platforms that manage large libraries and communities:
AniList → Clean, modern UI and strong use of hierarchy for readability.
Steam → Robust community features and efficient library management patterns.
MyAnimeList (current) → Rich database and active forums, but with dated visuals, cluttered layouts, and inconsistent navigation.
These references helped me identify what works well elsewhere and what needed improvement in MAL, guiding decisions for a UI overhaul that feels familiar yet modern.
Moodboard
Visual direction inspired by modern anime platforms, community-driven design, and clean UI patterns.
Style Guide
Defines colors, typography, and components to ensure consistency and readability across the redesign.
Key Redesign Highlights
The redesign focused on addressing usability gaps identified through a heuristic evaluation of MyAnimeList. Below are three examples where applying usability principles led to meaningful improvements.
Click to access the Accessibility Component Heuristic evaluation Click to access the Pagewise Heuristic Evaluation
Prototype
An interactive prototype brings the redesigned MyAnimeList experience to life. Explore the new navigation, anime detail pages, and improved readability directly in the browser.
Reflection
Through heuristic evaluation, I identified key gaps in MyAnimeList’s UI — cluttered layouts, weak hierarchy, and dated visuals. The redesign showed how small, systematic changes in readability and navigation can greatly improve usability. Referencing AniList and Steam guided the balance between modern aesthetics and functionality.
Explore the Full Case Study
This overview highlights a few key redesigns, but the full case study goes deeper.
See all 10 heuristic-based evaluations, detailed before/after comparisons, moodboard, style guide, and the interactive prototype.
