Crunchyroll
Manga

Crunchyroll
Manga

2023

Branding

UX/UI

Description

Crunchyroll Manga est une application permettant de lire des mangas en ligne, offrant une large sélection de titres populaires dans divers genres.

Crunchyroll Manga est une application permettant de lire des mangas en ligne, offrant une large sélection de titres populaires dans divers genres.

Visuel présentant différents écrans de l'application Crunchyroll Manga
Visuel présentant différents écrans de l'application Crunchyroll Manga
Visuel présentant différents écrans de l'application Crunchyroll Manga

Les problèmes de Crunchyroll Manga

Crunchyroll propose trois applications : une pour explorer un catalogue d'animés, une pour lire des mangas numériques et une autre pour rester à jour avec les actualités de l'univers manga.
Le défi majeur réside dans leur manque d'harmonie visuelle, chacune ayant son propre style de design

Les problèmes de Crunchyroll Manga

Crunchyroll propose trois applications : une pour explorer un catalogue d'animés, une pour lire des mangas numériques et une autre pour rester à jour avec les actualités de l'univers manga.
Le défi majeur réside dans leur manque d'harmonie visuelle, chacune ayant son propre style de design

Les problèmes de Crunchyroll Manga

Crunchyroll propose trois applications : une pour explorer un catalogue d'animés, une pour lire des mangas numériques et une autre pour rester à jour avec les actualités de l'univers manga.
Le défi majeur réside dans leur manque d'harmonie visuelle, chacune ayant son propre style de design

Design de base de l'application Crunchyroll Manga
Design de base de l'application Crunchyroll Manga
Design de base de l'application Crunchyroll Manga
Design de base de l'application Crunchyroll Animes
Design de base de l'application Crunchyroll Animes
Design de base de l'application Crunchyroll Animes
Design de base de l'application Crunchyroll News
Design de base de l'application Crunchyroll News
Design de base de l'application Crunchyroll News

Une navigation pensée pour les utilisateurs

La création de nos wireframes permettent de guider notre conception de l'interface pour assurer une navigation fluide et intuitive.
Passer du temps sur ce processus permet de nous focaliser sur l'efficacité de nos textes et de notre arborescence, sans nous soucier des détails du design de l'application

Une navigation pensée pour les utilisateurs

La création de nos wireframes permettent de guider notre conception de l'interface pour assurer une navigation fluide et intuitive.
Passer du temps sur ce processus permet de nous focaliser sur l'efficacité de nos textes et de notre arborescence, sans nous soucier des détails du design de l'application

Une navigation pensée pour les utilisateurs

La création de nos wireframes permettent de guider notre conception de l'interface pour assurer une navigation fluide et intuitive.
Passer du temps sur ce processus permet de nous focaliser sur l'efficacité de nos textes et de notre arborescence, sans nous soucier des détails du design de l'application

Wireframes de l'application Crunchyroll Manga
Wireframes de l'application Crunchyroll Manga
Wireframes de l'application Crunchyroll Manga

Une Nouvelle Identité

Nous avons conservé le logo et les couleurs emblématiques de Crunchyroll, en les ajustants pour un meilleur contraste. Nous avons créé des icônes uniques pour renforcer notre identité visuelle. Enfin, en adoptant le tutoiement, nous souhaitons établir une relation de proximité avec nos utilisateurs

Une Nouvelle Identité

Nous avons conservé le logo et les couleurs emblématiques de Crunchyroll, en les ajustants pour un meilleur contraste. Nous avons créé des icônes uniques pour renforcer notre identité visuelle. Enfin, en adoptant le tutoiement, nous souhaitons établir une relation de proximité avec nos utilisateurs

Une Nouvelle Identité

Nous avons conservé le logo et les couleurs emblématiques de Crunchyroll, en les ajustants pour un meilleur contraste. Nous avons créé des icônes uniques pour renforcer notre identité visuelle. Enfin, en adoptant le tutoiement, nous souhaitons établir une relation de proximité avec nos utilisateurs

Logo Crunchyroll
Logo Crunchyroll
Logo Crunchyroll

