Maryline BOUWER | Case study-rux-etudiante-heaj-DWM-2019

Case study - Rux 2019

Rethinking ux

RUX est un atelier qui se déroule à L'HEAJ dans la section « design web & mobile » . Il nous est demandé de repenser le site du KIKK Festival, afin que l'utilisateur puisse avoir une meilleure expérience.

Le KIKK Festival

Le KIKK est un festival international consacré à la créativité dans les cultures numériques. Il se déroute à Namur. Cette année il a eu lieu du 31 octobre au 3 novembre. Il mélange technologies, arts visuels, musique, architectures, design et médias interactifs. Le thème était « Archipels de la fragilité » . Il explore les différents aspects fragiles de la technologie et les différents obstacles qu'ils peuvent entrainer tout en examinant la fragilité de notre planète et de ses écosystèmes.

Mon équipe

L'équipe est composée de 4 membres : Marie-Joséphine Cuvelier, Quentin Golinveau, Cédric Van Gheluwe et moi, Maryline Brouwer.

Nous avons beaucoup travaillé en équipe. Premièrement, parce qu'il nous semblait plus intéressant d'améliorer un ensemble de chose plutôt qu'une petite partie du site. Deuxièmement, on s'est rendu compte que certaines fonctionnalités se rejoignent. Et finalement, nous pouvions ainsi opposer nos idées et nous entraider.

Afin d'avoir une bonne organisation, nous avons créé un dossier sur le drive de google pour y stocker tous les documents que nous avions en commun.

Aperçu des éléments qui se trouve dans notre dossier partagé google drive

Mais qu'est ce qui cloche sur ce site ?

Le test utilisateur

Le test utilisateur est un procédé qui permet de tester l'expérience qu'à un utilisateur sur un produit. Dans le cas présent, il s'agit du site du KIKK festival. Des tâches sont données à un testeur, une personne analyse comment il se débrouille pour les réaliser.

Dans un premier temps nous écrivons un court résumé de tout ce qui ne convient pas sur le site du KIKK. Nous pouvons réaliser ce petit texte grâce aux tests utilisateurs que nous avons réalisés auparavant. Nous commençons par établir une liste de tous les manques, inconvénients que nous avions pu observer lors de nos tests utilisateurs. Pour ne pas avoir une simple liste de mots, nous la transformons en un joli petit texte.

Aperçu nos textes réalisé pour le résumé du test utilisateur

« User journey »

User journey ou parcours utilisateurs. C'est une analyse d'un ensemble d'étapes que réalise un utilisateur tout au long de l'utilisation du site.

Cette étape est à réaliser en solo ou tous ensemble. Et comme on s'aime bien. Nous choisissons de le faire ensemble. Et plus sérieusement, nous trouvons plus chouette de modifier le site sur plusieurs fonctionnalités qu'une seule. De plus, certaines de nos fonctionnalités se rejoignent.

Sur base de trois « user journey » différents, nous créons un tableau qui résume toutes les étapes nécessaires pour réaliser des tâches précises sur le site du KIKK. Nous nous arrangeons pour retrouver un peu toutes nos fonctionnalités dans chaque scénario.

Nous mettons en forme une jolie petite histoire pour décrire nos scénarios. Mais il s'avère que c'est une étape inutile. Que notre tableau suffit amplement. Nous l'avons donc uniquement réalisé pour le premier scénario.

Nous décrivons les problèmes qui ne sont pas liés à notre fonctionnalité de manière brève. Tandis que pour nos fonctionnalités nous réalisons une analyse plus approfondie sur la manière dont nous comptons résoudre le problème. Nous réalisons cette analyse grâce aux idées que nous avons eues durant l'audit.

Notre tableau qui forme les scénarios
Premier scénario écrit
Notre premier parcours utilisateur
Notre second parcours utilisateur
Notre troisième parcours utilisateur

Des idées pour l'améliorer ?

Groupes de discussion

Le groupe de discussion, nous permet d'échanger nos idées, nos opinions sur un thème en particulier. Un membre guide la discussion en posant des questions.

Mais qu'est-ce qu'un bon site ? Nous avons discuté de ce qu'étais pour nous un bon site d'évènements. En nous aidant de question ? Nous avons, au fur et à mesure, défini les éléments qui feraient qu'un site d'évènements est bon. C'est ainsi que nous avons établi ce qu'il fallait selon nous pour un bon site d'évènements.

