MyAnimeList

Overview

Redesign of MyAnimeList (MAL), a popular anime database and community app

Transforming the MAL experience from confusing and overwhelming into intuitive and inclusive

Role

UX Designer

(User Testing, Design, Prototyping)

Project Time

4 months (Sep 2024 - Dec 2024)

Prototype Link

the problem

MyAnimeList (MAL) is a popular cataloging, database, and community app for anime and manga. The app was named after their main feature: lists that users can make to organize and log anime/manga. Originally a website, they released a mobile app version that is available on both App Store and Google Play; however, it has a subpar rating of 3.7.

To figure out the reason behind its relative unpopularity, I conducted an app audit with 5 participants. To summarize my findings, user complaints could be placed in one of four categories:

Unfriendly to new users
Overwhelming and unintuitive interface
Lack of feedback

Example of how busy the old interface was

the vision

The goal of the redesign was to clean up the interface and transform the app into an easy-to-understand anime one-stop shop for all people. The idea was that by making the app simpler and more intuitive, users would be able to easily find and update the information as they need, which would give them more time to, well... watch anime.

the design

While updating the interface, much consideration was placed on creating cohesion and consistency across the app.

lists

The list feature is the very core of the MAL app - users regularly add to lists, check existing lists, and make edits to lists. As such, this became my main focus for this redesign. The My List tab, which shows all the user’s lists, was improved to be easier to navigate - it was originally a mess with hidden/scrollable tabs and misleading buttons, (I could go on for ages about how unusable it is, but I digress).

There was also an issue with the representation of the lists themselves. Though the original list format took “list” very literally, it didn’t allow for an efficient display of information.

Wireframes for list MyLists and Discover screens

Very crude low-fidelity brainstorming of different possible list formats, along with their potential to be used across the app. The ideal candidate would balance simplicity with utility

New designs for MyList tab and sample list

The new My Lists experience. Clicking into a list on the My Lists tab brings you to a more detailed view

Original My List overview, with each list represented as a sub-tab. The anime-manga toggle is barely legible

Simplified My List overview which uses a “list of lists” approach. Anime tab is clearly visible and separate from manga tab

The original list format of the watchlist (left) differs quite drastically from the grid format of the seasonal tab (right)

Updated watchlist (left) uses same layout and format as seasonal tab (right) for consistency. Information within the tiles is also more organized

home screen

Right from the start, it was clear that a simple reorganization of the home screen wouldn’t be enough - it needed to be purged. As the first thing you see when you land in the app, the home screen should provide the most utility. However, it’s currently what seems like a love child between what intuitively would be the discover tab and discussion tab (except they have both those tabs as well). I decluttered the view from discussions and replaced them with high-priority feature shortcuts and information that pertains to the user the most.

Mid-fidelity wireframe showing new seasonal calendar feature

Mid-fidelity wireframe of new calendar functionality, allowing users to see the schedule of currently-airing shows

The original, (very) busy home screen with discussions and anime recommendations

Updated home screen features new episode updates at the very top. You can also easily update your anime progress or check what’s airing from the calendar view

Show Pages

Due to MAL being a database app, redating the show pages largely translated to me reorganizing information (I couldn’t really delete anything). Nevertheless, reinforcing information hierarchy improved the page’s legibility.

Screen showing how voice actors were organized

The lack of headers confused quite a few users when I conducted the audit. Some people didn’t know that the people below the characters were their voice actors

Screen showing how voice actors are newly organized

The power of labels: you can quickly scan for information now

The alerts aren‘t perfect due to project scope, but provide at least some sort of feedback to confirm user actions (something that the original app didn’t have)

accessibility

To make sure the redesign considers as many people as possible, accessibility was hugely considered throughout the entire project. Colours were tested with contrast ratios and colour blindness simulators to ensure enough contrast, and elements were sized according to accessibility standards to make sure they were comfortably sized.