Rethinking UX

Case–studies

Rethinking UX

RUX

Rethinking UX est un workshop en groupe dont l'objectif est de repenser une fonctionnalité d'un service proposé.

Cette année le sujet c'était de repenser et améliorer l'expérience utilisateur du site KIKK Festival pour rendre l'expérience utilisateur plus agréable.

KIKK Festival

Le KIKK est un festival international consacré à la créativité dans les cultures numériques.

C'est un mélange de technologies, d'arts visuels, de musique, d'architecture, de design et de médias interactifs, il se profile comme un panel des meilleures offres dans le domaine des innovations économiques, technologiques et artistiques.

Le KIKK c'est aussi :

  • des conférences et ateliers ;
  • une exposition d'art numérique et des prototypes ; 
  • un concours créatif et des performances live ! …
KIKK Festival
KIKK Festival 2018

Top tasks

Pour commencer nous avons défini une liste de 20 à 30 tâches à réaliser sur le site du Kikk Festival.

Ensuite nous avons voté pour choisir les 3 top tâches qui pose problème à l’utilisateur et qu’on pourra améliorer par la suite.

Chacun de nous a choisi une tâche parmi les 3 identifiées afin de repenser son fonctionnement et imaginer des fonctionnalités qui permettent à l'utilisateur d'effectuer cette tâche plus facilement et agréablement et qui répondent à la tâche choisie.

Les 3 tâches choisies :

  1. achat de ticket ;
  2. parcourir le calendrier ;
  3. filtrage des éléments .
Liste tâches

User Journey

Outil utilisé pour créer des User Journey

Nous avons ensuite imaginé plusieurs scénarios et réalisé plusieurs “ User Journey ” en fonction de la tâche choisie par chaque personne du groupe.

Le “ User Journey ” est une visualisation du processus qu'une personne doit suivre pour atteindre un but lié à un produit. Elle sert à comprendre et à satisfaire les besoins des clients, ainsi que leurs points de douleur.

J'ai consacré beaucoup de temps à cette partie car c'était une partie indispensable pour réussir les wireframes, mais aussi pour identifier les différents points de friction et les besoins non satisfaits des utilisateurs du site Kikk Festival.

Ce dernier nous a permis d'identifier les différents problèmes qu'un utilisateur peut rencontrer lorsqu'il réalise une tâche (parmi les trois choisies précédemment) sur le site du Kikk Festival.

Ma fonctionnalité choisie

Après avoir identifié et analysé plusieurs tâches et de tester ensuite les différents fonctionnalités de chacune, j'ai remarqué que la fonctionnalité « parcourir le calendrier » pose un gros problème à l'utilisateur.

Il s'agit d'un calendrier qui fait 5 fois la largeur de la page, d'un premier regard on ne comprend pas comment regroupe–t–il les informations et comment on fait pour défiler dans le temps.

Pour moi cette fonctionnalité est absolument essentielle elle permet à l'utilisateur de parcourir et avoir plus de détails sur le programme du festival, et de choisir par la suite les activités qui nous intéressent.

Grâce aux groupes de discussion et mon travail de recherche j'avais une vague idée de comment améliorer cette fonctionnalité et réaliser un nouveau prototype plus adéquat à l'expérience utilisateur.

Calendrier du KIKK FESTIVAL
Calendrier de l'évenement Kikk Festival

Solutions (Prototypage)

Wireframing papiers

Sur base de mon travail de réflexion, j'ai commencé réalisé des wireframing papiers dans le but de proposer des solutions appropriées au problématique posée, et mener l'utilisateur à réaliser la tâche choisie sans qu'il ne soit perdu.

En testant notre wireframing il faut observer le comportement et les actions de l'utilisateur pour savoir si la solution proposée est suffisamment compréhensible et facilite à l'utilisateur d'exécuter la tâche choisie précédemment, et d'obtenir en même temps un aperçu base de la fonctionnalités proposée.

Wireframing

Version 1
Wireframe version 1

Sur la première version de mon wireframing j'ai réussi à présenter l'ensemble du programme des 4 jours du festival dans une seule page, donc ça résolu le problème du défilement horizontal dans la version de base du site qui faisait 3 fois la largeur de la page.

Mais il y avait un problème au niveau des filtres car les utilisateurs n’arrivaient pas à faire la différence entre « filtrer par activité » et « filtrer par pass », au final ils contiennent des éléments en commun, et aussi le « filtre par lieu » n’était pas validé par la plupart des utilisateurs car la ville de Namur est petite donc pour se déplacer et assister à toutes les activités ça représente pas un problème pour eux.

Wireframe version 1
Version 2
Wireframe version 2

J'ai commencé alors une nouvelle version, en supprimant les 2 éléments du filtre qui posaient problème et j'ai rajouté un filtre qui pourra être très pratique aux utilisateurs qui aimeront assister à des activités dans un domaine ou thème précis, et que lorsqu'on choisi un thème les résultats seront filtrés en fonction de ce dernier.

Apres avoir testé cette version par Mr.Bourgeaux, il m'a fait la remarque que le fait d'avoir plusieurs listes déroulantes en version mobile ne donne pas très envie à l'utilisateur de les survoler et qu'elles peuvent passer inaperçus aux yeux des utilisateurs.

Wireframe version 2
Version 3
Wireframe version 3

Sur cette version j'ai changé la représentation du filtre « thème », ayant l'idée de le représenter sous forme des "Checkbox" afin que ça soit plus lisible à l'utilisateur, en lui permettant de choisir un ou plusieurs thème en même temps.

Le fait de cliquer sur « tous les thèmes » permet de désactiver le filtre et afficher toutes les activitées par défaut.

Tests utilisateurs

Wireframe version 3

Pour proposer les meilleures solutions aux utilisateurs, j'ai effectué au fur et à mesure des tests de mes prototypes par mes collègues en prenant en considération leurs remarques et leurs ressentis pour améliorer mes prototypes.

Ensuite, j’ai également demandé l’avis de mes profs qui m’avaient l’air très satisfait de mes propositions. Ils m’ont proposé de changer quelques détails comme le filtre des activitées, les programmes pour enfants…

Le résultat de cette étape était incroyable, ça m'a permis d'améliorer mes prototypes comme on peut le voir entre la première et la troisième version.

Vous pouvez tester la version finale du prototype en cliquant sur le lien ci-dessous :

Wireframe Final

Conclusion

Pour finir Rethinking UX était un workshop très intéressant et amusant en même temps, durant ce workshop j'ai appris comment développer mon regard critique sur une interface web et de mieux l’a comprendre et aussi l’analyser afin d'identifier des éventuels problèmes et avoir une réflexion adéquate pour améliorer l'expérience utilisateur sur cette interface par la suite en passant par plusieurs étapes ( imaginer des fonctionnalités, concevoir des prototypes, tester les prototypes…).

Grâce à cette expérience je pourrai mieux orienter mes choix et mon contenu pour les prochains projets à venir afin de créer des interfaces plus faciles à utiliser et qui répondent beaucoup mieux à l'expérience utilisateur.