Le troisième projet du bootcamp Ironhack UX/UI Design

L'équipe

Et cette fois l'équipe, eh bien, il n'y a pas d'équipe !
C'est un projet solo.

À propos du projet

Améliorer nos compétences en interface utilisateur. Pour cela, il fallait choisir une application mobile relativement connue. Ensuite pour voir ce qu'on pourrait améliorer.

J'ai donc choisi de travailler sur la version mobile de l'application Discord.

J'ai fait ce choix car comme beaucoup de mes confrères Ironhackers, je suis un utilisateur de cette App et il faut bien le dire, la version mobile n'est pas vraiment conviviale.

Nous devions choisir entre 3 et 7 pages sur lesquelles travailler. Je suis donc passé par l'application et j'ai fait mon choix en fonction de mes propres frustrations mais aussi en fonction des éléments de ces pages pour avoir différents aspects de l'UI sur lesquels travailler (menu, profil, fiches...)

Et surtout ce menu très très très long…

Analyse visuelle des concurrents

Étant donné que Discord est essentiellement une application pour les joueurs, je suis allé voir ce que les concurrents proposaient de similaire et/ou de différent.

Les palettes de couleurs

Voici les palettes de couleurs utilisées par ces trois concurrents

Et voici celui de l'application mobile Discord

Analyse heuristique

Après ces petites recherches, c'est le retour du nom très sauvage de l'analyse heuristique.

Encore une fois, en suivant les dix heuristiques d'utilisabilité les plus populaires pour la conception d'interface utilisateur, j'ai identifié et noté dans un tableau les erreurs heuristiques que j'ai trouvées.

Recherche secondaire

Je voulais aussi en savoir plus sur la marque, alors je suis allé poser quelques questions à mon meilleur ami, le Dr Google.

Et j'ai pu voir que Discord avait développé un Design System que j'avais hâte d'étudier.

Vous pouvez le trouver ici en bas de la page.

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…

Ce que je veux faire

Reconnecter l'application au 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é

Se reconnecter au Design System

Pour cela, j'ai simplement pris 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 centre du marketing de Discord mais il n'y en a aucune trace dans le système de conception, j'ai donc choisi d'utiliser Ginto Nord pour identifier Nitro mais de l'appliquer en italique pour donner l'effet de mouvement et de vitesse que cela nom l'indique.

Corrigez toutes les erreurs d'accessibilité

Ici, j'ai travaillé principalement sur les erreurs de contraste en suivant les recommandations du Design System et en vérifiant régulièrement le contraste, la taille des icônes et des textes utilisés.

Simplifiez et réorganisez ce menu très très long…

Pour cet article, j'ai simplement changé cette longue liste en menu accordéon. J'ai aussi remis l'option de déconnexion qui était tout à la fin dans le 1er onglet du nouveau menu.

J'ai aussi choisi de retravailler une partie de la page profil avec cette mise en page pour le pseudo qui avec mon modèle mental voulait cliquer dessus pour le modifier (ce qui n'était pas le cas évidemment...)

Ajouter l'inclusivité

Pour cet objectif, je dois avouer que je ne savais pas comment ni quoi faire tant ce sujet est vaste.

J'ai donc eu l'idée d'ajouter un thème de couleur différent avec le "Blurple" officiel de Discord comme thème par défaut puis un thème rose et deux thèmes avec des couleurs plus neutres.

Et j'ai aussi modifié une icône de fusée (très masculine) pour une icône plus neutre et plus appropriée à son usage.

Superposition d'activités

J'ai aussi retravaillé la section jeux pour la rendre plus lisible et aérée en modifiant la disposition des cartes.

Aperçu de l'avant et de l'après

Voici les liens vers les deux flux prototypes si vous souhaitez tester le menu accordéon et l'icône de la manette avec sa superposition.

Premier lien

Deuxième lien

Qu'ai-je appris de ce projet ?

J'ai passé un bon moment sur le projet, j'ai vraiment aimé plonger dans l'interface utilisateur et en apprendre davantage sur Figma.

J'ai aussi remarqué que même si sur ce projet nous étions vraiment focalisés sur l'UI, les compétences que j'ai acquises en UX sur les deux projets précédents m'ont aussi été utiles : Analyse visuelle de la concurrence et recherche secondaire qui m'ont mené au Design System.

N'hésitez pas à laisser un commentaire si vous avez des suggestions sur ce que j'aurais pu faire mieux ou signaler des erreurs que j'ai pu faire.
Merci d'avoir lu.