Le site doit être composé d’un accueil clair (on doit comprendre de quoi parle le site), d’informations organisées (on doit savoir où cliquer) et d’un visuel pas trop chargé et agréable. Sur un site on s’attend à trouver un menu clair et une barre de recherche. Les utilisateurs ont besoin qu’on leur propose une bonne architecture d’information. Ils doivent pouvoir facilement trouver le programme, les horaires, les tarifs, les activités proposées durant l'événement. Et aussi les « infos pratiques » telles que les moyens de transport, où se restaurer, où loger,...

Résumés de nos textes en rapport avec le groupe de discussion

Un audit

Un audit c'est une analyse de comment fonctionne d'autres sites. On regarde qu'elles sont les points fort et les faiblesses des autres sites.

Avant de commencer, à penser à améliorer cette fonctionnalité. Je réalise un petit texte descriptif des étapes pour réaliser ma fonctionnalité. Afin de savoir, comment l'améliorer.

Comment j'effectue mon audit ? J'écris un texte qui reprends de tout ce que je trouvais bien ou non sur les sites que je visite. Je choisis de partir sur d'autres sites d'évènements pour voir ce qu'il propose. Mais après avoir réalisé trois audits sur des sites d'évènement, je me suis lancé à la recherche de site qui ne vendait pas un produit mais un service. Du coup mets venue l'idée du cinéma et du site de la scnb. Après avoir réalisé de longs textes descriptifs je me rends compte que ce n'est pas pratique. Je décide donc de faire une petite liste des éléments importants.

Liste des éléments intéressants à retenir :

Bouton figé et accessible
Récapitulatif de l'achat
Boutons voyants grâce à des couleurs vives
Descriptif des différents tickets
Classement des tickets par type
Boutons différents pour les tickets épuisés
Boutons qui se transforment quand on clique dessus, deviennent deux boutons pour le choix du nombre de tickets.
Boutons disponibles sur la page d'accueil
Boutons répétés dans « info pratique »
Explication de comment commander un ticket
Choix du ticket, dans l'horaire
Remplissage d'un formulaire pour avoir le ticket le plus adapté.

Mon audit de l'acinapolis
Mon audit de la SNCB
Mon audit du site de la Dutch comic con
Mon audit du site Elfia
Mon audit du site du festival nature

Tout améliorer, non, juste une fonctionnalité ?

Quelles sont les fonctionnalités?

Les fonctionnalités sont l'ensemble des actions qu'il faut réaliser pour faire une tâche.

Il ne reste plus qu'à déterminer la fonctionnalité que nous souhaitons améliorer dans le site du KIKK. Pour cela, nous dressons une liste de toutes les actions que nous pouvons réaliser sur un site d'évènements. À l'aide de petites gommettes nous choisissons les éléments qui nous semblent les plus importants. Nous répartissons entre nous les quatre fonctionnalités qui ont reçu le plus de vote.

Ma fonctionnalité, « Acheter un ticket » .

Je réalise moi-même le chemin pour acheter un ticket et je retranscris les étapes que je fais. Voilà comment est né ma petite liste. Puis je réfléchis à tous les endroits où je peux retrouver ma fonctionnalité.

Grâce à mon audit et aux groupes de discussion j'avais une vague idée de comment réaliser ce nouveau prototype.

description en forme de liste de ma fonctionnalité

Mes prototypes papier

Ce sont des croquis qui présentent comment on imagine le site internet.

Étapes de réalisation

Pour la toute première version de mon prototype papier, je reprends le contenu (les différentes catégories de tickets) que propose le site du KIKK.

Les tickets sont organisés en une longue liste.

Je sépare les tickets en différentes catégories.

Cela permet une visualisation plus facile des différents tickets.
Les tickets sont organisés en une longue liste.

Je sépare les tickets en différentes catégories.

C'est pour permettre une visualisation plus facile des différents tickets.
Les tickets pour les ateliers et cours sont tous les deux mélangés.

Dans l'onglet « atelier et cours » je crée un filtre qui permet de séparer les deux activités.

Cela permet de visualiser les tickets de manière séparés, de pouvoir choisir ce que l'on souhaite voir.
Les tickets pour les ateliers et cours sont tous les deux mélangés.

Dans l'onglet « atelier et cours » je crée un filtre qui permet de séparer les deux activités.

Cela permet de visualiser les tickets de manière séparés, de pouvoir choisir ce que l'on souhaite voir.
Les tickets sont organisés en une longue liste.

Je sépare les tickets en différentes catégories.

C'est pour permettre une visualisation plus facile des différents tickets.
Pour chaque achat de ticket nous sommes redirigés vers une autre page.

