Redesign de l’app Netflix.
Challenge UI
Le projet
Premier vol en solitaire dans le cadre de ma formation Ironhack, avec un premier projet UI !
Le défi qui nous est proposé : sélectionner une application mobile connue, et proposer un redesign d’au moins 3 écrans, en passant par plusieurs étapes de réflexion et de recherche. Le tout en 5 jours, pas un de plus.
Pourquoi Netflix ?
Netflix, leader incontesté de la VOD, a progressivement pris sa place dans de nombreux foyers, partout dans le monde. Longtemps seule sur son trône, l’entreprise voit depuis quelques années émerger de sérieux concurrents.
Pour les abonnés de longue date, vous aurez sûrement constaté que les applications TV comme mobile ont très peu évolué, et j’ai souvent grogné en naviguant sur mon appli, avec cette impression de payer un abonnement à un mastodonte qui se repose un peu trop sur ses acquis.
Voilà pourquoi Netflix m’a semblé être un très bon sujet pour ce nouveau projet !
Et les heureuses candidates au redesign seront la page d’accueil, la page “Ma liste” et la page “Recherche”.
Avant toute chose, je commence par reproduire les pages sélectionnées sur Figma. L’exercice est assez long et fastidieux mais s’avèrera utile au moment du redesign, nous en reparlerons plus bas…
Analyse heuristique
Page “Ma Liste”
Difficile de faire plus simple : les séries et films ajoutés à la liste de l’utilisateur sont affichées en vrac sur la page, sans possibilité de trier ou filtrer les résultats.
Page “Recherche”
Recherche textuelle uniquement (il faut avoir en tête le nom exact de ce que l’on cherche) ;
Aucune possibilité de filtrer les résultats de recherche ;
Pas d’aide à la recherche proposée (pour suggérer des médias à un utilisateur qui chercherait par exemple une idée de série humoristique anglaise, récente et très bien notée par la communauté).
Partout dans l’application
Beaucoup de visuels (affiches de films / séries) ;
Rendu global très dense, un peu “fouillis” ;
Un choix de menu footer surprenant : accès rapide à la homepage et aux téléchargements (ok), ainsi qu’aux catégories “Nouveautés” et “Pour rire” (pourquoi ces catégories plutôt que d’autres ?) ;
Une palette de couleur trop franche : du noir brut pour le fond, du blanc pour les textes, du gris pour les boutons, et le rouge très primaire du logo par petites touches.
Page d’accueil
Un scroll très, très long ;
Un agencement des blocs médias qui varie de manière complètement aléatoire (parfois le bloc “Ma liste” n’arrivera qu’après un long scroll, parfois dès le premier écran) ;
Un manque de valorisation du contenu personnalisé (par exemple les blocs “Ma liste” ou “Reprendre [la lecture]”) ;
Pas de possibilité de customiser sa page d’accueil.
Note : on appellera “Bloc media” une catégorie de films et séries qu’on peut scroller horizontalement.
Ensuite, prenons le temps d’analyser l’existant pour évaluer l’étendue du chantier et identifier les axes d’amélioration. Grâce à une analyse heuristique pratiquée sur les 3 pages sélectionnées, voici les éléments essentiels qui en sont ressortis.
Benchmark
Intéressons-nous à présent à la concurrence. Quelles palettes de couleurs ont-ils choisies ? Comment ont-ils organisé et présenté leurs contenus ?
J’ai sélectionné 2 concurrents directs : Disney + et HBO, ainsi qu’un concurrent indirect : YoutubeTV.
Cette analyse me permet de “spoter” quelques bonnes idées et j’inaugure en parallèle mon espace de brainstorming, pour ne rien oublier.
A l’instar de Netflix, les concurrents directs ont également opté pour une ambiance sombre, que je trouve pertinente (rappel de l’ambiance “salle de cinéma”). Côté Disney+, le gris dominant me semble un peu triste et les teintes de bleu et rouge choisis très classiques. L’interface de HBO est quant à elle plus moderne, plus dynamique. Le fond violet adoucit l’atmosphère qui se dégage de l’application.
Je m’intéresse aussi aux origines de la marque Netflix et de son logo, ainsi qu’à ses valeurs, avant d’enclencher l’étape suivante.
Moodboard
Laissons place à la créativité ! Le moment est venu de créer le moodboard de la prochaine application Netflix.
Je me laisse guider par les mots clés issus de mes recherches, porteurs de l’identité primaire de la marque, et la volonté de conserver cette ambiance sombre de salle de cinéma.
Cette étape primordiale me permet de définir les premiers contours de l’identité visuelle de l’application.
Identité graphique
Palette de couleurs
Après quelques tâtonnements, je parviens à dégager une palette qui me paraît refléter l’ambiance que je souhaite donner à l’application :
2 teintes de violet qui seront dominantes, avec lesquelles je pourrai jouer pour créer notamment le fond et le menu footer. Leur mission sera de véhiculer cette ambiance “cosy”, chaleureuse que je souhaite donner à l’application.
Un rouge, plus nuancé que le rouge Netflix actuel, appliqué par petites touches et réservé aux boutons ou éléments à mettre en valeur. Cette nuance véhicule la notion d’émotion si chère à l’identité de la marque.
Une couleur amande, plus douce qu’un blanc franc, qui m’aidera à valoriser certains éléments dans les pop-in, ou les liens.
Un noir enrichi d’une pointe de violet pour le fond des pop-in et leurs icônes.
Librairie de composants
C’est là que l’exercice des replicas se révèle utile… J’ai sous les yeux tous les composants utilisés sur l’application originale. Je les retravaille donc un par un, et en crée de nouveaux, avec pour objectifs :
D’appliquer la nouvelle palette de couleurs ;
D’embarquer les modifications et nouveautés que je souhaite implémenter (icône “Playlist”, nouveau menu footer, etc…)
D’ajouter de la rondeur aux icônes et aux formes, pour injecter de la douceur au design global.
Redesign
L’étape finale de redesign peut démarrer.
Mon intention a été de proposer à la fois une application visuellement plus chaleureuse, aérée et moderne ; qui offre une expérience davantage personnalisée et qui puisse accompagner l’utilisateur dans sa recherche et sa découverte des films et séries.
Page d’accueil
Dès le premier screen, l’utilisateur a accès à toutes ses lectures en cours ;
On lui offre la possibilité de personnaliser les contenus affichés, en ajoutant ou retirant des blocs médias, pour n’afficher que les catégories qui l’intéressent ;
Les films et séries ajoutés à la playlist sont rapidement identifiés par une icône en forme de cœur ;
Chaque catégorie peut être entièrement dépliée sur un nouvel écran grâce au lien “Tout voir” ;
Le menu footer se recentre sur l’essentiel pour un accès rapide aux pages “Accueil”, “Recherche”, “Playlist” et “Téléchargements”.
Page “Ma Liste”
On crée 2 catégories indispensables : les films et séries vus, et ceux à voir ;
Les médias sont initialement triés selon 3 catégories : Derniers ajouts, films et séries ;
L’utilisateur peut filtrer ses contenus selon ce qu’il recherche dans sa playlist..
Page “Recherche”
L’utilisateur a accès dès le premier écran aux médias les plus recherchés, aux Top 10 des séries et films, et aux nouveautés ;
Il peut filtrer les contenus de la même manière que sur la page playlist ;
Il lui est proposé une “Aide à la recherche”. Cette fonctionnalité permet à l’utilisateur de trouver des idées de films ou séries selon ses goûts du moment (genre, origine, durée etc…)..
Le mot de la fin
Ce premier projet UI a été un challenge très prenant et motivant. Les enseignements que j’en retiens ?
Une application, même très connue et très utilisée peut (et doit !) toujours être améliorée ;
Une réflexion UI embarque de nombreux éléments, qui doivent chacun être minutieusement réfléchis pour s’inscrire dans une cohérence globale.
Un redesign ne s’improvise pas : avant de se lancer dans la refonte d’une application, il faut prendre le temps d’analyser l’existant, d’observer l’environnement, de stimuler sa créativité et cadrer ses objectifs.
Et si on donnait vie à vos idées ?
Pour échanger autour de vos projets, écrivez-moi
et proposez-moi vos dispos pour échanger de vive voix !
Pas encore de projet ?
Restons en contact sur les réseaux !