Erin Bernardoni

Erin Bernardoni

UX - Développement Web

WeeGift

Conception et Développement d’une application Web de gestion de cagnottes avec ou sans cadeaux.
Cadre
Projet universitaire de fin d’études
Temps alloué
7 mois (septembre 2022 à mars 2023)
Outils
Figma, Draw.io ReactJS, Firebase

Problème

Trouver les bons cadeaux, répartir les dépenses, se rembourser. L’organisation d’une cagnotte pour un anniversaire ou un pot de départ par exemple peut se révéler compliquée et de nombreux outils sont nécessaire pour réaliser ces différentes actions.

Solution

Nous avons désigné WeeGift, une application web qui permet de regrouper tous les outils nécessaire à l’organisation d’une cagnotte, avec ou sans cadeaux. Du choix des cadeaux, jusqu’au remboursement de tout le monde en passant par la répartition des dépenses, WeeGift permet de simplifier l’organisation de cagnottes.

Design Process

Ma contribution

Au sein de ce projet j’ai eu une double casquette d’UX designer et de développeur.

J’ai ainsi participé à la recherche UX pour définir la population cible de notre application et ses besoins. Puis, lors du design de WeeGift j’ai réalisé les différents modèles (tâche et navigation) ainsi que les protocoles de test pour les retours utilisateur. Enfin, lors de la phase de réalisation, j’ai participé au développement de l’application.

Recherche

Etude de l'existant

Dans la phase de recherche nous avons dans un premier temps réalisé une étude comparative, nous permettant de mieux cerner l’existant sur le marché, leurs points forts et points faibles. Pour chaque solution, nous avons évalué les fonctionnalités, la navigation et l’interface et design.  

Segmentation

Bien connaître la population qui pourrait être susceptible d’utiliser une solution telle que WeeGift est essentiel afin de mieux cibler les personnes interrogées pour ensuite réaliser les personas. Nous avons donc réalisé une segmentation de la population à partir des chiffres disponibles sur le web. 3 critères principaux en ressortent : le sexe, l’âge et la catégorie socio-professionnelle 

Analyse des besoins

pour mieux comprendre les besoins et nous permettre par la suite de réfléchir aux fonctionnalités indispensables de notre application, nous avons réalisé un questionnaire d’analyse des besoins (NAQ).

Personas et scénarii d'utilisation

Iva Bériault

Scénario 1

Créer une cagnotte en ligne pour un pot de départ où chacun.e est libre de participer selon leurs moyens et en s’anonymisant. Iva elle-même veut participer à la cagnotte et clôturer la cagnotte une fois que tout le monde a participé.

Scénario 2

Créer une cagnotte pour organiser un voyage avec différentes activités et un cadeau pour l’enterrement de vie de jeune fille d’une amie. A la fin du voyage, Iva veut calculer les dépenses et les répartir équitablement pour que tout le monde puisse rembourser sur l’application

Céline Tessier

Scénario 1

Rejoindre une cagnotte sans cadeaux créée par quelqu’un d’autre, y participer et voir l’avancée de la cagnotte.

Scénario 2

Créer une cagnotte avec cadeaux, inviter des personnes. Les différents participants doivent pouvoir proposer des cadeaux pour qu’au bout de quelques jours Céline puisse choisir selon les votes et commentaires des participants. Elle veut ensuite payer le cadeau et se faire rembourser des participants.

Guillaume Rombat

Scénario 1

Avoir une recommandation de cadeaux pour l’anniversaire de son meilleur ami en utilisant le système de recherche, sans se créer de compte.

Scénario 2

Utiliser le système de recommandation de cadeaux pour trouver un cadeau pour sa petite sœur en utilisant des filtres et en ajoutant ses résultats préférés dans les favoris, sans se créer de compte.

Définition

Modèle de tâches

Modèle de navigation

Idéation

Maquette Low-Fidelity (LoFi)

La première maquette qui a été réalisée pour ce projet est une maquette LoFi, qui a connu plusieurs évolutions. Nous nous sommes dans un premier temps réunies autour d’un atelier de co-conception, en utilisant la méthode “six-to-one” afin de s’accorder sur les différentes vues que nous voulions proposer pour la conception de notre interface, et sur la manière d’organiser les différentes interactions entre les pages.
Nous avons ensuite réalisé la LoFi sur Figma pour un résultat plus clair et accessible de n’importe où. Cette seconde maquette LoFi comporte cette fois des vues ordinateur et des vues mobile.