Je crée un ticket pour chaque atelier, avec la possibilité de choisir l'horaire qui nous convient.

Cela permet à l'utilisateur de voir de manière plus lisible les différents tickets et ainsi il sait qu'il n'achète pas un ticket inutile.
L'achat de tickets se fessait sur un autre site.

Je réalise un panier pour avoir la possibilité d'observer tout ce qui veut être acheté.

Cela permet d'avoir une vue d'ensemble.
Pour chaque achat de ticket nous sommes redirigés vers une autre page.

J'ajoute un message d'erreur si deux ateliers se déroulent en même temps.

Cela permet à l'utilisateur de ne pas acheter un ticket inutile.
L'achat de tickets s'effectue sur un autre site.

En cas de problèmes avec les tickets, ou le code coupon entré. J'ajoute un message d'erreur.

L'utilisateur est informé d'un problème éventuel.
L'achat de tickets s'effectue sur un autre site.

Je pense à un bouton panier qui se transforme en bouton pour choisir le nombre de tickets souhaités. Lors de l'ajout, une bulle près du panier affiche le nombre d'articles.

Avoir un accès rapide pour modifier le nombre ticket ainsi qu'un aperçu rapide de la quantité de chose acheté
L'achat de tickets se fait sur un autre site.

J'ajoute un aperçu rapide du panier.

Pas besoin d'accéder à la page « panier » .
Lorsqu'un ticket n'était plus disponible il devient grisé et n'est plus un bouton.

Je garde ce principe.

C'est un bon moyen de faire comprendre que ce n'est plus disponible.
Pour l'achat de ticket, nous sommes redigérés vers un autre site.

J'ajoute un message d'erreur si une activité est déjà comprise dans un ticket déjà choisi.

Cela évite l'achat de tickets inutile.
Les tickets sont organisés en une longue liste.

Le paiement se fait sur le site.

C'est plus simple pour l'utilisateur pas besoin d'aller sur plusieurs sites différents pour payer son ticket.

Malheureusement, je n'ai pas totalement compris la tâche qui nous étaents demandé. Je veux dire par là que je pouvais en effet modifier le contenu. En changeant les noms des billets, les types de tickets. Je suis donc reparti de zéro. « Il faut savoir reculer pour mieux avancer » .

Me revoilà avec une page blanche. J'établis d'abord une liste des tickets qui serait selon moi plus adéquat. Et je commence à repenser le site.

Je cherche une solution qui serait plus voyante pour afficher les erreurs entre les tickets.

Les erreurs n'étaient pas assez visiblement affichées.

Comme je change la présentation des tickets, cela ne fonctionnait plus.
J'essaye de réduire le formulaire, de me cantonner aux informations importantes.

Simplifier les données à encoder.

Je me base sur cette page pour créer la nouvelle page.
Je réfléchis à un nouvel aménagement pour les différentes catégories de tickets.

La première version donnait l'impression qu'il fallait acheter un ticket pour toutes les étapes.

Je me sers de ce qu'un de mes camarades a imaginé pour sa fonctionnalité. Je repense les catégories de tickets.
J'essaye d'imaginer comment pourrait être composée la page conférence.

Je suis trop la version orignal du site du KIKK.

J'imagine une page où on pourrait acheter les tickets séparément.
J'essaye d'imaginer comment pourrait être composée la page conférence.

Je suis trop la version orignal du site du KIKK.

J'imagine une page où on pourrait acheter les tickets séparément.
J'essaye d'imaginer comment pourrait être composé la page forfait

Je suivais trop la version orignal du site du KIKK.

Je me suis servi de ce qu'un de mes camarades avait imaginé pour sa fonctionnalité. J'ai repensé les catégories de tickets
Je cherche un autre moyen de mettre en valeur les tickets choisis.

Le simple fait qu'un bouton changeait ce n'était pas très visible.

Malheureusement, en utilisant cette méthode je ne savais pas ajouter ou retirer de ticket.
Lorsqu'on achète un forfait conférence, les tickets des conférences sont d'offices supprimés.

Le problème c'est que l'utilisateur peut réserver pour plusieurs personnes et il se peut qu'il achète un forfait et un simple ticket.

J'ai donc supprimé cette idée et l'ai ajouté comme message d'erreur.
Avant de commencer à faire mes tests sur des grandes feuilles je fais ça sur une feuille.

Après tout, protégeons nos petits arbres.

Je me suis basée sur ces croquis pour la nouvelle version.
Avant de commencer à faire mes tests sur des grandes feuilles je fais ça sur une feuille.

Après tout, protégeons nos petits arbres.

