Case-Study

Première approche de l'UX

Afin d’aborder le projet RUX (Rethinking User eXperience) et le site que nous allions traiter (iMal). Il nous a été demandé de traiter le site afin de trouver les principaux problèmes du site web. Ceci va être la toute première phase de travail.

L'iMal

Le site que nous avons dû traiter pour ce test utilisateur est le site de l’iMal. L’iMAL est un centre d’art dédié aux cultures et technologies numériques à Bruxelles.
imal

Site de l'iMal

L’iMal est équipé d’un FabLab. Un Fablab est un atelier de fabrication axé science, informatique, nouvelles technologies. Un fablab est ouvert au public, et met à disposition des machines-outils.
fablab

Fablab de l'iMal

Test utilisateur

Nous avons donc dû réaliser un test utilisateur sur base d’un scénario donné. Nous étions observateurs et nous avons donc trouvé une autre personne pour réaliser le test.
usertest

Test utilisateur

Scénario:

“Vous habitez à Bruxelles, vous allez à Paris pour un colloque qui se déroule le 21 décembre de 9h à 16h. Vous souhaitez minimiser vos frais, y aller en TGV et rentrer directement au soir. Vous comptez 45 minutes entre votre domicile et la gare de Bruxelles Midi, et 45 minutes de Paris Nord jusqu’au lieu de la conférence.”
À partir de ce scénario, donner à la personne choisie, nous avons dû la laisser chercher et trouver les informations utiles pour planifier cette journée. Afin de ne pas biaiser les résultats, notre intervention pour aider le testeur devait être quasi nulle. Tout le test a été enregistré.
Durant le test, nous avons récolté un maximum d’informations sur les difficultés rencontrées par le testeur ainsi que ses réactions et ses expressions. Après le test, nous avons fait un debriefing avec le testeur pour avoir des retours comme ses commentaires, ses impressions et sa perception du site et de son fonctionnement.

Analyse du test

Après le recueil de toutes les informations durant et après le test, nous avons dû réaliser un article médium afin d’expliquer et imager les problèmes rencontrés ainsi que nos conclusions.
Pour plus d'info medium

Article medium du test utilisateur.

Mise en place de l’équipe

Le projet RUX se travaille aussi en équipe, une partie du travail réalisé surtout au niveau des recherches et de la mise en place de la problématique ou de la Top Task. Notre équipe est constituée de:
team

Notre équipe

Débriefing des tests utilisateurs

Après la mise en place de l’équipe nous avons donc fait un débriefing de nos tests utilisateurs afin de mettre en commun nos conclusions. Ceci nous a permis d’énumérer les problèmes du site.
debrief

Débriefing sur Teams avec l'équipe

Inventaire de contenu

Avec tout le groupe classe, nous allons faire un inventaire de contenu. Mais qu’est-ce qu’est un inventaire de contenu ? Un inventaire de contenu vise à lister les contenus en ligne et hors ligne d’une entreprise, à les qualifier et les quantifier. Le contenu c’est les informations + les fonctionnalités. Nous avons chacun et chacune reçu une page de l'arborescence du site et y faire l’inventaire de contenu.
inventaire

L'inventaire du contenue d'une page de l'iMal

Après cela, nous avons dû définir ce qu’est l’iMal pour notre groupe grâce à ce que l’on a appris: “L’iMAL (Interactive Media Art Laboratory) est une association. Elle a pour but de stimuler le processus créatif des Nouvelles Technologies. C’est aussi un centre d’Art Contemporain proposant une série d’expositions, conférences, concerts et performances”.

Listons les tâches!

Nous avons dû, après l’inventaire de contenu, le convertir en une liste de tâches. Après avoir listé toutes les tâches, chacun de nous avait 3 voix et a pu voter pour 3 tâches qu’il juge principales pour le site de l’iMal.
liste

La liste de tâches faites par la classe

Choix de la Top Task

Les 5 meilleures tâches sont celles qui avaient la majorité des voix. Les voicis:
Notre équipe a choisi la Top Task: “Louer un espace”.
toptask

Les TopTasks choisies par les équipes

Mise en place du Besoins Utilisateurs

Pour commencer, nous allons lister les besoins utilisateurs. C’est-à-dire les informations que nous voudrions retrouver sur une page de location d’espace.
Afin de mieux définir les informations et les espaces qui pourraient être mis sur la page de location. Nous nous sommes donc posées des questions et nous avons discuté pour avoir une image plus détaillée de ce que l’on voulait.
Pour plus d'info besoin

Besoin utilisateur

Audit

Un audit permet de regrouper des sites qui ont des fonctionnalités semblables à celles que l’on voudrait mettre en place pour notre Top Task. Il y a pas mal de sites qui permettent de louer des espaces pour des évènements, du coup il y a pas mal d'exemples à suivre pour prendre de l’inspiration. Mais aussi pour les additionnés et avoir une page de location la plus complète possible.
Pour plus d'info audit

Mon audit sur Medium

Imaginons!

Après avoir réalisé l’audit et d’avoir fait une mise en commun de ce que l’on a déniché. C’est le moment des croquis et de rendre les fonctionnalités plus concrètes que jamais. La réalisation des croquis était libre, j’ai choisis de travailler sur Invision Studio par facilité. J’ai donc fait un croquis de formulaire de contact, de plan GPS ainsi qu’une galerie photo et tout ça en version mobile.

User Journey

L’étape de la User Journey a été une étape assez compliquée. Il fallait créer des scénarios de user journey en rapport avec l’iMal et notre tâche avec des contextes et des facteurs limitants. La TopTask étant “louer un espace”, j’ai donc fait un scénario pour un particulier et un autre pour une société. Ce qui en ressort:
Pour plus d'info user_journey

Mes Users Journeys en article Medium.

Prototype en marche!

Après avoir bien décrit les problèmes et les besoins de l’utilisateur, il est temps de passer aux prototypes. Les prototypes papiers reprennent les fonctionnalités que nous avons trouvé et décrit à la fois pour la version mobile et pour la version desktop. Cela me permet enfin de pouvoir mettre en place les fonctionnalités dans un certain ordre pour faire une sorte de “filtre de recherche”.
Afin d’accéder à la page des locations, il suffit de cliquer sur l’onglet qui se trouve dans le menu principal. Ensuite on est redirigé vers un plan GPS ou il faut entrer le code postal. Puis les salles dans le périmètre sont affichées sur la carte, de là on peut soit cliquer sur le plan directement ou bien afficher la liste complète. La liste des salles s’affiche, il y a une image pour la salle ainsi que le nom, une description via des picto (picto + texte pour le desktop) et le lien vers la page de la salle. Sur la page de la salle, il y a des informations supplémentaires ainsi que les infos de contact et le formulaire de contact.
home form valid
Grâce aux prototypes, j’ai pu commencé à tester les différentes user journey ainsi que quelques tests utilisateurs afin de corriger les quelques soucis qui persistaient.

Intégration

Pour l’intégration nous devions utiliser Material Design, ce qui nous donnait des règles à suivre comme la taille des icônes ou bien la valeur des ombres. Après un peu de lecture du site de Material Design, j’ai pu commencé à intégrer le case-study actuel. J’ai évidemment commencé par la version mobile. Mon choix de couleur s’est porté sur des référence qu’il y avait sur le site de Material Design. Grâce à cela j’ai pu faire mon logo RUX avec une même identité graphique qui fonctionne en light et dark mode.
Après le début de l'intégration, j'ai eu un doute sur mes choix de couleurs que je trouvais bien trop claquantes. Suite à ça, j'ai décidé de retourner vers un background plus simple et plus épuré.
integration

Début de l'intégration.