Tests utilisateurs

1. Consigne générale

Explication du déroulé du test avec le but, le temps que va prendre le test et les différentes parties afin de préparer l’utilisateur.

2. Pré-questionnaire

Questionnaire sur des informations démographiques et des informations utiles afin d’analyser les résultats du test (utilisation des cagnottes, habitudes par rapport aux cadeaux, …).

3. Déroulement du test

3 scénarii sont proposés, correspondant à des tâches plus ou moins difficiles. Lors des passations, ces scénarii sont présentés dans un ordre aléatoire afin d’éviter les biais sur l’apprentissage des écrans de l’application.

4. Post-questionnaire

Questionnaire basé sur le System Usability Scale pour scorer l’avis de l’utilisateur sur notre solution.

Dans chaque test, nous avons veillé à réaliser les passations sur une population de test correspondant au mieux à nos personas, afin d’avoir des tests les plus représentatifs possibles de notre population cible. Nous avons aussi veillé à ce que les personnes réalisant les tests sur une étape du projet ne réalise pas les tests sur une autre étape par le suite, afin d’éviter un biais d’apprentissage de l’interface de WeeGift, ce qui pourrait fausser les résultats sur la facilité d’utilisation.

Les utilisateurs ont trouvé la navigation et la présentation des éléments explicites et faciles d’utilisation. Le score moyen obtenu lors du post-questionnaire est supérieur au jalon de 85,5. Les tâches ont été réalisées dans un temps respectable (moins de 5 minutes au total) et avec une moyenne de 2 erreurs. Ces erreurs ont cependant été réalisées et identifiées comme une mauvaise compréhension de certains éléments des pages. En effet, réaliser ces tests utilisateurs nous a permis d’avoir un retour sur certains termes qui étaient clairs pour nous, mais qui, pour un extérieur, présentent une certaine confusion.

Prototypage

Charte graphique

WeeGift possède une personnalité bidimensionnelle. D’une part, WeeGift doit renvoyer une image chaleureuse et joyeuse car notre solution porte sur des cagnottes communes et de la recherche de cadeaux. D’autre part, comme il est question d’argent, son image doit également inspirer le sérieux et la confiance.

Nous avons donc fait le choix de représenter ces deux dimensions avec l’utilisation de deux couleurs principales : une teinte plutôt chaude qui renvoie plutôt à un sentiment de joie et une teinte plus froide transmettant la sécurité, l’honnêteté et la confiance. Cette charte graphique permet aussi d’avoir de bons contrastes pour l’accessibilité du site.

Au niveau de la typographie, nous avons choisi la police “Outfit”, qui possède un style moderne et élégant. En outre, cette police est facile à lire et possède plusieurs variantes, ce qui nous permet de jouer sur l’épaisseur.

Enfin, dans le but de renforcer la personnalité chaleureuse et heureuse de WeeGift, nous avons décidé de créer une mascotte nommée “Gifty”, aux airs kawaii. Cette mascotte permet d’humaniser le site en créant un lien émotionnel avec les utilisateurs et elle permet à certains endroits de guider les utilisateurs.

Maquette High-Fidelity (HiFi)

La maquette HiFi de WeeGift a été directement réalisée sur Figma et un prototypage (lien entre les différentes pages simulant les clics sur l’interface) a été mis en place afin de mieux se rendre compte du produit fini, mais aussi permettre la réalisation de tests utilisateurs.

Tests utilisateurs

Le déroulé des tests utilisateurs était le même que pour la maquette LoFi, avec des participants différents afin d’éviter un biais d’apprentissage.

Une première analyse s’est faite sur les métriques du temps de réalisation, nombre de clics, nombre d’erreurs. Les utilisateurs tests ont réalisé des temps inférieurs aux temps maximaux définis dans les métriques ainsi qu’un nombre de clic correspondant à ce qui était imaginé. Un score au questionnaire SUS de 82,52 a été obtenu, traduisant des incohérences relevées sur les pages de recommandations de cadeaux.

Des erreurs ont cependant été observées, nous permettant de mieux comprendre le cheminement de pensée d’utilisateurs qui découvrent notre solution et ainsi de rectifier le tir.

Scroll to Top