Cas interface utilisateur - Study Together

Étude de cas interface utilisateur (UI)

DURÉE

Novembre 2021 à décembre 2021

RÔLE

Designer UI

Créer les diagrammes de flux utilisateurs, établir l’orientation visuelle, produire les visuels d’interfaces et interactions.

OUTILS

Figma : prototypes moyenne et haute fidélité
Balsamiq : Prototypes basse fidélité
Draw.io : Organigrammes et analyse des tâches

Le contexte

Student Together est un projet d’étude lié à ma formation à Career Foundry. La partie UX a été fournie en amont avec les éléments comme les études utilisateurs et les fonctionnalités recherchées.

Le problème

Les étudiants qui doivent alterner entre études, petits jobs ou leurs familles peuvent faire face à des baisses de motivation. Comment peut-on faire revenir l’enthousiasme des premiers jours?

La solution

Nous faisons levier d’une communauté qui peut partager, échanger et tester ses compétences. Générant ainsi une dynamique de groupe et un environnement de confiance qui permet de faire face aux difficultés quotidiennes.

Qui utilisera Study Together ?

Notre persona est Alex. Il est inscrit dans un cours en ligne tout en travaillant à temps partiel comme responsable de magasin.

Diagramme de flux utilisateurs

Le dossier projet fournissait déjà les études utilisateurs. Transformer ces études en actions concrètes était un bon début.

Plus tard, ces actions se transformeront en visuel avec leurs interactions.

Wireframes

J’ai pensé Student Together comme un outil collaboratif. Étant moi-même utilisateur de Slack et de Discord, j’ai basé mes premières ébauches sur ces outils.

Le système de grille

Pour garantir la cohérence à travers divers types d’écrans, j’ai mis en place un système de grille qui facilitera plus tard la création de pages adaptables.

Pour s’assurer de mettre en avant les éléments les plus importants, j’ai d’abord créé pour les écrans de téléphones (mobile-first).

Évolution des wireframes

Avant d’ajouter la couleur et l’iconographie, j’ai progressé depuis la vue brouillon à une vue moyenne fidélité. Voici par exemple l’évolution des designs pour la page de chat. La première version avait un menu dans le coin supérieur droit alors que le contenu du menu était sur le bord gauche.

C’était contre-intuitif et j’ai donc testé d’autres possibilités comme un bouton en bas à gauche. Une idée qui prendra beaucoup de place sur l’écran à cause du bouton flottant en bas à gauche.

J’ai donc pris la décision de changer le bouton hamburger de côté, au même niveau que la barre de menu.

Moodboards

Avec la structure et l’organisation du contenu en place, nous pouvons maintenant avancer vers la typographie et la couleur.

Depuis le début, j’ai pensé Student Together comme un espace protégé où les gens se sentent libre de partager leurs trouvailles et de tester leurs connaissances sans craindre d’entendre « c’est trop bête comme question ».

Je trouvais important d’apporter des touches de dynamisme pour maintenir les utilisateurs engagés dans leurs apprentissages (histoire qu’ils ne s’endorment pas devant leurs écrans).

J’ai créé deux moodboards véhiculant cette idée de dynamisme avec une environnement qui favorise l’apprentissage.

Le choix

J’ai sélectionné le second moodboard. Principalement car la présence de couleurs trop criardes pouvait créer une fatigue visuelle. Un effet particulièrement indésirable lorsqu’il s’agit de lire beaucoup de contenu.

Police de caractère

Les deux palettes utilisent la police Urbanist pour renforcer l’idée de modernité tout en conservant un style accessible. J’utiliserai cette dernière pour les titres et le logo.

Pour faciliter la lecture, j’ai choisi Roboto pour le reste du contenu. Une police facile à déchiffrer qui accompagne bien celle des titres.

Couleurs

Tout en testant mes palettes de couleurs, j’ai réalisé que ma couleur d’accentuation était trop puissante et presque trop agressive.

J’ai donc essayé d’autres variations basées sur les mêmes teintes. Après plusieurs essais, j’ai obtenu la palette suivante :

Charte graphique

Pour assurer une cohérence sur tous les supports, j’ai créé une charte graphique qui détaille ce qu’il faut faire ou ce qu’il faut éviter au niveau de l’interface, des images, etc. J’ai été plus loin en détaillant les spécifications pour les composants importants de l’interface.

Vous pouvez voir la charte graphique (en anglais) en cliquant sur l’aperçu ci-dessous.

Cliquez l'image pour télécharger le fichier

Prototype d'interface

Chaque étape était suivie d’un prototype fonctionnel basé sur les wireframes. Ils m’ont aidé à visualiser comment les utilisateurs peuvent interagir avec mon design et quelles étapes étaient nécessaires entre les écrans.

Voici la dernière version en date.

Adapter pour différents supports

Bien que Student Together ait été créé en priorité pour l’écran de téléphone, il était évident qu’un plus grand écran rendrait la vie bien plus facile aux étudiants.

Tout en conservant mon système de grille, j’ai adapté mon design à des écrans plus larges comme les tablettes, les écrans 24″, etc.

Enseignements

Approche mobile-first VS le reste du monde

Le dossier du projet recommandait de créer en priorité pour les téléphones. C’est une tendance très actuelle qui permet de se concentrer sur ce qui est essentiel à l’utilisateur. Cependant, en réfléchissant à l’utilisation du service, j’imagine qu’une approche vers les écrans large aurait été plus bénéfique.

C’est quelque chose que l’on peut établir en amont lors de la phase de recherche UX.

Les petites rivières font les grands océans

Je l’ai appris lors du précédent projet : créer des composants dans Figma, les organiser, les nommer correctement prend beaucoup de temps et interrompt les phases de création.

Cependant, cette étape permet de gagner énormément de temps lorsqu’il s’agit de créer la charte graphique ou de préparer le projet pour les développeurs.

A suivre...

Lors de mon travail sur la palette de couleurs j’ai composé quelques variations plus sombres. Elles feraient une bonne base pour un mode sombre, idéal lorsqu’il s’agit d’éviter la fatigue visuelle.

Toujours dans l’idée de maintenir les utilisateurs motivés, je voudrais ajouter des éléments de micro-interactions avec l’interface. Spécialement lorsqu’il s’agit d’organiser leurs propres ressources.