Design UX/UI pour les applications logicielles embarquées de vente au détail

L'expérience d'une station-service entièrement intégrée

Commerce de carburants

Applications embarquées

Switzerland

Station-service de Zurich (Suisse) où la recherche a été effectuée
LOCATIONSwitzerland
TEAMDirecteur créatif, chercheur UX, designer UX, designer d'interaction, designer UI, chef de projet, delivery manager, architecte logiciel, product owner

En tant que l'un des principaux réseaux de stations-service de Suisse, ils offrent un large éventail de services, notamment des supermarchés, des cafétérias et des services aux automobilistes.

L'objectif est d'améliorer l'expérience du client en réduisant les frictions. Cela signifie une révision de la convivialité du logiciel de point de vente utilisé par les caissiers et l'introduction d'un écran client à la caisse. Au-delà de l'expérience classique du point de vente (POS), ils ont voulu concevoir un automate de paiement à l'extérieur du magasin, une application mobile et une application carplay.

Ils ont engagé notre agence de design UX/UI pour soutenir ce projet de design stratégique. Nous avons commencé par une étude approfondie des utilisateurs sur place en Suisse. Nous avons ensuite élaboré une nouvelle carte de l'expérience client de bout en bout et conçu l'UX et l'UI pour chaque application de point de vente, une par une.

NOS CONTRIBUTIONS

Recherche sur l'utilisateur

Design UX

Tests auprès des utilisateurs

Prototypage

Design UI - Système Design

Architecture de l'information

Assurance qualité

La recherche des utilisateurs a été effectuée à la station-service de Kloten, près de Zurich

ON SITE USER RESEARCH IN SWITZERLAND

L'équipe de recherche de notre agence UX a passé une semaine en Suisse pour effectuer des recherches sur les utilisateurs dans les stations-service de la région de Zurich. Nous avons rencontré des chefs d'équipe expérimentés, des gérants de station et des personnes en formation.

Nous avons appliqué un mélange de méthodes de recherche utilisateur, à la fois quantitatives et qualitatives, pour créer une image complète de ce qui doit changer. La recherche UX a été réalisée en allemand, l'une des compétences linguistiques de l'agence de design UX.

Station-service où des recherches sur les utilisateurs ont été menées dans le cadre du projet de conception de points de vente
L'utilisateur d'un point de vente à la caisse d'une station-service est filmé dans le cadre d'une étude d'observation de la recherche sur les utilisateurs
Interviewer assis à une table dans une station-service à Zurich parlant à un utilisateur de l'application de vente au détail POS

BECOME A CLERK TO KNOW A CLERK

L'objectif de la recherche sur les utilisateurs était de découvrir les complexités et les points douloureux rencontrés par les caissiers lors de l'utilisation de l'application POS.

Les entretiens avec les utilisateurs nous ont donné un point de départ, mais l'observation systématique de la manière dont ils utilisent l'application POS pour servir les clients nous a donné un aperçu quantitatif des goulets d'étranglement en matière d'utilisabilité. Pour aller plus loin, nos designers UX/UI ont travaillé aux côtés des caissiers dans le cadre d'une recherche en design participative. En déjeunant avec eux, nous avons appris les défis auxquels ils sont confrontés au-delà de l'ergonomie du point de vente.

User persona of retail POS application shwoing pain points and task breakdown
Présentation du persona utilisateur d'un caissier qui utilise régulièrement un logiciel de point de vente

HOW UX PAIN POINTS EMERGE IN RETAIL POS APPS

Les applications de point de vente traitent des centaines de types de transactions. En cartographiant les données de la recherche UX, nous avons créé un inventaire des scénarios qui génèrent des problèmes.

Il existe des schémas dans la manière dont les points douloureux de l'interface utilisateur apparaissent. Il s'agit généralement de petites complexités UX/UI qui s'accumulent dans la vie réelle et qui compromettent une transaction qui prend trop de temps. Ces problèmes de design UX ne peuvent être découverts que dans la vie réelle, ils ne peuvent pas être anticipés dans le processus de design.