Kanit & Karla

4 épaisseurs, 21 styles

Aa

Aa

Regular

Italic

Bold

Bold Italic

#D0490A

#D0490A

#D0490A

Primary-600

Primary-600

#F9711D

#F9711D

#F9711D

Primary-500

Primary-500

#FA9251

#FA9251

Primary-400

#AE4505

#AE4505

#AE4505

Primary-700

Primary-700

#080402

#080402

#080402

Grey-900

Grey-900

#232120

#232120

#232120

Grey-800

Grey-800

#3F332E

#3F332E

#3F332E

Grey-700

Grey-700

Icônes créées pour le redesign de Crunchyroll
Icônes créées pour le redesign de Crunchyroll

Design de l'application

Cette section a été développée ultérieurement par rapport au reste du site. L'objectif de la refonte de ce parcours était de moderniser les éléments graphiques, d'assurer une navigation plus cohérente et fluide, ainsi que d'améliorer la compatibilité responsive

Design de l'application

Cette section a été développée ultérieurement par rapport au reste du site. L'objectif de la refonte de ce parcours était de moderniser les éléments graphiques, d'assurer une navigation plus cohérente et fluide, ainsi que d'améliorer la compatibilité responsive

Design de l'application

Cette section a été développée ultérieurement par rapport au reste du site. L'objectif de la refonte de ce parcours était de moderniser les éléments graphiques, d'assurer une navigation plus cohérente et fluide, ainsi que d'améliorer la compatibilité responsive

Page d'accueil du redesign de Crunchyroll Manga
Page d'accueil du redesign de Crunchyroll Manga
Page d'accueil du redesign de Crunchyroll Manga
Page connexion du redesign de Crunchyroll Manga
Première page de l'onboarding du redesign de Crunchyroll Manga
Page de l'abonnement du redesign de Crunchyroll Manga
Page connexion du redesign de Crunchyroll Manga
Première page de l'onboarding du redesign de Crunchyroll Manga
Page connexion du redesign de Crunchyroll Manga
Première page de l'onboarding du redesign de Crunchyroll Manga
Page de l'abonnement du redesign de Crunchyroll Manga
Nouvelle page recherche de l'application, avec des catégories et une barre de recherche
Page profil de l'application
Page profil prévu pour les maisons d'éditions
Nouvelle page recherche de l'application, avec des catégories et une barre de recherche
Page profil de l'application
Nouvelle page recherche de l'application, avec des catégories et une barre de recherche
Page profil de l'application
Page profil prévu pour les maisons d'éditions
Page présentant nos mangas ainsi que l'avancement de chacun d'eux
Page présentant les prochaines sorties de nos mangas
Page affichée lorsqu'il n'y a pas encore de manga dans notre liste, avec un bouton permettant d'en ajouter rapidement
Page présentant nos mangas ainsi que l'avancement de chacun d'eux
Page présentant les prochaines sorties de nos mangas
Page présentant nos mangas ainsi que l'avancement de chacun d'eux
Page présentant les prochaines sorties de nos mangas
Page affichée lorsqu'il n'y a pas encore de manga dans notre liste, avec un bouton permettant d'en ajouter rapidement
Page affichant les mangas téléchargés hors ligne, permettant de les lire dans toutes les situations
Page affichée lorsqu'il n'y a pas encore de manga dans notre liste hors-ligne, avec un bouton permettant d'en ajouter rapidement
Page hors-ligne affichée pour les personnes non abonnées à l'application
Page affichant les mangas téléchargés hors ligne, permettant de les lire dans toutes les situations
Page affichée lorsqu'il n'y a pas encore de manga dans notre liste hors-ligne, avec un bouton permettant d'en ajouter rapidement
Page affichant les mangas téléchargés hors ligne, permettant de les lire dans toutes les situations
Page affichée lorsqu'il n'y a pas encore de manga dans notre liste hors-ligne, avec un bouton permettant d'en ajouter rapidement
Page hors-ligne affichée pour les personnes non abonnées à l'application
Page affichant les chapitres restants à lire d'un manga précis
Page affichant les informations importantes d'un manga précis
Page de lecture d'un manga, avec des boutons permettant de modifier la méthode de lecture
Page affichant les chapitres restants à lire d'un manga précis
Page affichant les informations importantes d'un manga précis
Page affichant les chapitres restants à lire d'un manga précis
Page affichant les informations importantes d'un manga précis
Page de lecture d'un manga, avec des boutons permettant de modifier la méthode de lecture
Page de profil, regroupant nos mangas lus ainsi que nos mangas favoris
Page montrant comment créer une nouvelle liste pour regrouper différents mangas selon nos goûts
Page affichant les filtres permettant de trier et retrouver nos mangas lus
Page de profil, regroupant nos mangas lus ainsi que nos mangas favoris
Page montrant comment créer une nouvelle liste pour regrouper différents mangas selon nos goûts
Page de profil, regroupant nos mangas lus ainsi que nos mangas favoris
Page montrant comment créer une nouvelle liste pour regrouper différents mangas selon nos goûts
Page affichant les filtres permettant de trier et retrouver nos mangas lus

