Discord
Contexte
L'équipe : 1 personne
Mission: UI
Durée : 4 jours
Livrable : Hi-fi Wireframe
Fait amusant : Le petit logo de manette de jeu a un nom, il s'appelle Clyde.
Pour mon premier projet en solo, j'ai choisi de travailler sur l'application mobile Discord.
Comme beaucoup de mes camarades d'Ironhack, je suis utilisateur de cette application, et il faut admettre que la version mobile n'est pas très conviviale.
J'ai donc parcouru l'application et fait mon choix en tenant compte de mes frustrations, ainsi que des différents éléments présents sur ces pages, afin d'avoir plusieurs aspects de l'UI à améliorer (menu, profil, cartes, etc.).
Et surtout, ce très, très, très long menu...
Analyse Visuelle des Concurrents
Étant donné que Discord est avant tout une application pour les joueurs, j'ai examiné ce que les concurrents proposaient de similaire et/ou de différent.
TeamSpeak, concurrent direct.
Slack, concurrent indirect.
Analyse Heuristique
Après ces analyses de la concurence, j'ai réalisé une analyse heuristique.
En me basant sur les dix heuristiques de convivialité les plus connues en design d'interface, j'ai identifié et listé les erreurs dans un tableau.
Recherche secondaire
Je voulais aussi en savoir plus sur la marque, alors j'ai posé quelques questions à mon ami, Dr. Google et j'ai découvert que Discord avait développé un Design System que j'étais impatient d'étudier.
La première chose qui m'a frappé, c'est que la palette de couleurs du Design System est complètement différente de celle utilisée dans leur application mobile…
Mon plan d'action
Après avoir analysé les concurrents, les heuristiques et le design system de Discord, j'ai décidé de me concentrer sur les points suivants :
- # Rétablir le lien entre l'application et le design system.
- # Corriger toutes les erreurs d'accessibilité.
- # Simplifier et réorganiser ce menu très, très, très long…
- # Ajouter de l'inclusivité.
- # Retravailler les cartes.
Le Design System
J'ai donc décidé de rétablir ce lien et de m'assurer que l'application mobile respecte les règles du Design System.
Pour cela, j'ai simplement utilisé la palette de couleurs et la police présentes dans le document.
Ginto Nord pour la marque & Whitney pour le texte.
L'abonnement Nitro semble être au cœur du marketing de Discord, mais il n'apparaît pas dans le design system.
J'ai donc choisi de garder Ginto Nord pour identifier Nitro, en l'appliquant en italique pour évoquer le mouvement et la rapidité que ce nom suggère.
L'accessibilité
J'ai ensuite corrigé les erreurs d'accessibilité que j'avais identifiées dans mon analyse heuristique.
J'ai principalement corrigé les problèmes de contraste en suivant les recommandations du Design System et en vérifiant régulièrement le contraste ainsi que la taille des icônes et des textes.
Simplifier le menu
J'ai converti la longue liste en un menu accordéon et déplacé l'option de déconnexion au début pour qu'elle soit plus facile à trouver.
J'ai aussi revu la mise en page de la section de profil pour le surnom, car je pensais qu'on pouvait cliquer dessus pour le modifier (ce qui n'était pas le cas).
Les cartes
J'ai aussi retravaillé les cartes de jeu pour les rendre plus lisibles et plus aérées en modifiant leur mise en page.
Ajouter de l'inclusivité
Pour cet objectif, j'avoue que je ne savais pas trop comment m'y prendre, tant le sujet est vaste.
J'ai donc décidé d'ajouter plusieurs thèmes de couleurs : le Blurple officiel de Discord comme thème par défaut, ainsi que trois thèmes.
J'ai également remplacé l'icône de la fusée par une icône plus neutre et mieux adaptée à sa fonction.
Résultat
Ce que j'ai appris
J'ai beaucoup apprécié ce projet, surtout en explorant l'UI et en me familiarisant davantage avec Figma.
J'ai également réalisé que, même si nous étions principalement axés sur l'UI, les compétences en UX acquises lors de mes deux projets précédents se sont révélées utiles, notamment lors de l'analyse des concurrents et de la recherche secondaire qui m'ont conduit au Design System.