Why redesigning a mobile app? Because there is always something to improve.
You may think that the most popular apps are good as they are. But when you think about it, users are being offered a unique solution (the app) to many different problems (users’ needs and expectations) and many different types of users (casual to hard core users). What if there could always be something to improve?
As part of the Ironhack’s UX/UI design bootcamp, I have been assigned a third project. This time it was an individual project about redesigning an existing mobile app. The objective was to focus on the information architecture and the visual rendering. I must say that I immediately felt excited about this new challenge and the perspective that it could be achieved in only 4 days.
Figuring which application to choose was not an easy task. As the final evaluation would be conducted by a jury of designers through a design critique exercise, we had to choose a popular app, known and used by at least 5 people within our cohort. This requirement was meant to prevent having to introduce the app and the users’ frustrations, if any.
I chose crunchyroll for different reasons. First, it is an app I use on a regular basis and I already knew that some of the frustrations I felt were shared by many other users. Secondly, some of these frustrations were not specific to crunchyroll but, in my opinion, common to many streaming platforms.
For those of you who are not familiar with crunchyroll, it is a streaming platform dedicated to anime. Outside of Japan, anime describes animation produced in Japan, where in Japan it is related to all styles and origins of animation. Anyway, If you have ever heard of Dragon Ball, Naruto, One Piece, Hayao Miyazaki, you already know what anime is. And if you think only a minority is interested by anime, here are some facts to be considered:
- 100 million homes worldwide have watched at least 1 anime title on Netflix in 2020 (source: Netflix 2021) ;
- More than 2 billion people watched anime in 2021 (source: Ampere Analysis 2022) ;
- Over 50% of Generation Z watches anime, over 40% of Millennials and 30% of Generation X (source : MorningConsult).
Where some sources consider that almost 2 billion people worldwide listen to rap music, more than 2 billion people worldwide watch anime (source: IFPI and Ampere). Let us face it: it is mainstream.
So far we had started our project with a given problem or question to be solved. For this assignment, we had to define the problem ourselves. So first things first. What about the competition? Which choices did they make regarding their visual identity? To answer those questions I ran a visual competitive analysis and considered the top 5 competitors of crunchyroll (mostly in France): Netflix, Hulu, Disney+, Amazon prime video, and ADN. There are other platforms that could have also been considered but most of them require a subscription plan and are only available in restricted areas. For that reason I could not go deep in the analysis for Hulu but having found a lot of articles mentioning the platform as a top ranked player (not available in France) I wanted at least to make an initial opinion. My findings were:
- The platforms are only available in dark mode ;
- They use a primary color (derivated from their logo/brand) and shades of grey, except for crunchyroll that uses a secondary color;
- They all use red, green or blue as a primary color, with the exception of crunchyroll which uses orange (close to red) ;
- They all display the content as cards and lists of cards.
I figured that those choices were motivated by the necessity to remain as neutral as possible to have a good contrast with the content which is mostly visual and colorful. Additionally, the card system can be considered as a design practice given it has been used for content streaming for many years, and as far as I remember since the end of 1990's.
A first idea then popped in my head. If you consider players such as Google, Slack, Microsoft, ebay, etc. they all use red, green, blue and yellow as part of their identity. So what about yellow for crunchyroll? In an industry where concentration of businesses is still at work, crunchyroll could be seen as the wild horse in this highly competitive market?
But could yellow be a color that has meaning to the anime community. I took a deeper look at the question and came with following result.
As you can notice, yellow has meaning:
- Fire and electricity (raw energy) are commonly use in shonen anime (litteraly “boys” in japanese, i.e. anime for boys) ;
- A lot of primary characters have blond hair, even red, as shonen heroes often have a history of been excluded, miss one of their parent if not both, possess rare skills or powers ;
- If you only consider the top ranked anime, the main character (or at least one of the main characters) has yellow hair: Naruto, Son Goku in Super Saiyan mode, Zenitsu from Demon Slayer, one for all (Boku no Hero Academia), etc.
So what about black and yellow? It would not be a huge shift for the actual crunchyroll’s brand identity but it could be a simple way to reinforce their position as a challenger.
From the research I conducted I identified 5 words that would sum it all up:
- Energy: yellow by essence (fire, electricity, the sun, etc.), warm, shining, it feels like raw power, like a shonen hero discovering their power ;
- Vitamin: C vitamin, boost of energy, positive feeling, like an anime character full of vitality ;
- Dynamic: always on the move, with a lot of action, speediness, curves ;
- Sport: sport car, racing, sportswear ;
- Street: NYC cab, NYC sub, yellow lines on streets, etc.
At this point I was already convinced, had collected images inspired by those 5 words and composed a moodboard that would be the foundation of a revised brand identity.
From this moodboard I started working on a Style Tiles and a Style Guide using the 5 mentioned keywords. I defined some guiding principles:
- Setting up a warm yellow, a warm black and 3 shades of grey to preserve a good contrast and the idea of simplicity and neutrality ;
- An additional typography to convey the above stated values which could translate in modernity, angularity and sans serif: Josefin Sans ;
- A minimalist and angular iconography for the same reasons ;
- A minimalist flat design to avoid adding unnecessary presence to the UI.
While working on a new / revised visual identity, I conducted a heuristic evaluation on the existing crunchyroll mobile application (Android version). I intended to identify UI problems which my redesign could solve. I did this evaluation it in 2 stages:
Stage 1: get a first impression
- the information hierarchy could be more viewer-oriented: resume my last episode, watch the next episode of my favorite series, etc. ;
- the platform’s recommendations seem subjective: what are the criteria used? Are they based on ratings? Number of views? A third-party ranking? ;
- The navigation bar is only available on the home screen, and sometimes there is no way to easily go back ;
- The nature of the content is not always obvious: is it an episode or a season? Or even a series?
Stage 2: conduct a heuristic evaluation
- The CTA (Call To Action) is often positioned at the bottom of the page ;
- Crunchyroll chose to consider each available dubbed version as an additional season ; therefore some series have dozens of seasons because they have multiple available dubbings ; I can only imagine how frustrating it could be for users ;
- Ratings are not really featured, as well as comments ;
- When a series has a large number of episodes, you have to scroll down a list that could contain 20, 30 even 50 episodes (the list of episodes being displayed one episode per row) and there is no easy way to go back to the top ;
- Some user preferences are not saved through your navigation (ex: sorting order) ;
From this point on I decided to define my redesign objectives as following:
- Revisiting the information hierarchy for a better viewing experience ;
- Making a clear distinction between series and episodes ;
- Improving the navigation: provide a 1-click view experience, simplify the flow from top to bottom and from the home page to the episode page.
After some initial sketches to test my ideas on paper, I then redesigned 3 screens (all anime visuals are copyrighted by crunchyroll in FR).
The Home Page
Crunchyroll (LEFT part)
- A promoted anime
- A selection from crunchyroll
- My series
My redesign (RIGHT part)
- Resuming my last episode / start my next episode (from my previously watch series)
- Resuming my other series
- New episodes available
The Series Page
Crunchyroll (LEFT part)
- An illustration of the series
- Infos
- The list of episodes (including the first CTA if you don not consider the “more info” link)
My redesign (RIGHT part)
- (auto-launch) resume my last episode / start the next episode
- Infos + 2nd and same CTA
- Next episodes in a more condensed view
- Recommendations
The Episode Page
Crunchyroll (LEFT part)
- The player
- Infos
- Next episode
- A lot of space
My redesign (RIGHT part)
- (auto-launch) resuming my last episode / start the next episode
More controls in the player - Infos + 2nd and same CTA
- First comments (expanded)
- Recommendations
Focus on major changes
As you can notice on the above screenshots, I have tried to simplify the access to seasons and languages.
When viewers have already started watching a series, I suggested displaying the current or next episode (if available). Many options could be considered: displaying the episode title, the number of available comments, removing the more options icon (bottom right), etc.
Above, I have tried to keep the same format for a series and add some additional information when new episodes are available or its rating when the series is positionned in a ranking list.
For the above zoom card, instead of having twice the same picture, I proposed to give a larger space to the visual and display the card more like a critics website would, especially by adding the rating of the series.
Above, I changed the “most popular” list to add an actual numbered ranking to it (practice taken from Netflix). I think it should provide reinsurance for viewers: those series are great series to watch.
Above, I chose to replace the “resume the episode” card by a card with the same width than all others cards in my redesign in order to display more of them in the same width and be more consistent.
Prototyping the redesign
I had the opportunity to present my prototype in 5 minutes to 10 of my peers and collect their critique during the next 15 minutes. It appeared to be a great exercise to:
- Gathering some feedbacks: during the entire work I had been working on my side without any kind of additional inputs or comments (especially from users) ;
- Getting positive and constructive critiques: made of peers, the jury was benevolent and did not try to point out potential flaws or mistakes but rather leads to improve and enhance my work ;
- State facts: feedbacks had to be motivated by actual facts such as design patterns, known behaviours, actual studies, etc.
- Providing a fresh look on my work: being focused on my project during the past 4 days I progressively lost any kind of objectivity on the final result ; fresh looks from peers were therefore very precious.
First, I had some great acknowledgements from my peers, which is always welcomed, and then some great leads to be explored if I had have some time to improve my work.
Final Wrap-up
Trust the process as they say. And it has been proven right again. If the purpose is to improve an existing experience and not to start anything from scratch, 4 days are enough to come up with a first proposition which could be tested by actual users.
Additionally, I learned that there is no right and wrong in UX. There are only good experiences if users say so.
The final judge of my work can only be the users themselves. Whether I like or not my work, only user tests could determine if my redesign provides additional value to the actual experience.