Création d’un design system

La création d’un design system permet à Crunchyroll d'uniformiser toutes ses applications.
Le nom "Sensei" fait directement référence au professeur et aux enseignements de celui-ci dans les mangas et animés.

Création d’un design system

La création d’un design system permet à Crunchyroll d'uniformiser toutes ses applications.
Le nom "Sensei" fait directement référence au professeur et aux enseignements de celui-ci dans les mangas et animés.

Création d’un design system

La création d’un design system permet à Crunchyroll d'uniformiser toutes ses applications.
Le nom "Sensei" fait directement référence au professeur et aux enseignements de celui-ci dans les mangas et animés.

Page d'accueil du design system de Crunchyroll, permettant une redirection vers différentes pages
Page d'accueil du design system de Crunchyroll, permettant une redirection vers différentes pages
Page d'accueil du design system de Crunchyroll, permettant une redirection vers différentes pages
Page montrant un exemple de composant présent dans ce design system, avec un aperçu du composant, son utilisation et le code React
Page montrant un exemple de composant présent dans ce design system, avec un aperçu du composant, son utilisation et le code React
Page montrant un exemple de composant présent dans ce design system, avec un aperçu du composant, son utilisation et le code React
Page présentant les fondations du design system, avec l'exemple des différentes tailles de typographies et leurs explications
Page présentant les fondations du design system, avec l'exemple des différentes tailles de typographies et leurs explications
Page présentant les fondations du design system, avec l'exemple des différentes tailles de typographies et leurs explications
Page présentant les fondations du design system, avec l'exemple de l'utilisation des couleurs de Crunchyroll
Page présentant les fondations du design system, avec l'exemple de l'utilisation des couleurs de Crunchyroll
Page présentant les fondations du design system, avec l'exemple de l'utilisation des couleurs de Crunchyroll

La création du design system nous a permis de revoir la cohérence globale de toutes les applications Crunchyroll, afin d'uniformiser et de mieux identifier la marque dans son ensemble

Ancien Design

Design actuel de l'application Crunchyroll Animes
Design actuel de l'application Crunchyroll Animes
Design actuel de l'application Crunchyroll Animes

Nouveau Design

Redesign fictif de l'application Crunchyroll Animes
Redesign fictif de l'application Crunchyroll Animes
Redesign fictif de l'application Crunchyroll Animes

Ancien Design

Design actuel de l'application Crunchyroll Manga
Design actuel de l'application Crunchyroll Manga
Design actuel de l'application Crunchyroll Manga

Nouveau Design

Redesign fictif de l'application Crunchyroll Manga
Redesign fictif de l'application Crunchyroll Manga
Redesign fictif de l'application Crunchyroll Manga

Ancien Design

Design actuel de l'application Crunchyroll News
Design actuel de l'application Crunchyroll News
Design actuel de l'application Crunchyroll News

Nouveau Design

Redesign fictif de l'application Crunchyroll News
Redesign fictif de l'application Crunchyroll News
Redesign fictif de l'application Crunchyroll News