Diagramme de l'expérience utilisateur montrant les points de douleur dans l'utilisation d'un logiciel de point de vente

UX CHALLENGES ARE AMPLIFIED BY THE CONTEXT

Dans la vie réelle, les applications de point de vente fonctionnent dans un contexte complexe. En effectuant des recherches sur place auprès des utilisateurs et en participant directement, nous avons cartographié les facteurs contextuels qui faussent l'utilisation du système de point de vente.

Nous avons découvert des dizaines de facteurs UX contextuels, tels que l'éblouissement sur l'écran du point de vente produit par l'éclairage au plafond ou la façon dont la disposition du bureau rend difficile l'utilisation de certaines zones de l'écran tactile du point de vente.

Système de point de vente dans une station-service avec mise en évidence des facteurs qui influencent l'expérience de l'utilisateur

COMPARATIVE ANALYSIS OF POS USER FLOWS

Nous avons comparé l'expérience utilisateur d'autres systèmes de point de vente. Dans cette analyse détaillée, nous avons comparé et contrasté les solutions à la lumière des scénarios que nous avons découverts lors de la recherche sur les utilisateurs.

Cet examen systématique des designs de l'expérience utilisateur des concurrents a révélé une foule de choses à faire et à ne pas faire applicables au projet. Il nous a aidés à affiner l'approche de designs UX qui en a découlé.

Analyse comparative des flux d'utilisateurs de l'application POS

PROTOTYPAGE ET ESSAI DE SOLUTIONS POUR LE DESIGN DE L'AFFICHAGE

Nous avons créé des prototypes pour différentes approches de l'expérience utilisateur. Chacune d'entre elles était une combinaison d'agencements d'interface et de traitement des flux d'utilisateurs.

Une comparaison systématique des avantages et des inconvénients de chaque approche a été présentée à l'équipe de projet du client et nous avons choisi ensemble celles qui seraient testées avec les utilisateurs. Ce processus itératif de design UX nous a permis de nous concentrer et de livrer rapidement. En seulement 6 semaines, nous avons terminé la solution UX pour l'application POS et le développement a commencé.

Prototype haute fidélité d'un système de point de vente embarqué pour la vente au détail de produits pétroliers
Deux stations-service côte à côte illustrant l'opération de vente au détail dans l'étude de cas de design UX

SELF CHECKOUT EXPERIENCE FOR GAS STATIONS

Le terminal de paiement extérieur est le point de départ de l'expérience de libre-service dans les stations-service. Il est disponible 24 heures sur 24, 7 jours sur 7, en quatre langues et en deux devises. L'expérience du self checkout dans les stations-service est unique dans le monde du commerce de détail, car les transactions sur l'essence impliquent le système de la pompe.

L'interface utilisateur du terminal a été conçue pour fonctionner dans différentes conditions. Par exemple, le froid extrême en hiver a un impact et la nuit, les couleurs de l'interface utilisateur s'adaptent pour être plus accueillantes.

Interface utilisateur montrant l'expérience de l'utilisateur d'un terminal de caisse automatique pour la vente au détail de produits pétroliers

ITERATIONS LEAD TO A SIMPLE USER EXPERIENCE

Dans une approche itérative avec 6 sprints de design, nous avons créé plusieurs wire-flows et les avons testés. Nous avons affiné l'interface utilisateur de chaque écran, en supprimant des éléments d'interface pour réduire la complexité. À chaque fois, nous avons testé les designs pour nous assurer que nous n'étions pas allés trop loin.

L'étude des utilisateurs réalisée au cours des phases précédentes a été utile pour rendre l'interface utilisateur de la caisse simple. Par exemple, de courtes déclarations placent les données de la transaction dans leur contexte et les utilisateurs font l'expérience de la clarté.

Illustrations pour guider les utilisateurs du terminal de self checkout pour stations-service

SUPPORT FOR DEVELOPMENT

Les systèmes embarqués sont dotés de capacités matérielles spécifiques qui ont été prises en compte dans le processus de design UX/UI. Le design UI reflète l'aspect de la machine et prend en compte les spécifications de l'écran.

