L'Atelier des Fleurs
Problème
Les salariés et travailleurs indépendants n’ont pas le temps avec leur impératifs d’horaires de travail de venir en boutique, pour choisir, composer ou se faire conseiller dans l’achat d’un bouquet.
Solution
Concevoir une application pour un fleuriste : l’Atelier des Fleurs, qui permet aux utilisateurs de commander des fleurs, pour tous types d’ événements, sans fautes de goût et de récupérer aisément, soit sur place avec le click and collect ou de se faire livrer.
Processus de conception centré sur l'utilisateur
Brainstorming et idéation
J’ai mené des entretiens et créé des cartes d’empathie pour comprendre les utilisateurs pour lesquels je conçois et leurs besoins. Un groupe utilisateur principal, identifié grâce à la recherche était des salariés, gérants d’entreprise, auto-entrepreneurs ou non actifs : retraités, congé parental. Ils n’ont pas forcément le temps de se déplacer pour acheter des fleurs, à cause du travail ou d’obligations personnelles. Ce groupe utilisateur a confirmé ce constat, mais la recherche a également révélé que le temps n’était pas le seul facteur clé.
Les autres problèmes des utilisateurs comprenaient le fait qu’il ne savaient pas vers quoi s’orienter pour acheter un bouquet à offrir à une connaissance pour une occasion spéciale, donc un souci d’assistance-conseil et d’aiguillage a aussi été pris en compte.
Recherche d’utilisateurs et création de persona
Le persona est basé sur les résultats de nos entretiens et de notre enquête.*
Enoncé de problème : Linda est une femme très active, dont la part de travail occupe une grande partie de ses journées. Elle a besoin d’une option qui lui permet d’acquérir un bouquet, sans que cela ne pâtisse à son emploi du temps bien chargé.
*Deux autres persona ont été créés
Carte du parcours utilisateur
La cartographie du parcours utilisateur de Linda a révélé à quel point il serait utile pour les utilisateurs d’avoir accès à une application l’Atelier des Fleurs dédiée, simple, rapide et efficace.
Linda veut offirer des fleurts à son amie qui l’a invitée à dîner ce soir :
Démarrer la conception
Maquettes papier
Prendre le temps de rédiger des itérations de chaque écran de l’application sur papier a permis de garantir que les éléments qui ont constitué les maquettes numériques seraient bien adaptés pour résoudre les problèmes des utilisateurs. Pour l’écran d’accueil, j’ai privilégié de mettre les principaux catégories de l’application en avant.
*Des étoiles marquent les éléments de chaque croquis qui seraient utilisés dans les maquettes numériques initiales (home V-1).
Maquettes numériques
Au fur et à mesure que la phase de conception initiale se poursuivait, je me suis assurée de baser les conceptions d’écran sur le feedback et les résultats de la recherche utilisateur.
La navigation aisée était un besoin utilisateur clé dans les conceptions, en plus d’équiper l’application pour qu’elle fonctionne avec des technologies d’assistance.
Prototype basse-fidélité
En utilisant l’ensemble de maquettes numériques, j’ai fait un prototype basse-fidélité. Le principal flux utilisateur que j’ai connecté consistait à acheter un bouquet pour un anniversaire, de sorte que le prototype puisse être utilisé dans une étude d’utilisabilité.
Études d’utilisabilité : conclusions
Une première étude d’utilisabilité a été menée. Les conclusions ont aidé à orienter les conceptions des maquettes fonctionnelles aux maquettes. La deuxième, avec le prototype haute-fidélité a permis de pointer les aspects qui devaient être affinés.
Affiner la conception
Maquettes
Après les études d’utilisabilité, j’ai rajouté un bouton pour cliquer et aller directement sur la catégorie bouquet, pour que les utilisateurs voient cette option lorsqu’ils arrivent pour la première fois sur l’écran. Puis j’ai allégé en supprimant l’icône de recherche qui n’est pas indispensable selon les retours d’études.
Après la deuxième étude, les utilisateurs ne savaient pas si oui ou non, ils avaient une commande en cours. Du coup, le panier est surmonté d’une pastille qui indique le nombre d’éléments qu’il contient. Par ailleurs des fonds de couleur ont été ajoutés, pour une meilleure perception de chaque partie qui composent la page. Ils peuvent aussi fermer la page, avec l’ajout de l’icône de la croix quand ils le souhaitent.
Les maquette clés
En binôme avec le développeur au fur et à mesure et que je lui envoyais mes designs, j’ai pu établir les 4 écrans principaux, avec le placement des éléments et des icônes de navigation.
Prototype haute-fidélité
Le prototype haute-fidélité final a présenté un flux utilisateur la commande d’un bouquet via le bouton sur la page d’accueil. Il a également répondu aux besoins utilisateur sur le panier avec la quantité indiquée et divers ajustement de valeur de couleur et de structure pour une meilleur compréhension des pages.
Considérations relatives à l’accessibilité
Pour aller plus loin
Points à retenir
Impact :
L’application répond aux majeures attentes et besoins des utilisateurs. Elle semble facile à comprendre et à utiliser. Elle doit aussi tenir compte de tous les utilisateurs. Elle se doit d’être équitable et inclusive.
Prochaines étapes
Spécifications techniques
Pour mes wireframes et prototypes j’utilise Figma. C’est un excellent outil pour travailler en front-end et qui possède une très grande communauté 🙂
