Toksan Anime

Modernizing the functionality of anime and manga streaming service interfaces.

Tools

Figma
Photoshop

My Role

UX/UI Researcher

UX/UI Designer

The Problem

With brands such as Netflix, Disney+, and Amazon Prime setting the design standards for streaming service UI’s, current popular anime and manga streaming UI’s are extremely outdated and compare poorly.
An image of the outdated look of the Crunchyroll Anime landing page

The Process

image of man looking at a problem

Research & Define

Anime and Manga streaming database UI’s are extremely outdated.

Survey

Competitive & SWOT Analysis

Usability Testing

image of a man sitting on a chair with a laptop

Ideate

Information Architecture

User Persona

image of a man at his desk on his computer

Design

Wireframing

Prototyping

The Research

To be able to design a solution, I needed to first research what aspects users enjoyed about anime and manga streaming services.
To do this, I set out to find both qualitative and quantitative data to help create a structure for my research.

Conducting A Survey

A Google form used to locate ideal candidates for usability testing.
Firstly, I created a survey that would help collect the qualitative and quantitative data I needed.
I then sent a Google Form in a public discord server dedicated to anime and manga in hopes of finding an ideal set of candidates to conduct further research with.

Competitive Analysis & SWOT

A competitive analysis of the CrunchyRoll streaming service.
Next, I created a competitive analysis and SWOT analysis. Because I was looking to simplify anime and manga streaming, I chose CrunchyRoll as I felt it was the most visually outdated service.

These analyses I conducted helped identify important factors of the streaming service that I needed to ensure were present in my future designs (such as accessibility features or interactive content) as well as features that negatively affected my experience.

Usability Testing

A participant scrolls through the CrunchyRoll website and points out what they like and dislike.
With 4 participants available to assist in the research, I was able to conduct an unmoderated usability test: a method used in participatory research that allows the user the navigate the product freely without a set list of goals. This unmoderated usability test helped me understand features that confused users and impacted how they used the product.

The Ideation

After the research had concluded, I moved on to the ideation stage. In this stage, I analyzed the data I had collected and began to piece together a simple basis for the design tactics.

Information Architecture

The Information Architecture was created based on feedback from the usability testing phase and was designed considerably focused on accessibility and ease of use.

User Persona

The User Persona was designed based on real data that was collected during the research phase. The user persona details the user pain points, needs and interests that were described during both the survey and usability testing stage.

The Design Stage

In the final stages of this project, I translated the data I had collected into a design. Using Figma to design the wireframes and prototypes, I utilized UX fundamentals such as the design heuristics to create an easily navigable, aesthetically pleasing product.

Lo-fi Wireframe

In the lo-fi wireframe, I strived to design a simple UI that provided users with features that they specified "heavily contributed to the positive aspects of the user experience" on CrunchyRoll.

The Final Design

The landing page of Toksan Anime which features an ad for "Mob Psycho 100"

After a series of moderated usability tests were done to reinforce the accessibility of the design, I proceeded to design the hi-res wireframe. The design features a landing page that promotes new episodes of an anime, alongside a list of manga recommendations.