Léa Ladjevardi

Webmaster, graphiste et illustratrice

Conception application Ton bouquet

Ton bouquet

Dans le cadre de la formation UX Design de Google Career Certificate, j’ai réalisé ce projet pour lequel j’ai utilisé le logiciel Figma.

Aperçu du projet

Projet UX-UI Design Ton bouquet

Le produit

Ton bouquet est une application de vente de fleurs qui a la particularité d’offrir aux utilisateurs la possibilité de composer leurs propres bouquets.

Durée du projet

De août 2023 à octobre 2023.

Le problème

Les passionnés par les fleurs qui achètent des bouquets en ligne aimeraient les composer eux-mêmes.

L'objectif

Concevoir une application pour la boutique en ligne Ton bouquet qui permet aux utilisateurs de composer leurs bouquets en ligne et de les commander.

Mon rôle

UX Designer concevant une application pour Ton bouquet de la conception à la livraison.

Responsabilités

Conduite d'entretiens, maquettage papier et numérique, prototypage basse et haute-fidélité, réalisation d'études d'utilisabilité, prise en compte de l'accessibilité et itération des conceptions.

Comprendre l'utilisateur

Recherche utilisateur

Résumé

J’ai mené des interviews et créé des cartes d’empathie pour comprendre les utilisateurs pour lesquels je conçois et leurs besoins. Un groupe d’utilisateurs principal identifié par la recherche était les femmes adultes actives qui n’ont pas le temps de se rendre chez le fleuriste mais qui aiment offrir des fleurs pour les grandes occasions. Ce groupe d’utilisateurs a confirmé l’intérêt des participants de composer leurs propres bouquets, mais la recherche a également révélé que l’origine et la qualité des fleurs étaient des facteurs importants. Parmi les autres problèmes des utilisateurs, citons les appréhensions liées aux problèmes de livraison.

Points sensibles

Numéro 1

Odeurs des fleurs

Commander en ligne ne permet pas de sentir l'odeur des fleurs.

Numéro 2

Origine

Les femmes trentenaires sont particulièrement sensibles aux origines des fleurs (bio ou non, provenance, etc.)

Numéro 3

Qualité

Comme il s'agit essentiellement d'un cadeau et qu'on ne voit pas le résultat car livré directement à la personne à qui on offre les fleurs, les utilisateurs ont peur que les fleurs arrivent fanées.

Numéro 4

Livraison

Plusieurs inquiétudes au niveau de la livraison : que le bouquet arrive en retard ou que le bouquet arrive en l'absence de la personne à qui on offre les fleurs.

Persona

Énoncé de problème 

Sarah est une artiste passionnée par les fleurs qui a besoin de composer elle-même son bouquet de fleurs car elle souhaite choisir ses fleurs et créer une harmonie de couleurs.

Carte du parcours utilisateur

Objectif : composer un bouquet de fleurs en ligne et le faire livrer à une amie pour son anniversaire

Commencer la conception

Maquettes papier

Pour l’écran d’accueil, j’ai privilégié un processus d’accès simple aux 2 possibilités offertes par l’application : commander un bouquet déjà composé ou composer son propre bouquet. Des étoiles ont été utilisées pour marquer les éléments de chaque croquis qui seraient utilisés dans les wireframes numériques initiales.

Maquettes papier projet UX-UI Design Ton bouquet

Des étoiles ont été utilisées pour marquer les éléments de chaque croquis qui seraient utilisés dans les maquettes numériques initiales.

Maquettes numériques

Lors des entretiens, j’ai pris conscience à quel point la possibilité de composer le bouquet était important pour les utilisateurs.
A plusieurs reprises, le besoin de voir le bouquet final est ressorti durant cette enquête.

Maquettes numérique projet UX-UI Design Ton bouquet

Les utilisateurs ont montré le besoin de pouvoir naviguer facilement sur l’application. C’est pourquoi le menu est accessible à tout moment en cliquant sur les 3 barres qui se trouvent en haut à gauche.

