Gurney Designz
GRNY_Crunchyroll.jpg

Crunchyroll

Crunchyroll_Hero_03.jpg
 
crunchyroll logo.png

crunchyroll is the first stop for any anime fan.

As a loyal member, I use Crunchyroll’s mobile app on a consistent basis but users are the ones doing most of the work. For the app redesign, the goal was to deliver a more immersive experience by providing recommendations, reviews, and even the ability to download anime for premium members. The changes give more to the user by introducing anime in a compelling way, expanding Crunchyroll's online community, and being able to take their anime on the go.

Involvement: UX
Skills: Competitive analysis, user stories, flow charts, low-fidelity wireframes, interactive prototyping, usability testing

 

Old Experience

Crunchyroll_OldHomeApp
Crunchyroll_OldSortApp
Crunchyroll_OldDetailApp

UX and Content Strategy

note-book-mockup-scene-03.png

Onboarding

Wouldn't it be great if your recommendations were even more accurate on what you actually enjoyed? That is exactly what the new onboarding sets up, the app further tailors your viewing experience by bringing more of your preferred genres across your eyes.

 
IMG_4184-1.JPG
IMG_4185-1.JPG
IMG_4186-1.JPG
 
Browsing just got a whole lot easier.
Crunchyroll_BrowseSketch.jpg

Improved Browsing

The redesigned browsing page now has quick links for Popular, New Releases, Discover, and Top Rated shows to help guide users in finding their next favorite anime.

Genres
To better communicate the different genres, icons were used to give the app a lively personality while not distracting the user from their prime function.

 
"This playback addition saves time and presents a taste for what the anime has to offer."
Crunchy_DiscoverApp-3.jpg

Discover new anime

The biggest game changer to the redesign is the addition of the Discover page. The user is presented with curated anime as a result of their preferences and browsing history.

Auto playback
The videos will automatically play one by one as the user scrolls down the page . This playback addition saves time and presents a taste for what the anime has to offer.

Add to que
After seeing the video clips, users can then add the anime series to their que as well as go to the detail page by clicking on the anime title.

 
"The "Download" to device button has been added exclusively for premium members to provide crystal clear anime to a paying audience on the go."
Crunchyroll_Detail_Display.jpg

Brand spanking new Show Detail

Gorgeous cover art is displayed front and center to add life to the page while highlighting prestigious awards the show has won.

Ratings
Ratings are introduced on the app level and are one of the first things the user sees on the page. To pair nicely with user ratings, Rotten Tomatoes ratings are included as well.

Download to device
The "Download" to device button has been added exclusively for premium members to provide crystal clear anime to a paying audience on the go.

 

Video Playback

"Upon first seeing this, the controls instantly feel like something more from a video game but that's not a bad thing..."
 

The common problem

The playback feature is the heart and soul of any video based app but the current app's layout has a few problems. For many default video players, the timeline is centered and displayed at the lower part of the featured video. This placement seems logical but the usability is actually quite bothersome as neither thumbs can extend the full length of the timeline making the controls impractical.

A new solution

A different take on video playback is to actually separate the rewind/fast forward and play controls to the left and right thumbs. Upon first seeing this, the controls instantly look like something from a video game app but that's not a bad thing. The right play button is accompanied with the timeline which paired together makes for a more precise video navigation. With this layout, the user is able to jump through the timeline faster and doesn't need to perform any awkward thumb stretching for the desired action.


Final Execution & App demo

 
Crunchyroll_Splash_Mobile.jpg
Crunchyroll_SignIn_Mobile.jpg
Crunchyroll_Taste_Mobile.jpg
Crunchyroll_MenuApp
Crunchyroll_Browse_Mobile.jpg
 
Crunchy_DiscoverApp
Crunchyroll_Detail_Mobile.jpg
 
Crunchyroll_PlayBackApp.jpg