Redesigning the Crunchyroll PS4 app
I have a Premium Account on Crunchyroll, a niche streaming service provider which primarily shows Japanese anime and simulcasts.
Due to the PlayStation being the main source of entertainment in the living room, I watch anime on Crunchyroll exclusively on the PS4 app. Having used it for a while, over time I got frustrated with the experience of this app and decided to redesign it to be more user-friendly.
The Approach
I followed the user-centered design process outlined in "The Elements of User Experience" by Jesse James Garrett, starting with outlining user needs and pain points, as well as product objectives. I kept in mind what other streaming platforms offered and what Crunchyroll was lacking.
The lack of discoverability was the most concerning. Nowadays, it is not enough to just provide the content, users need to be able to navigate and find what they are interested in. Currently, there isn't any effective way to search for anything in the Crunchyroll PS4 app. Users find content by browsing through all content alphabetically or by viewing recently updated titles. Crunchyroll offers over 900 anime and simulcast shows and without any way of filtering, browsing alphabetically gets frustrating quickly. There also aren't any categories other than "Anime" and "Simulcasts", no genres or anything else so that users can find content they prefer.
Through my research into the Crunchyroll brand and from talking to my friends who use the app, I crafted two different personas, Brandon and Lisa who illustrate further pain points, such as:
With all this in mind, I moved on to the Project Scope and the general Structure of the app.
Ideation
In order to formulate content requirements, I initially researched how apps on the TV are actually structured by reviewing both Amazon TV and Google Material Design guidelines.
I realized that not only were problems arising in the browsing of anime titles but also in the detail view of every show and even in the actual media player or "consumption view", as Material Design calls it and decided to tweak the current design for ease of use.
Content requirements included for example:
To explore different options for the general layout that would accommodate the requirements the best, I began sketching lo-fi wireframes on paper. I made 3 to 4 options for each screen and determined positives and negatives based on my previously defined content requirements.
The information architecture will be in a hierarchical structure with one sequential branch. The parent node is the Home screen from which the user can navigate into child nodes which are anime titles. From there, users can either enter consumption view by watching episodes or navigate to related content. Watching the last episode of a title takes the user back to the detail screen.
After defining the information architecture and picking the best elements from my paper wireframes that aligned with content requirements, I started creating the "skeleton" of the re-design in Figma.
I designed with overscan in mind, creating a "Safe zone": two outer frames, one for 5% and one for 10% of the full screen size. This is to ensure that the focused item and on-screen text are within the inner 90% of the user interface.
Browse View
I decided on a small navigation bar and removed Crunchyroll's current side bar. The current side bar takes away from the actual content on screen and doesn't have many options to begin with, so I felt it could be safely omitted.
The new navigation is more condensed and has a search bar, the options "New In", and "Your Account" which contains the user's subscription, personal info and settings.
I split the Browse View into a few categories, the first being "Keep Watching" and showing the users most recently watched content so they know exactly where they left off.
Directly underneath, they are getting relevant recommendations based on what the have previously watched.
Underneath that, there is space for pushing new releases and specific categories targeting the users interests.
Detail View
Inside the Detail View, the user has access to all episodes within the selected title with a separate category that contains recommendations to the user.
I added a big banner at the very top of the page showing the anime's title, key art, as well as average rating. The average rating is something users can see on Crunchyroll's webpage but not anywhere in their other apps.
Each episode has a summary. This is something I kept from Crunchyroll's current design as it's informative and practical if the user watches multiple series - it can help getting back into the series should they have forgotten where they left off.
Consumption View
Selecting an episode opens the video player where the user can watch the episode. As per Material Design, I put the Play button in the center of the transport controls where it was prominently featured. Since any changes to the settings like subtitles would be made under the user settings, there aren't secondary actions in the classical sense but a legend explaining the primary actions. Due to the nature of the Crunchyroll app, settings that can be seen in other streaming providers or video players such as Netflix or YouTube, all content on Crunchyroll is in Japanese and subtitles are automatically shown in the language of the user's PlayStation. If the user wants to change this, they would do so for all titles.
Search & Search Results
As previously mentioned, Discoverability is a huge issue. The search view is quite simple and modelled after the PS4 native controls, using their native keyboard.
Under the search bar are automatic suggestions for the user — this is especially useful since typing with a controller is quite tedious and anything that can speed up this process is helpful to the user.
Search results will be presented in the same layout as Browse and Detail view for consistency.
The Surface Plane
With the skeleton in place, it was time to move on to the "Surface Plane" where content, functionality and aethetics come together.
However, before even jumping into high fidelity, I thought about Crunchyroll's branding. The brand's main colors are white, orange and dark grey, reflected by their logo, website and their mascot Hime.
Hime is central to Crunchyroll's marketing. According to Crunchyroll, she [is] "emphasizing both the origins of Crunchyroll's media and its dedication to using the most modern technology" (Source).
However, Crunchyroll's current PS4 app looks a little dated – 90% of their target audience is aged between 13 and 34 and grew up with the internet and is technology-savvy, so a new, fresher look is needed.
I didn't want to make the entire app white since that might compromise legibility – people generally have an easier time reading light text on a dark background – and I also didn't want to make orange the main color since saturated, warm colors bleed more easily on a TV and could be distracting.
I initially created a dark and a light version but didn't feel like either of them were quite right, the white one especially could be easily confused for Nickelodeon since they have similar brand colors.
Results
I ended up taking Crunchyroll's 3 main colors and creating an UI that is neutral-toned, leaning slightly warm. Orange is a very energetic color and I did not want to overuse it and give the app an infantile look.
Dark grey with white text with a prominent text shadow is legible even from 10 feet away. I used orange accents to bring the brand color in, thus creating a minimal 3 color palette with a 60:30:10 ratio. This minimal color scheme suits this design as it does not compete with the imagery that will be used on thumbnails since a lot of anime use bright colors.
Learnings
I ended up showing this new design to a few friends who generally responded quite positively to it and said they wished the actual Crunchyroll app had the features I designed. Creating this design gave me the opportunity to create something of my own from the ground up and I enjoyed exploring the Crunchyroll brand, especially since it covers a niche I am very familiar with myself.← Back to Portfolio Overview