Ryan Rosales • Crunchyroll

CRUNCHYROLL

A redesign of a leading Anime streaming platform where I modernized the UI and created a solution to organize saved Anime playlists.

Disclaimer: I am not an employee nor associated with Crunchyroll. Just a designer who loves Anime.

DESIGN ROLE

I was the sole UX/UI Designer where I identified current UX problems that affect Crunchyroll’s business goals. Research and user needs drove the visual design solution.

Project Date: July, 2020 - August, 2020

Tools: Figma, Affinity Designer, Photoshop, Draw.io

THE PROBLEMS

I wanted Crunchyroll users to tell me what problems they've experienced and their suggestions for improvement. In my Google survey, I asked users how they felt about the design layout and overall experience. Feedback requested:

• A UI update, especially the landing page and shows page.

• Dark mode.

• A way to organize their queue/watch lists.

• Filter options to improve the search engine.

WHAT IS CRUNCHYROLL AND ANIME?

Crunchyroll is an American video streaming platform that focuses on licensed Japanese Anime and live-action drama.

Anime is short for Japanese animation which is known for its 2-D and stylized art style. In addition, Anime is heavily a part of Japanese culture and has a growing international audience each year.

With over 70 million registered users (updated July, 2020), 13 million monthly active users (updated March, 2019), and 3 million paying subscribers (updated July, 2020), Crunchyroll is without a doubt the leading Anime streaming service.

IDENTIFYING CRUNCHYROLL'S BUSINESS GOALS

Crunchyroll’s main forms of revenue:

• Premium Subscription allows users to watch Anime without ads and watch new episodes 1-hour after Japanese airing time.

• Online Store is where users can purchase Crunchyroll merchandise and other goods.

Crunchyroll’s methods of user conversion:

• Anime, Manga, and Drama content.

• SEO strategies.

• News page.

• Mobile games.

COMPETITIVE ANALYSIS

• Funimation - Anime video streaming platform.

• Netflix - Leading video streaming platform.

• Hulu - Leading video streaming platform.

• Amazon Prime Video - Video streaming platform.

• Illegal Anime streaming platforms.

Data from my survey mentioned that 18.2% of users also use Funimation, 81.8% also use Netflix, 36.4% also use Hulu, and three of the responders also use YouTube, KissAnime, and Animelab.

IDENTIFYING WHAT PAGES TO REDESIGN

Landing page - Many users don't notice and utilize all of Crunchyroll's content. The optimal solution was to highlight Crunchyroll's navigation bar.

Shows Page - Users should have the freedom to make their searches as quick and painless as possible. Crunchyroll does have a filtration system for their search engine, but user feedback proved this confusing.

Queue List - User feedback mentioned that favorited Anime is listed on the last viewed episode. This sparks confusion because many Anime have multiple seasons.

I tested this with an Anime that currently has 5 seasons. I previewed a random episode from a random season and checked my queue list. It read as “Shokugeki no Soma — Episode 5 *title name*.” My immediate thought was “Episode 5 from which season?”

Anime Info Page - Feedback mentioned that info pages should have enlarged the video previews and make the layout visually engaging. Users should feel they are paying for high quality content.

WIREFRAME AND A/B TESTING

I jumped into wireframing and through multiple iterations, I conducted A/B testing on a few screens to my Instagram followers for feedback. Then I continued iterating screens that received higher ratings by my followers.

USABILITY TESTING

Check out the Figma Prototype

I took 4 Crunchyroll users and had them test my prototype.

100% OF THE TESTERS LIKED THE PROPOSED SOLUTIONS, ESPECIALLY THE CONTENT FILTERS I ADDED ON THE SHOWS AND WATCH LIST PAGES.

"I didn’t know they had a store."

“Easier to use than what Crunchyroll has right now.”

“Smoother. Feels like Hulu.”

“I would pay for Crunchyroll.”

MOVING FORWARD WITH THE DESIGN SOLUTIONS

Storytelling - By modernizing the layout, the landing page is simpler and more visually engaging.

I believe this approach would increase revenue and improve user conversion due to all Crunchyroll services being much more visible, along with clear call-to-actions.

Shows page - User feedback desired dark mode as many commented about eye strain. Finally, I simplified the search filter to optimize the search engine.

Watch List - Users have the freedom to create multiple playlists, where they can organize their content.

This helps those who happen to share their account with multiple people. Finally, I added playlist and genre filters for quick and easy navigation.

Show Info Page - A modernized layout gives hierarchy to a show's content. Progress is saved according to the last episode they watched which allows users to continue where they left off.

Responsive Design - Finally, I made a responsive layout as the current website is not responsive.

FINAL THOUGHTS

Since I was a one-man team for this redesign, I took this opportunity to put my full UX arsenal into practice to gather as much data from Crunchyroll and its users and use that information to drive the design solutions.

If I could go back, I would do more usability testing to maximize feedback on the proposed solutions.