Anime Tracking Platform 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.
Goals
A focused set of goals to improve clarity, flow, and visual quality.
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.
🟥 Initial Design | 🟩 Revised Design
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.