Maquettes numérique 2 projet UX-UI Design Ton bouquet

Prototype basse-fidelité

Le prototype basse-fidélité implémentait le flux principal des utilisateurs consistant à composer un bouquet et à le commander. Le prototype pouvait être utilisé dans une étude d’utilisabilité avec les utilisateurs.

Étude sur la facilité d'utilisation : conclusions

La première étude m’a donné la possibilité de comprendre l’expérience utilisateur pour concevoir des maquettes fonctionnelles. Pour la deuxième étude, j’ai utilisé un prototype haute-fidelité. Cette dernière m’a permis de comprendre sur quels points je devais intervenir pour affiner mes maquettes

Conclusions du tour 1

Numéro 1 Besoin d’accéder facilement à la composition du bouquet

Numéro 2 Besoin de plus d’options de personnalisation du bouquet

Numéro 3 Besoin de pouvoir modifier sa commande avant d’accéder au panier

Conclusions du tour 2

Numéro 1 L’utilisateur a tendance à vouloir cliquer sur le bouton de droite quand il y en a 2 ou sur la photo quand il y a 1 photo et 1 bouton

Numéro 2 Besoin d’être informé par un message suite à l’ajout d’un produit dans le panier

Numéro 3 Besoin de ne pas créer de compte pour commander

Peaufiner la conception

Maquettes

Pour les premières conceptions, j’ai imaginé la distinction des bouquets déjà composés et les bouquets à personnaliser dès la page d’accueil. J’ai gardé cette idée après l’étude d’utilisabilité mais j’ai remarqué lors des tests que les utilisateurs ont tendance à cliquer sur le premier bouton. La particularité de l’application étant la personnalisation du bouquet, j’ai inversé les 2 boutons.

Maquettes projet UX-UI Design Ton bouquet

La deuxième étude d’utilisabilité a révélé une frustration au moment de l’ajout d’un produit au panier car aucun message ne rassure l’utilisateur sur le bon fonctionnement de cette action. De plus, l’utilisateur a besoin de connaître régulièrement le montant total de ses achats avant de se rendre à son panier. J’ai donc ajouté un petit texte qui monte à chaque ajout au panier.

 

Maquettes 2 projet UX-UI Design Ton bouquet

Maquettes clés

Maquettes clés projet UX-UI Design Ton bouquet

Prototype haute-fidelité

Le prototype haute-fidélité final a présenté des flux utilisateurs plus intuitifs pour la composition et la commande d’un bouquet.
Voici le prototype haute-fidélité de Ton bouquet.

Accessibilité

Numéro 1

Le contraste entre le texte et l'arrière plan est suffisant pour assurer la lisibilité.

Numéro 2

Les boutons sont facilement repérables et cliquables.

Numéro 3

Des icônes cohérentes facilitent la navigation.

Pour aller de l'avant

Points à retenir

Impact

Les utilisateurs apprécient la facilité qu’offre l’application pour composer un bouquet et le commander.
Un extrait du feedback des pairs : « Navigation claire et fluide, avec des transitions. »

Ce que j'ai appris

Lors de la conception de l’application Ton bouquet, j’ai appris que les échanges avec les utilisateurs permettent de réfléchir à des problématiques auxquelles on n’avait pas pensé au début de la conception. Le feedback des pairs m’a permis de revoir certains points plus techniques, notamment au niveau de la navigation.

Prochaines étapes

Numéro 1

Réaliser une autre série d'études d'utilisabilité pour vérifier si les problèmes rencontrés par les utilisateurs pour composer leur bouquet et le commander ont été efficacement traités.

Numéro 2

Faire évoluer l'application en effectuant des recherches utilisateur afin de répondre à de nouveaux besoins.

Numéro 3

Continuer à mesurer l'efficacité en analysant les Indicateurs Clés de Performance (ICP).

Merci d’avoir examiné mon travail sur l’application Ton bouquet !
Si vous souhaitez en savoir plus, contactez-moi.