James Phuong logo
back arrowback arrow white
Back

Crunchyroll

World's largest collection of anime.

Role

UX Designer

User Research, Product thinking
Information Architecture, Interaction
& Visual Design, Prototype, Testing

Timeline

Sep - Dec 2021

About

Crunchyroll is an anime streaming service that allows the users to browse a large library of content and watch their favorite anime series or movies in one place. Because there is so much content to browse through, sorting and filtering through the large database needs to be made more simple to get the results faster.

CHALLENGES

Redesign a vast anime library by simplifying sorting and filtering for a seamless user experience when browsing.

I wanted to create a system that made it easier for users to find the anime they are searching for. Adding the functionality of filtering and sorting through a large library of anime series and movies would help narrow down the results for the users to browse more efficiently. Whether it is to find the latest and greatest anime series to watch, or rediscovering an old favorite to watch again, the aim is to make it easier for users navigating within the app.

COMPETITIVE ANALYSIS

As a means to build a concise and solid foundation for Crunchyroll, I had to venture out and see what the prominent video streaming applications were already doing and what user goals they were not reaching. I gathered several aspects of video streaming users identified as vital and pinpointed which ones Crunchyroll could include to increase their user outreach. I found that none of the three main competitors listed offered watch parties or live group viewings of new TV shows or movies for users. This will give me the opportunity to capitalize on what's currently missing from the competitors.

To have some restrictions in place, I asked myself...
HOW MIGHT WE

...Create a simple way to filter and sort through a large catalog of series?

...Incorporate a feature to watch with others simultaneously?

...Provide better suggestions on what to watch based on user preferences?

INFORMATION ARCHITECTURE

After doing a deep dive in researching competitors, I moved forward with creating a task flow to primarily focus on using the Crunchyroll app to search for desired series to watch using an intuitive search feature before proceeding into starting a watch party.

SKETCHES

I wanted to focus on a specific user flow of selecting a Anime TV series/movie in order to start watching and form a group watch party amongst friends or family. It should be as simple a process as possible for the user to go from finding what they want to view to watching it they way they wanted to.

WIREFRAME

After going through my sketches, synthesizing my research findings and creating a task flow in order to envision the user’s journey, I worked on quickly creating a user-friendly, preliminary set of mid fidelity wireframes in order to get the flow tested early on by target users in order to see what aspects of the design are viable to move forward with.

FLOWCHART

I recognized the need to create a clear flowchart to visualize and understand how users navigate through the platform when performing the specific task of searching for a series or movie prior to starting a watch party. By transforming my wireframes into a flowchart, I gained valuable insights into user pathways, enabling me to improve the overall user experience. This process serves as a solid foundation in preparing to create a prototype that is ready for user testing.

FINAL DESIGN

After I went through the inputs I received from testing, I decided to move forward with redesigning and rearranging the flow slightly to better accommodate the users.

Onboarding

I aimed to enhance the user experience by incorporating a subtle animation on the splash page, leading seamlessly into the engaging onboarding screens. I created this flow in hopes of creating a visually captivating introduction, capturing the user's attention and setting the tone for their journey within the app.

Category Selections

One of the key objectives is to provide users with a personalized and tailored experience right from the beginning of their journey within the app. In order to achieve this, I implemented a feature that offers users a curated list of recommendations based on their favorite genres. This personalized list evolves as users explore the app and can be updated at any time to ensure an ongoing customized experience.

Search Anime Database

The primary focus is to create an exciting and immersive experience for users when it comes to discovering their next great anime to watch. We understand that users may conduct searches for anime shows or movies at different times, ranging from a few days to a few months ahead of time. To enhance the user experience, we have implemented a feature that makes it easier to revisit past searches and ensure a seamless and enjoyable journey throughout the app.

Series Information Page

I recognized the inconvenience of having to rely on third-party websites to access miscellaneous details like voice actors and soundtrack lists. To enhance the user experience, we have identified an opportunity to integrate this information within the app, providing users with a comprehensive and convenient source of information.

Watch Party

My focus here is to make it easier for users to watch shows together with their friends in real-time, eliminating the need for manual synchronization of play and pause actions. I recognize the importance of shared viewing experiences and have identified an opportunity to enhance this aspect by introducing features that enable seamless and synchronized playback among friends.

Collapsible Comments Section

I see the importance of providing users the ability to share their thoughts and emotions with their friends while experiencing amazing action scenes, heartfelt moments, or significant romantic gestures within a show. To enhance this social aspect, I implemented a commenting functionality that allows users to express themselves and shout out to their friends about these memorable moments in real time.

Flix
Previous arrow
Previous
back arrow crunchyrollback arrow white
Back