- projet en alternance -
Refonte d’application self-scanning
- début de 2024
Problématique : « Comment inciter à l’utilisation régulière de la solution self-scanning sur les scannettes ? »
Contexte : alternance et projet final d’études
Support : scanette sous OS d’android
Rôle : chargée UX / UI design
Outils : Figma, Illustrator, After Effects
- à propos de -
SELF-SCANNING
Le self-scanning est un système permettant aux clients de scanner et de payer eux-mêmes leurs articles sans passer par une caisse traditionnelle. Ils utilisent un lecteur de code-barres (aussi appelé « scanette ») pour scanner les articles, puis effectuent le paiement au terminal de self-scanning.
scanette
Modéle : ZEBRA PS20
Écran : 4″ (taille d’une carte bancaire)
OS : android
- Étapes -
planification
– récupération de besoin
– revue de l’existant
exploration
– benchmark
– inspirations
– analyse des retours d’utilisateurs
sur l’application existante
idéation
– persona
– parcours utilisateurs
– arborescence
conception
– maquette fonctionnelle
– maquette graphique
– prototypage dynamique
évaluation
– test utilisateurs
– entretiens
– questionnaire
- Observations -
Après un audit interne, des benchmarks concurrentiels et des analyses UX (personas et parcours utilisateurs) ont été réalisés, ainsi que l’analyse des retours des utilisateurs. Ces étapes ont permis d’identifier des axes d’amélioration, de nouvelles fonctionnalités et les exigences essentielles pour optimiser l’expérience utilisateur et atteindre les objectifs du projet.
Axes d'amélioration
- Rendre l'interface simple, intuitive et moderne
- Améliorer les écrans, notamment «fiche de produit», «panier» et «récapitulatif»
- Optimiser le suivi des dépenses et des économies
- Regrouper les avantages promotionnelles et les mettre en évidence
- Ajouter plus d'accompagnement visuel et textuel
- Proposer un historique des achats
exigences
- L'interface doit permettre la personnalisation pour chaque enseigne
- Le produit doit être largement accepté par les utilisateurs finaux
- Le design doit garantir que toute information irrécupérable est gérée de manière à ne pas compromettre l'expérience utilisateur
- Le design doit être optimisé pour fonctionner sur des petits écrans de scannettes
- Le produit doit intégrer et permettre la personnalisation des différentes politiques et formes d'avantages des enseignes
- Arborescence -
Suite à la révision de l’arborescence, plusieurs ajustements ont été apportés :
- Amélioration de la navigation : Les pages « accueil », « panier », « menu » (désormais renommé « plus ») et d’autres ont été modifiées pour améliorer la navigation et l’expérience utilisateur en simplifiant l’accès aux informations importantes ;
- Pages regroupées : Tous les avantages promotionnels ont été regroupés dans une nouvelle page « avantages », qui a remplacé la page « coupons » dans le but d’offrir une meilleure organisation des contenus, facilitant la recherche et l’utilisation des fonctionnalités par l’utilisateur;
- Nouvelles pages ajoutées : Une nouvelle page « plus d’informations » a été intégrée pour offrir un récapitulatif de la course à l’utilisateur avant la finalisation, et une page « aide » a été créée, permettant aux utilisateurs de se familiariser avec l’utilisation de la scannette via une FAQ, ainsi que de remplir une enquête de satisfaction permettent une meilleure interaction utilisateur et un retour constant pour l’amélioration du produit.
Avant
après
Modifications
*Faites glisser le curseur (< >) pour visualiser les différences entre les versions avant et aprés.
- Panier -
Les modifications de « panier » sont suivantes :
- Accès facilité au récapitulatif : Le panier a été déplacé vers le bas de la page avec un bouton à droite pour accéder facilement au récapitulatif complet ;
- Organisation optimisée des informations : Les avantages économiques sont maintenant visibles à gauche, tandis que le total à payer est affiché à droite, offrant un aperçu clair des économies effectuées ;
- Détails enrichis sur les produits : Chaque article inclut désormais des informations textuelles et visuelles enrichies pour une meilleure compréhension des articles choisis ;
- Interaction intuitive pour la gestion du panier : Ajout d’une fonctionnalité permettant de supprimer un article par un simple glissement vers la droite, rendant la gestion du panier plus fluide.
*Faites glisser le curseur (< >) pour visualiser les différences entre les versions avant et aprés.
- Fiche d'article -
Modifications principales :
- Enrichissement des informations sur les produits : Chaque article est désormais présenté avec des détails textuels et visuels approfondis, permettant aux utilisateurs de mieux comprendre les caractéristiques et avantages du produit ;
- Affichage des promotions spécifiques : Les promotions liées à chaque article sont clairement mises en avant, avec une visualisation directe de coupons ou d’offres spéciales, illustrée par des images comparatives à côté du texte ;
- Amélioration de l’ergonomie des commandes : Les options pour modifier la quantité d’un article ont été déplacées vers le bas de la scanette, rendant la manipulation plus intuitive et accessible lors de l’utilisation en mouvement ;
- Ajout à la liste des favoris : Une nouvelle fonctionnalité permet désormais aux utilisateurs d’ajouter des articles à leur liste de favoris en un clic, facilitant les futurs achats et la personnalisation de l’expérience de shopping.
- Coupons et autres avantages -
Les pages suivantes ont été repensées pour centraliser et améliorer l’accès aux bénéfices liés à la fidélité et aux promotions :
- Centralisation des avantages : La nouvelle page « avantages », qui remplace les anciennes pages « accueil » et « coupons », centralise désormais toutes les informations relatives aux promotions et à la fidélité. Elle regroupe le solde de fidélité, les économies réalisées grâce aux promotions récentes, et offre un accès direct à des fonctionnalités telles que l’historique de la fidélité et les coupons en cours, rendant l’expérience utilisateur plus fluide et intégrée ;
- Flexibilité et personnalisation : Cette page est conçue pour être modifiable selon les besoins spécifiques de l’enseigne, permettant l’ajout facile de nouveaux liens ou informations en fonction de la politique promotionnelle ;
- Gestion améliorée des coupons : Les coupons doivent désormais être activés manuellement, offrant plus de contrôle et de clarté aux utilisateurs. Une fonctionnalité permet également d’activer tous les coupons en un seul clic ;
- Optimisation de l’affichage des coupons : Bien que présentés sous un format plus compact pour une meilleure organisation, les coupons peuvent être agrandis sur tout l’écran afin d’en examiner tous les détails ;
- Suivi des activations : Un décompte clair des coupons activés et non activés est disponible, facilitant la gestion des avantages par les utilisateurs.
Avantages
Coupons
- Finalisation -
- Hiérarchie d’information améliorée : Les informations sont maintenant regroupées et hiérarchisées de manière plus prononcée pour fournir une vue d’ensemble claire et directe des éléments essentiels avant le paiement ;
- Modification des commandes de navigation : Le bouton « retour », qui renvoyait précédemment à la page de connexion, a été remplacé par un bouton « terminer définitivement ». Ce changement vise à encourager une conclusion plus directe et définitive de la session d’achat ;
- Épuration du contenu : Des messages et des images moins pertinents ont été supprimés afin d’optimiser l’espace et de concentrer l’attention sur les informations cruciales.