Nous avons facilité la mise en œuvre par les développeurs du design de l'UI du terminal de caisse en préparant un système de design. Ils utilisent maintenant le système de conception pour maintenir et mettre à jour le système de manière indépendante.

Design UI pour un système embarqué dans lequel les utilisateurs sélectionnent la méthode de paiement dans le cadre de l'expérience de self checkout
Détail de l'expérience utilisateur lorsque les utilisateurs soumettent les détails de leur carte dans l'interface de self checkout
Design systm showing the UI components of the self checkout for petrol retail including buttons, graphics and states

THE CAR PLAY APP COMPLETES THE USER EXPERIENCE

Pour compléter l'expérience client, nous avons conçu une application "car play". Il s'agit d'une application native pour les voitures qui détecte automatiquement lorsque vous vous arrêtez dans une station-service. Elle sait également à quelle pompe vous vous êtes arrêté. Il ne vous reste plus qu'à faire le plein et à repartir.

L'application car play intègre la découverte des stations-service, la navigation et le ravitaillement en carburant. Elle réduit la charge sur le système de point de vente du magasin et permet aux utilisateurs de faire le plein plus facilement.

Tableau de bord d'une voiture avec interface utilisateur de l'application Car Play pour une chaîne de stations-service

L'APPLICATION CAR PLAY CRÉÉE EN DEUX SPRINTS DE DESIGN

Les applications "Car Play" fonctionnent à la fois par commande vocale et par commande tactile, et le design de l'UI doit être adapté à un scénario de conduite. Lorsqu'elle est bien conçue, l'application "car play" rend l'utilisation d'une application plus facile et plus sûre.

L'expérience utilisateur car play est conçue conformément aux normes des applications car play et aux réglementations automobiles. Nous avions une expérience préalable avec des logiciels de design UI tels que Kanzi, ce qui nous a permis de livrer l'application en seulement deux sprints de design.

Icône de l'application Car Play dans le tableau de bord
User interface options for selecting fueling details in car play app
Car play UI design while user is fueling at petrol station
Design UI pour l'écran de réussite de la transaction dans l'application Car Play de la station-service
Design de l'expérience utilisateur d'une application mobile pour une station-service avec le tableau de bord d'une voiture en arrière-plan

MOBILE APP CONCEPT DESIGN

En nous appuyant sur tous les travaux de design précédents, nous avons réalisé deux autres sprints de design UX/UI afin de proposer une expérience utilisateur tournée vers l'avenir pour une application mobile de vente au détail. Elle rassemble tous les éléments du parcours client.

L'application mobile est un élément essentiel des programmes de fidélisation et du modèle de données du commerce de détail. Pour le client, elle offre de nouveaux moyens de tirer le meilleur parti de son utilisation répétée des stations-service. Le design UI reflète la nature visionnaire de l'application.

Cinq designs d'interface utilisateur pour une application mobile de vente au détail de produits pétroliers en Suisse
Éléments de design

A COMPLETE CUSTOMER EXPRIENCE FOR GAS STATIONS

Toutes les applications que nous avons conçues fonctionnent ensemble pour créer une expérience client cohérente de bout en bout dans les stations-service. Les applications de caisses automatiques réduisent la charge de travail des caissiers dans le magasin, ce qui leur permet d'offrir un meilleur service aux clients.

L'expérience utilisateur est cohérente d'une application à l'autre, mais nous avons adapté chacune d'entre elles pour refléter les contraintes des systèmes embarqués ou les réglementations s'appliquant aux applications "car play". Le design de l'UI met en valeur la marque et positionne le client comme un acteur innovant dans le domaine de la distribution d'essence.

Notre agence de design UX a fourni l'expertise manquante en matière de design d'expérience utilisateur pour la création de toute la gamme de produits numériques. Afin de fournir un service complet, nous nous sommes rendus en Suisse pour effectuer des recherches sur les utilisateurs et comprendre le contexte unique.

RÉSULTATS

Couverture complète de l'expérience client

UX/UI pour 5 applications livrées en 10 mois

Soutien en temps réel aux développeurs pendant la mise en œuvre