Phase d’idéation et prototypage
Utilisation des données de marque et recherche
Malheureusement, je n’ai pu avoir accès qu’à peu de données utilisateurs de l’application existante, je me suis donc appuyée sur des recherches basées sur les bonnes pratiques des applications liées à l’alimentation.
Avant de commencer la refonte, une app-map de l’application actuelle a été réalisée afin de lister l’ensemble des fonctionnalités.
Création des lo-fis
S’appuyant sur les meilleures pratiques en matière de design d’interfaces pour applications mobiles dans le secteur alimentaire, nous avons développé des prototypes low-fidelity (lo-fi) axés principalement sur :
- L’amélioration de l’onboarding : mettre l’utilisateur en confiance, tant lors de sa première connexion que lors du scan de ses articles, le paiement étant automatique une fois la porte du frigo fermée. Ce comportement spécifique à l’expérience Fraîche nécessite de l’accompagnement et de la réassurance.
– La refonte de l’écran d’accueil : mettre en avant, d’un coup d’œil et sans défilement les trois fonctionnalités principales (le frigo associé à l’entreprise de l’utilisateur, les crédits distribués par l’entreprise, et son portefeuille numérique).
- La refonte de l’écran du programme de fidélité afin de le rendre plus ergonomique et pédagogique
- L’intégration d’un nouveau système de paiement via un portefeuille numérique (voir ci-dessous)
Repenser la monétisation de l’expérience en intégrant une nouvelle fonctionnalité au parcours de paiement représente un changement complexe et une nouveauté totale pour les utilisateurs de l’application.
Le principe est le suivant : un portefeuille numérique se rechargeant par carte, Apple Pay, Google Pay et Paypal remplacera le paiement direct par carte pré-enregistrée actuellement en place. Cela implique la gestion de plusieurs situations:
- Accès au frigo: un utilisateur ne disposant plus de crédits distribués par son entreprise ne pourra ouvrir le frigo qu’avec un montant minimal supérieur à -$5 dans son portefeuille.
- Auto-approvisionnement : le rechargement automatique du portefeuille est rendu possible si une carte est enregistrée au niveau du compte. Lorsque le portefeuille de l’utilisateur passera en dessous du montant minimal, ce dernier sera automatiquement réapprovisionné pour atteindre 0.
Ce système permet d’intégrer plus de moyens de paiement à l’expérience ; notamment la possibilité d’une expérience complète sans carte enregistrée sur l’application. De plus, cela réduit les risques de transaction échouée au cours du parcours d’achat.
Ce processus créatif a été mené en collaboration avec le CTO de Fraîche pour assurer l’alignement technique des solutions envisagées, garantissant ainsi une intégration fluide des nouvelles fonctionnalités tant au niveau du back-end que du front-end.
Style guide et tests utilisateurs
Un style guide a été élaboré, s’appuyant sur les éléments de la nouvelle identité visuelle de la marque. Par la suite, des tests utilisateurs ont été menés pour valider les choix de design et recueillir des retours précieux, permettant d’affiner davantage l’interface et l’expérience proposées.
Tests utilisateurs
Dans le contexte de notre démarche continue et d’itération de l’UX/UI au cours de ce projet, la phase de tests utilisateurs s’est avérée être un point essentiel dans notre processus de validation des fonctionnalités et de l’interface utilisateur.
Élaboration du Guide d’Entretien Utilisateurs
Pour mener à bien les tests, nous avons mis en place un guide d’entretien utilisateurs afin de récolter au mieux leurs retours concernant la nouvelle application. Ce guide nous a permis de fluidifier la communication et de cadrer les sessions de tests autour de nos principaux objectifs, assurant ainsi une collecte de données la plus précise et pertinente possible.
Mise en Place et Déroulement des Tests
La mise en œuvre de ces tests a été rendue possible grâce à la mobilisation de la responsable marketing de Fraîche qui a pu se rendre directement chez certains des clients à Manhattan. Cette approche de terrain a non seulement facilité un échange direct mais a également permis d’observer les utilisateurs en situation réelle d’utilisation, offrant ainsi un aperçu authentique de leur interaction avec l’application.
Observations et Retours d’Expérience
Les sessions de test ont généré une multitude de retours, mettant en lumière les points de friction existants ainsi que les éléments particulièrement appréciés par les utilisateurs.
Les principales observations sont :
- Une confusion existe entre le mot “Wallet” et “Credits”
- Une action cliquable est manquante sur l’espace frigo du homescreen
- L’affichage des partners sur le homescreen n’est pas utile
- L’action pour éditer un paiement n’est pas très claire
- Une confusion sur un bouton dans le parcours du scan
- 100% des utilisateurs ont apprécié la nouvelle UI de l’application
Ces observations ont été précieuses pour identifier les axes d’amélioration prioritaires, notamment en ce qui concerne la fonctionnalité de scan et la visibilité des produits, tout en confirmant l’attrait et l’efficacité de la nouvelle interface utilisateur.
Réajustements et Optimisations
Grâce à ces retours, nous avons pu prioriser les ajustements nécessaires. Le guide d’entretien utilisateurs a donc joué un rôle crucial dans ce processus, permettant de traduire les insights récoltés en actions concrètes et mesurées.
Cette démarche méthodique assure non seulement une amélioration continue de notre application mais renforce également notre engagement envers une expérience utilisateur optimale, en phase avec les attentes et besoins de la clientèle de Fraîche.
En résumé, le guide d’entretien utilisateurs a été l’instrument clé de cette phase de test, facilitant une collecte de données structurée et une compréhension approfondie des interactions des utilisateurs avec l’application Fraîche. Cette approche stratégique souligne la détermination de la marque à peaufiner sa solution, en accord avec sa vision d’offrir une expérience utilisateur intuitive, engageante, et enrichissante.
La refonte a abouti à une application modernisée et intuitive, grâce à une nouvelle barre de navigation omniprésente, un onboarding optimisé, et une expérience de paiement enrichie.
- L’onboarding est plus clair : trois étapes permettant à l’utilisateur d’accéder à l’écran d’accueil sur lequel un layer tutoriel en quatre bulles met en évidence les fonctionnalités principales.
- La fonctionnalité de paiement est plus puissante, avec l’ajout de méthodes de paiement supplémentaires telles qu’Apple Pay, Google Pay, et PayPal venant renforcer la modernité de l’application également
- Le système de « portefeuille » virtuel facilite les transactions des utilisateurs.
- L’écran d’accueil est plus moderne, mettant mieux en avant les trois fonctionnalités principales.
- L’écran du loyalty program est plus facile à scanner car mieux structuré, plus léger et axé sur la pédagogie.
Les retours des tests utilisateurs ont été positifs, soulignant une nette amélioration de l’expérience globale.
Handoff et développement
A l’issu du travail de création et d’itération, un handoff à été crée afin de garantir la conformité de l’UX et de l’UI à l’intégration.
Le développement de l’application, basé sur le framework Flutter pour une performance optimale sur toutes les plateformes, est en cours avec un lancement prévu pour le premier trimestre 2024.
Résultats et prochaines étapes
Cette refonte est une étape significative dans l’évolution de Fraîche, en renforçant son engagement à offrir une expérience utilisateur optimale. Durant et à la suite de cette dernière, nous pourrons suivre en continu les retours et itérer le flow pour de futures releases !