Refonte de l'application Goodreads
Moodboard & feuille de style
Moodboard & feuille de style
Moodboard & feuille de style
Contexte et objectif du challenge
Pendant le bootcamp UX/UI, j'ai participé à un défi UI de 21 heures au cours duquel chacun des étudiants a été invité à repenser une application mobile de son choix.
L'objectif était de choisir 3 écrans de cette application qui seraient les plus pertinents à repenser en termes de parcours utilisateur.
Pourquoi choisir Goodreads?
J'ai décidé de travailler sur l'application Goodreads car je l'utilise depuis quelques mois maintenant, pour découvrir des livres, les ajouter à ma bibliothèque virtuelle, mettre en place des défis littéraires et échanger mes lectures avec des amis.
J'ai d'abord concentré mes efforts sur une analyse heuristique des 3 écrans de l'application que je pouvais améliorer :
la page d'accueil,
la page de recherche
une page de recommandations accessible depuis la page d'accueil.
J'ai identifié plusieurs éléments qui méritaient d'être revus : les boutons, les couleurs, l'espacement des icônes, la structure du contenu, etc.
Par conséquent, j'ai eu les premières idées sur la manière dont je pourrais redessiner les écrans pour les rendre plus attrayants et engageants pour les utilisateurs, mais aussi plus faciles à utiliser.
Stepping into the challenge
La prochaine étape a été consacrée à cloner les écrans sélectionnés dans un prototype de moyenne fidélité. Cette partie, axée sur l'analyse des écrans actuels de l'application mobile, l'identification des éléments à améliorer et la construction du clone du storyboard de moyenne fidélité, m'a pris environ 6 heures au total.
Ensuite est venu le moment où j'ai réalisé l'analyse visuelle de la concurrence, défini les attributs de marque que je voulais pour le nouveau design et la planche d'ambiance pour créer l'image de la marque.
Travailler sur l'analyse de la concurrence a été très instructif. J'ai décidé de sélectionner les 3 applications mobiles suivantes: Apple Books, Book Tracker et Bookshelf.
Application Apple books
Structure du contenu claire
Trop orientée performance
Pictos et police trop fins
Définition de l'identité de marque
Exécuter cette analyse concurrentielle m'a aidé à affiner les priorités de refonte pour l'application, ce qui m'a conduit à définir les attributs de la marque : accro à la littérature, sérieux, fonctionnel, social et calme. C'est ce que je voulais que la refonte transmette.
La sélection des couleurs s'est faite assez facilement, j'ai naturellement choisi le bleu comme couleur principale et secondaire pour transmettre un sentiment de calme et de sérieux. Ensuite, j'ai choisi un orange vitaminé comme couleur d'accent pour le rendre dynamique.
Pour la sélection de la police, je voulais que les utilisateurs identifient rapidement que l'application était liée aux livres, j'ai donc choisi une police similaire à celle utilisée dans les livres. J'ai choisi Georgia pour les titres principaux et comme je visais à moderniser l'application, j'ai sélectionné une typographie secondaire, appelée Nunito Sans, pour le texte du corps et les titres secondaires.
Cette analyse et cette partie d'identité de la marque ont pris environ 3 heures au total et m'ont permis de passer au wireframing haute fidélité, honnêtement la partie la plus passionnante! :D
Réalisation d'un prototype haute fidélité
Voici le résultat final des écrans qui m'ont pris environ 12 heures à concevoir
Voici la vidéo présentant les 3 écrans :
Voici la vidéo présentant les 3 écrans :
Globalement, j'ai introduit un arrière-plan plus clair et j'ai coloré les principaux boutons et balises avec des couleurs primaires et secondaires.
Globalement, j'ai introduit un arrière-plan plus clair et j'ai coloré les principaux boutons et balises avec des couleurs primaires et secondaires.
Globalement, j'ai introduit un arrière-plan plus clair et j'ai coloré les principaux boutons et balises avec des couleurs primaires et secondaires.
La barre de navigation : J'ai redessiné les pictogrammes et les ai rendus plus clairs. J'ai constaté que l'option “plus” dans la version actuelle ne correspondait pas au contenu qui se trouve derrière (dédié aux paramètres du profil, aux recommandations, etc.), j'ai donc remplacé cela par une icône de paramètres. J'ai également ajouté des micro-interactions sur les icônes (voir “Activité” et “Recherche” dans la vidéo de démonstration) pour les rendre plus visibles.
La barre de navigation : J'ai redessiné les pictogrammes et les ai rendus plus clairs. J'ai constaté que l'option “plus” dans la version actuelle ne correspondait pas au contenu qui se trouve derrière (dédié aux paramètres du profil, aux recommandations, etc.), j'ai donc remplacé cela par une icône de paramètres. J'ai également ajouté des micro-interactions sur les icônes (voir “Activité” et “Recherche” dans la vidéo de démonstration) pour les rendre plus visibles.
La barre de navigation : J'ai redessiné les pictogrammes et les ai rendus plus clairs. J'ai constaté que l'option “plus” dans la version actuelle ne correspondait pas au contenu qui se trouve derrière (dédié aux paramètres du profil, aux recommandations, etc.), j'ai donc remplacé cela par une icône de paramètres. J'ai également ajouté des micro-interactions sur les icônes (voir “Activité” et “Recherche” dans la vidéo de démonstration) pour les rendre plus visibles.
La page d'accueil : J'ai décidé de mettre davantage en valeur la partie défi livre. En effet, sur la capture d'écran de la page d'accueil actuelle (voir ci-dessus), il y a une carte invitant l'utilisateur à rejoindre un défi livre, mais le fait est que j'avais déjà mis en place un défi sur mon profil. Donc, je voulais le rendre plus visible sur la page d'accueil afin que l'utilisateur s'en souvienne lorsqu'il ouvre l'application et puisse être motivé pour progresser. J'ai également intégré une micro-interaction sur l'achèvement de l'ellipse de progression.
La page d'accueil : J'ai décidé de mettre davantage en valeur la partie défi livre. En effet, sur la capture d'écran de la page d'accueil actuelle (voir ci-dessus), il y a une carte invitant l'utilisateur à rejoindre un défi livre, mais le fait est que j'avais déjà mis en place un défi sur mon profil. Donc, je voulais le rendre plus visible sur la page d'accueil afin que l'utilisateur s'en souvienne lorsqu'il ouvre l'application et puisse être motivé pour progresser. J'ai également intégré une micro-interaction sur l'achèvement de l'ellipse de progression.
La page d'accueil : J'ai décidé de mettre davantage en valeur la partie défi livre. En effet, sur la capture d'écran de la page d'accueil actuelle (voir ci-dessus), il y a une carte invitant l'utilisateur à rejoindre un défi livre, mais le fait est que j'avais déjà mis en place un défi sur mon profil. Donc, je voulais le rendre plus visible sur la page d'accueil afin que l'utilisateur s'en souvienne lorsqu'il ouvre l'application et puisse être motivé pour progresser. J'ai également intégré une micro-interaction sur l'achèvement de l'ellipse de progression.
Le fil d'activité : J'ai trouvé que le contenu était trop mélangé avec soit des livres recommandés, soit l'activité des amis. J'ai donc décidé de mieux le structurer et d'introduire des balises de catégorie pour permettre à l'utilisateur de filtrer le contenu, en fonction de ce qu'il souhaite voir : livres recommandés, activité des amis, livres nouveaux / tendance et best-sellers.
Le fil d'activité : J'ai trouvé que le contenu était trop mélangé avec soit des livres recommandés, soit l'activité des amis. J'ai donc décidé de mieux le structurer et d'introduire des balises de catégorie pour permettre à l'utilisateur de filtrer le contenu, en fonction de ce qu'il souhaite voir : livres recommandés, activité des amis, livres nouveaux / tendance et best-sellers.
Le fil d'activité : J'ai trouvé que le contenu était trop mélangé avec soit des livres recommandés, soit l'activité des amis. J'ai donc décidé de mieux le structurer et d'introduire des balises de catégorie pour permettre à l'utilisateur de filtrer le contenu, en fonction de ce qu'il souhaite voir : livres recommandés, activité des amis, livres nouveaux / tendance et best-sellers.
L'écran des recommandations : J'ai choisi de rendre les catégories de genre plus claires et de créer des sections avec une sélection de livres du genre donné et la possibilité de voir tous les livres de ce genre. Ensuite, j'ai simplifié l'affichage des évaluations et j'ai donné aux utilisateurs une indication de l'évaluation globale et du nombre de votes.
L'écran des recommandations : J'ai choisi de rendre les catégories de genre plus claires et de créer des sections avec une sélection de livres du genre donné et la possibilité de voir tous les livres de ce genre. Ensuite, j'ai simplifié l'affichage des évaluations et j'ai donné aux utilisateurs une indication de l'évaluation globale et du nombre de votes.
L'écran des recommandations : J'ai choisi de rendre les catégories de genre plus claires et de créer des sections avec une sélection de livres du genre donné et la possibilité de voir tous les livres de ce genre. Ensuite, j'ai simplifié l'affichage des évaluations et j'ai donné aux utilisateurs une indication de l'évaluation globale et du nombre de votes.
L'écran de recherche devait être plus engageant et j'ai décidé de créer des tags de genre avec des pictos pour faciliter l'identification, et j'ai décidé d'introduire une option de filtre afin que l'utilisateur puisse sélectionner plusieurs genres et voir les résultats des livres correspondants.
L'écran de recherche devait être plus engageant et j'ai décidé de créer des tags de genre avec des pictos pour faciliter l'identification, et j'ai décidé d'introduire une option de filtre afin que l'utilisateur puisse sélectionner plusieurs genres et voir les résultats des livres correspondants.
L'écran de recherche devait être plus engageant et j'ai décidé de créer des tags de genre avec des pictos pour faciliter l'identification, et j'ai décidé d'introduire une option de filtre afin que l'utilisateur puisse sélectionner plusieurs genres et voir les résultats des livres correspondants.
Suite à ce travail, j'ai participé à une séance de critique de design avec d'autres coéquipiers et j'ai reçu des retours intéressants. Quelqu'un m'a dit qu'il serait bon d'ajouter un peu de rythme sur la page d'accueil, ce avec quoi j'étais d'accord, donc j'ai décidé d'intégrer une couleur bleue sur la carte du défi pour la faire ressortir davantage. Mis à part ce commentaire, tout le monde a dit que le design était clair, organisé et facile à utiliser.
Suite à ce travail, j'ai participé à une séance de critique de design avec d'autres coéquipiers et j'ai reçu des retours intéressants. Quelqu'un m'a dit qu'il serait bon d'ajouter un peu de rythme sur la page d'accueil, ce avec quoi j'étais d'accord, donc j'ai décidé d'intégrer une couleur bleue sur la carte du défi pour la faire ressortir davantage. Mis à part ce commentaire, tout le monde a dit que le design était clair, organisé et facile à utiliser.
Suite à ce travail, j'ai participé à une séance de critique de design avec d'autres coéquipiers et j'ai reçu des retours intéressants. Quelqu'un m'a dit qu'il serait bon d'ajouter un peu de rythme sur la page d'accueil, ce avec quoi j'étais d'accord, donc j'ai décidé d'intégrer une couleur bleue sur la carte du défi pour la faire ressortir davantage. Mis à part ce commentaire, tout le monde a dit que le design était clair, organisé et facile à utiliser.
Apprentissages clés de ce défi
J'ai vraiment apprécié pratiquer mes compétences en UI en si peu de temps, j'ai trouvé cela très stimulant. J'ai réalisé à quel point j'ai appris depuis le début du bootcamp et combien il est important que je continue à pratiquer pour affûter mes compétences sur Figma.