Je me suis basée sur ces croquis pour la nouvelle version.
Ce sont des petits croquis pour tester différentes fonctionnalités.

Après tout, protégeons nos petits arbres.

Ce sont mes recherches pour la nouvelle version.

Les tests utilisateurs

Nous avons réalisé 4 tests utilisateurs sur 3 scénarios différents.

Incompréhension du bouton panier.

Une fois que la sélection était faite l'utilisateur ne savait où il devait aller.
Le bouton erreur qui apparait n'est pas compris.

Lorsqu'une erreur dans les tickets est détectée le bouton apparait.

Lorsque je mettais ce bouton, aucun testeur n'a compris son utipté.
Récapituler aussi les infos de paiement et d'envoi.

Cette idée m'est venue durant un test utilisateur. Je me suis dit que les personnes pourraient ainsi être rassurées qu'elles ont bien choisi les bonnes informations

Mon projet final

Voici la version desktop améliorée grâce aux tests utilisateurs.

C'est la page sur laquelle on arrive quand on clique sur le bouton tickets. À droite, se trouvant dans les tickets qui sont repris la fonctionnalité « ma sélection » de Quentin. Et à gauche les autres tickets.
Liste des tickets par catégorie qui ne sont pas repris dans ma sélection.
Liste des tickets par catégorie qui ne sont pas repris dans ma sélection.
Liste des tickets par catégorie qui ne sont pas repris dans ma sélection.
La page erreur est l'amélioration du simple message qui était sur les anciennes versions. Dans le cas présent, l'utilisateur à une vue d'ensemble sur les différents problèmes et peut les régler sur cette page.
La page erreur est l'amélioration du simple message qui était sur les anciennes versions. Dans le cas présent, l'utilisateur a une vue d'ensemble sur les différents problèmes et peut les régler sur cette page.
La page erreur est l'amélioration du simple message qui était sur les anciennes versions. Dans le cas présent, l'utilisateur a une vue d'ensemble sur les différents problèmes et peut les régler sur cette page.
Depuis le début, j'utilise cette fonctionnalité, et je ne l'ai pas modifiée.
Depuis le début, j'utilise cette fonctionnalité, et je ne l'ai pas modifié
Le choix du nombre de tickets, se fait si on clique sur la bulle avec le nombre de tickets. Le bouton qui servait autres fois au panier est un bouton qui redirige vers les informations du ticket.
Suite à l'ajout de la fonctionnalité connexion, j'ai créé un bouton qui afficherait les anciennes commandes.
Suite à l'ajout de la fonctionnalité connexion, j'ai créé un bouton qui afficherait les anciennes commandes.
Si les erreurs ne sont pas réglées, il y a un message d'erreur qui s'affiche dans le panier.
La sélection qui est une fonctionnalité apportée par Quentin, est modifiable dans le panier. Il est possible d'ajouter et de retirer des tickets.
Lorsque l'utilisateur choisit l'option courrier pour l'envoi du ticket, il doit remplir d'autres données concernant son adresse. À partir d'une certaine date, l'option n'est plus disponible.
Les éléments que l'on sélectionne sont mis en surbrillance.
Pour ne pas confondre avec les erreurs tickets je l'ai laissée en noir et blanc et j'ai juste ajouté un bord plus foncé.
J'ai repris l'idée que si deux activités se déroulent en même temps ou qu'un ticket est compris dans un autre, il y a un message d'erreur. Mais cette fois, il se trouve au-dessus des tickets en grand, afin d'attirer l'attention de l'utilisateur.

Et maintenant voilà, la version mobile.

Conclusion

De souris à crayons, de pixels à traits, nous voilà sur papier.

Après avoir cherché les problèmes du site du KIKK, les éléments nécessaires et intéressants pour faire de ce site d'évènements un bon site. Nous nous sommes armés de nos crayons et avons dessiné nos prototypes. Cet atelier fut rempli de petits papiers en tous genres.

Lors de ce projet nous avons formé un groupe soudé près à s'aider. Nous avons critiqué les projets les uns des autres. Aidez celui-ci ou celle qui était dans une impasse.

Il a fallu penser aux moindres détails qui ferait que l'utilisateur vivra une meilleure expérience. J'ai changé, modifié je ne sais pas combien de fois mes dessins. Et quand je pensais arriver enfin à un résultat final, je me rends compte qu'il n'y a pas qu'un seul moyen d'améliorer cette page. Mais malgré tout je pense avoir répondu à la demande, de la meilleure expérience utilisateur pour l'achat d'un ticket sur le site du KIKK.