Case Study | Personal Project
Crunchyroll’s Playstation 5 App
Crunchyroll is an anime streaming service with over 2 million users, and mobile, web, and console apps.
Scope: Interface Re-design to be console specific and user friendly.
Project Type: April to May 2021
Role: Lead UX Designer
Tools: Pen to Paper Sketches, Figma
Crunchyroll, an anime exclusive streaming service, has many ways to watch their content. One way many users access shows is through their PlayStation 5 consoles. The Crunchyroll app released to the console on November 2020 and with it some user experience and interface problems.
Being a personal user of the Crunchyroll app myself, I was quick to discover some of the most glaring issues within the app. With the app, there was often noticeable hinderencess while navigating, understanding, and watching shows.
Before I could jump into creating any solutions to existing problems, I first needed to be informed of the specifics. I conducted an audit of the app that consisted of myself and two other users.
The first being and avid anime fan and very frequent user of the app.
The second being a newbie into the world of anime. Someone who hasn’t used the app and has only seen a small number of shows.
I requested each user navigate through Crunchyroll’s PlayStation 5 app and see what were the worst and best parts of the app. What could make their experience better. I found the top areas of concern to be: The Landing Screen, The Home Screen Navigation, and Watching a Show.
Crunchyroll landing screen showcasing the show “Jujutsu Kaisen”.
The current landing screen often depicts the current show that Crunchyroll is promoting at that time. Because of this, shows with often be on rotation which can create some problems.
The current layout takes the show’s poster and blurs it into the background and then layers over the whole poster and show information. Depending on the show, vital text gets lost as it often is too small with too many colors. User’s often said it felt chaotic.
Crunchyroll landing screen showcasing the show “Zombie Land Saga”.
With some shows like Jujutsu Kaisen, all text is readable. But with others, like Zombie Land Saga, the logo clashes with the show description.
After Scrolling down from the landing screen, users are met with all types of shows and categories to scroll through and explore. There were a couple of issues that users experienced while navigating this part of the app.
Each section of show is broken up into different categories, not unlike most other streaming services today. However, Crunchyroll handles their categories a bit differently than most streaming services. Instead of having categories such as “drama”, “horror”, “action”, etc. They have quirky category names or phrases based on jokes within the anime community. Things such as, “Mecha Madness”, “HELP! I'm surrounded by beautiful men!”, or “ Who let the dogs out?”.
For the most avid anime fan, most of Crunchyroll’s categories aren’t confusing as these users are often “in” on the joke or terminology that is being used. But for a new anime fan, they often had no idea what the terms were being used. This caused for whole sections to be overlooked due to confusion.
While scrolling through the main home page of the app, you will sometimes come across large screen breaks that are used to highlight and showcase a single show. Users felt as though these breaks weren’t necessary and interrupted the flow of scrolling. And they often exclaimed that these breaks felt more of an ad than a showcase.
Crunchyroll show categories examples
Show break example
There are two things that users found needed focus when watching a show. The first being when you first click into a show and the second being the actual watching of a show.
When an user first clicks into a show to get ready to watch or even just read what that show is about they are met with a lot of information upfront.
Similarly to the landing page, there is a blurred show poster background and all the info on top. Just as with the landing page, depending on what show and poster it is the readability can change from being easy to very hard. As well as making the overall layout feel cluttered and claustrophobic. Users also felt the over hierarchy lacked visual clarity. They layout didn’t catch the users attention nor give any extra information as to what any given show was about.
When actually watching a show, the controller of the PS5 wasn’t utilized at all. The biggest problem everyone had was you couldn’t use the bumpers to toggle through previous and next episodes. This was a feature in the PS4 so by force of habit, all of us tried to use the bumpers to skip to the next episode. You also couldn’t use the back triggers to scrub through scenes and get to precise times. This culminated into a feeling of overall clunkiness in the interface and like there hadn’t been a lot of thought of how to integrate the PS5 controller into the app design.
Deliver designs that are easy for users to navigate, no matter if they are long time fans or new to the platform. Bring in elements from the website app. Integrate PS5 features into the design. Add some more personality into the app.
After conducting and audit and hearing from what other users felt about the app’s interface I had some goals in mind for how to move forward with the redesign. Overall, the app felt solid. It had a clear sense of branding and clear personality. However, the problems encountered in the audit showcased how a few small design problems can lead to clunky and cluttered interface.
The first goal was to create a solid landing screen so when you first open the pap you know exactly what is going on.
Secondly, the home page needed to be reorganized to allow for easy flow and the categories renamed to make sense for all users.
Finally, adjust how you watch a show and all for integration of the PS5 controller to the fullest.
Taking a pen to paper I could create a series of initial sketches to hone in the final designs. Along with brainstorming different categories that kept with the branding, as well as being user friendly.
The landing screen was reworked significantly so that it now fits with the branding that Crunchyroll has. I cleaned up the layout to inform the user that they did infact just open up the Crunchyroll app. You now see the Crunchyroll mascot which leans into their branding which is one of fun and colorful. I decided to lean further into the Japanese theme of the branding by including Katakana (Japanese lettering) that reads “Crunchyroll”
A clean, modern, but yet fun landing screen creates clear understanding to a user that the app will be easy to use.
The categories were reworked and condensed down. There are now 10 categories including a “recommended for you” category. This gives enough categories for any user to look through popular genres in anime, but not too many where they become too niche for even the most dedicated anime fan to recognize.
Even though the categories have been simplified into the bigger genres in anime, many new anime fans will not recognize what these words mean.
To fix that without adding long descriptions that clutter up the screen, I added a description box that will pop up when you hit R3 on the PS5 controller. This allows for users to better understand the genre and why the shows are grouped together, but still keep the overall design and hierarchy to the layout.
Small changes have been made to when you watch a show.
Tags have been added to indicate what show you are watching. Things like, fantasy, adventure, mystery, school life, etc.
As well as show tags, content warning tags have been added to allow for more accessibility.
The background blurred show image has been removed to keep design clean. Just like with other areas of the app, the Japanese title of the show is put in the background giving some layered interest and leaning into the branding.
SI have created different options for UI icons for different situations when you are a logged in user.
Every UI icon in the top of the screen has been bumped down so nothing feels like it is falling off the screen.
R1 and L2 bumper icons have been added as well as previous and next episodes. This solves the issue of not being able to scroll between episodes in general and with the PS5 bumpers.
It is important to take the time to learn where your app is going to be located so that the designs can reflect the small but unique details that the location can bring.
The use of Japanese lettering behind each category gives an easter egg for the most dedicated of fans.