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

LOCATIONSwitzerland
TEAMDirecteur créatif, chercheur UX, designer UX, designer d'interaction, designer UI, chef de projet, delivery manager, architecte logiciel, product owner

Le client exploite un vaste réseau de stations-service en Suisse, avec des activités de carburant, de boutique et de service réparties entre des sites urbains et autoroutiers. Il a demandé un accompagnement pour repenser un environnement numérique fragmenté, développé autour de systèmes hérités et de solutions locales de contournement. Le périmètre comprenait les systèmes de caisse, les terminaux de paiement extérieurs, l’interaction embarquée via CarPlay ainsi qu’un concept d’application mobile orientée fidélité. L’objectif était de créer une architecture cohérente reflétant le fonctionnement réel des stations, plutôt qu’une simple mise à jour superficielle de l’interface.

Ce projet s’inscrit dans la continuité de notre travail sur les retail operations et les systèmes multi-channel, où l’evidence based UX, les contraintes des systèmes embarqués et l’optimisation des workflows sur les aires de service façonnent les interfaces pour des environnements opérationnels complexes.

Creative Navy a abordé la collaboration comme un programme à long terme plutôt que comme un projet unique. Le travail s’est étendu sur trois ans et a suivi une séquence de recherche, de modélisation, de refonte des applications et de consolidation du Design System. Chaque étape devait respecter l’infrastructure existante et les réalités opérationnelles de sept stations dans la région de Zurich.

Nous avons appliqué Dynamic Systems Design, une méthode qui fait évoluer les solutions grâce à l’expérimentation intégrée, résout les tensions entre l’optimisation locale et la cohérence du système, et accompagne la mise en œuvre jusqu’à ce que les organisations deviennent autonomes.

Le client a constitué une équipe projet de six personnes issues des opérations, du digital et de l’ingénierie. L’orientation stratégique était assurée par un comité de pilotage composé de cinq membres de l’équipe de direction. Cette structure de gouvernance garantissait que les observations détaillées du terrain puissent être traduites en décisions ayant un impact sur les feuilles de route technologiques.

Tout au long de la collaboration, l’accent est resté mis sur un raisonnement traçable. Chaque décision de design devait être reliée à des comportements observés, des schémas quantifiés ou des contraintes explicites. Cela a permis de créer une base stable pour le retail UX design, pouvant être maintenue et enrichie dans le temps sans revenir aux principes fondamentaux pour chaque nouvelle fonctionnalité.

NOS CONTRIBUTIONS

Multi-Station Field Research

Transaction Pattern Analysis

Journey Mapping

Option Space Mapping

POS Workflow Redesign

Multi-Device Architecture

Design UI

Design System

Implementation Partnership

COMPRENDRE L’ENVIRONNEMENT DU PETROL RETAIL

L’équipe a commencé par analyser les conditions d’exploitation qui distinguent les stations-service des autres formes de retail. Chaque station gère des pics de demande intenses, des transactions complexes combinant carburant et articles de boutique, ainsi que des interactions extérieures exposées aux conditions météorologiques. Ces facteurs réduisent le temps de décision pour le personnel comme pour les clients.

Sur les sites les plus fréquentés, les caissiers traitaient jusqu’à 84 transactions par heure sur une seule caisse pendant les périodes de pointe. Les transactions mixtes complexes pouvaient durer jusqu’à sept minutes avant la refonte. Ces conditions ont montré que même de petites inefficacités dans les flux de point of sale entraînent des retards cumulés significatifs.

Les systèmes de caisse fonctionnaient sur des terminaux embarqués avec des écrans Full HD en 1920 x 1080 pixels. Les terminaux de paiement extérieurs utilisaient des écrans de 1024 x 768 pixels, qui devaient rester lisibles sous différents angles. Les deux types d’appareils présentaient des limites de performance influençant la rapidité de mise à jour des écrans lors du traitement de logiques de transaction en plusieurs étapes.

Le matériel extérieur fonctionnait à des températures allant de –20 à +40 degrés. Lors des visites de terrain, l’équipe a observé des conditions d’éblouissement en plein soleil et sous les auvents. Ces contraintes signifiaient que les décisions d’interface ne pouvaient pas être dissociées des réalités physiques. Toute affirmation d’amélioration devait refléter ce qui est réellement faisable dans cet environnement pour le petrol station UX design et le gas station interface design.

GOUVERNANCE CLIENT ET STRUCTURE DU PROGRAMME

Dès le départ, le travail a été conçu comme un programme pluriannuel avec une gouvernance claire, plutôt qu’une série d’initiatives isolées. Le client a nommé une équipe centrale de six membres issus des opérations, du digital product, de l’ingénierie et de la finance. Ils coordonnaient les questions quotidiennes, géraient l’accès aux stations et alignaient les responsables locaux.

Au-dessus de ce groupe, un comité de pilotage composé de cinq dirigeants se réunissait à des jalons définis. Ce comité examinait les résultats de la recherche, prenait des décisions sur l’orientation architecturale et arbitrageait entre efficacité opérationnelle, conformité réglementaire et stratégie technologique à long terme. Leur implication garantissait que les décisions concernant les flux de POS, les terminaux extérieurs et l’intégration embarquée ne soient pas traitées comme de simples ajustements locaux.

Le programme a été divisé en streams avec une séquence claire. La refonte des workflows POS a duré six mois et a constitué l’épine dorsale des travaux suivants. Le stream des terminaux de paiement extérieurs s’est étendu sur sept mois et s’est appuyé sur les enseignements tirés des changements POS. L’application CarPlay a été conçue en deux mois, une fois les hypothèses d’intégration validées. D’autres activités telles que le journey mapping, la définition du concept mobile et la consolidation du Design System se sont déroulées en parallèle de ces streams.

Cette structure a créé des points de revue prévisibles et a permis au client de planifier ses ressources de développement. Elle a également facilité la cohérence entre les décisions prises pour chaque canal. En pratique, cela est essentiel pour une multi-channel user experience qui peut être gouvernée plutôt que simplement corrigée au coup par coup.

RECHERCHE SUR PLACE AUPRÈS DES UTILISATEURS EN SUISSE

Le programme a débuté par un travail de terrain sur sept stations dans la région de Zurich via Sandbox Experiments. En une semaine, l’équipe a mené quarante heures d’observation structurée et documenté 532 transactions couvrant différents moments de la journée et schémas de trafic. L’objectif était de comprendre comment le travail est réellement effectué et où les systèmes numériques aident ou freinent.

Les chercheurs ont observé trente-six caissiers en situation réelle d’exploitation. Ils se sont concentrés sur la fréquence des passages entre les modes carburant et boutique, sur la manière dont le personnel naviguait dans la logique des remises et de la fidélité, et sur les situations où ils s’appuyaient sur leur mémoire plutôt que sur les indications à l’écran. Ce travail a été complété par vingt-quatre entretiens avec des caissiers, des responsables de quart et des stagiaires. La recherche a été menée en allemand, ce qui a facilité la communication directe et la collecte précise de la terminologie spécifique au domaine.

Les transactions ont été codées par type et par niveau de complexité. L’équipe a identifié des schémas dans lesquels le personnel ignorait régulièrement certains champs, ressaisissait des données pour corriger des erreurs ou attendait les réponses du système tandis que les files d’attente s’allongeaient. Ces schémas ont ensuite servi de preuves pour justifier des changements architecturaux.

L’approche combinait des entretiens, de l’observation contextuelle et un codage quantitatif. L’objectif n’était pas de collecter des récits, mais de construire un jeu de données structuré pour la user research dans les retail operations. Cela a créé une base pour une evidence based UX pour le retail, pouvant être discutée de manière transparente avec les parties prenantes des opérations et de l’ingénierie.

CARTOGRAPHIE DES PARCOURS ET DES STRUCTURES DE TRANSACTION

Une fois le corpus de recherche constitué, l’équipe a élaboré des modèles de parcours décrivant les comportements des clients et du personnel à travers les différents canaux. L’accent n’était pas mis sur les parcours marketing, mais sur des séquences opérationnelles pertinentes, allant de l’arrivée à la station jusqu’au paiement final et à l’attribution de la fidélité.

Pour les clients, la cartographie a montré comment les conducteurs choisissaient une station, comment ils abordaient l’aire de service, comment ils sélectionnaient une pompe et comment ils combinaient le ravitaillement avec des achats en boutique. Pour le personnel, elle a documenté la gestion des files d’attente, des transactions mixtes, des exceptions comme les cartes refusées et la clôture de fin de service.

Chaque parcours a été découpé en étapes distinctes avec des déclencheurs, des états système et des conditions environnementales associés. Cela a permis à l’équipe d’identifier les écarts entre la logique des systèmes numériques et la logique du travail réel. Par exemple, certains flux obligeaient les caissiers à changer plusieurs fois d’écran pour des types de transactions fréquents en période de forte affluence.

Les modèles décrivaient également les transitions entre les canaux. Un conducteur pouvait arriver via la navigation embarquée, s’authentifier au terminal extérieur, puis entrer dans la boutique pour finaliser un achat combiné. Le personnel avait besoin d’informations cohérentes tout au long de ces étapes. En définissant clairement ces structures, l’équipe a préparé le terrain pour la refonte du système POS et s’est assurée que les changements dans un canal ne créaient pas de nouvelles incohérences dans un autre.

REFONTE DES WORKFLOWS POINT OF SALE

Le stream POS s’est concentré sur les systèmes de caisse, car ils supportent la charge opérationnelle la plus élevée. En s’appuyant sur les modèles de parcours, l’équipe a catalogué les types de transactions et les a regroupés selon leur fréquence et leur complexité. Cela incluait des parcours distincts pour le carburant seul, le carburant combiné aux achats en boutique, l’utilisation de bons, les opérations de fidélité et la gestion des exceptions.

Seize architectures POS alternatives ont été modélisées grâce à option space mapping. Chaque option réorganisait la manière dont les actions étaient regroupées et dont l’information était présentée par rapport aux séquences de tâches. L’objectif était de réduire la navigation inutile, de limiter les changements de mode et de rendre la gestion des erreurs plus cohérente. L’équipe a comparé chaque option au jeu de données observé de 532 transactions afin d’évaluer la fréquence avec laquelle chaque structure couvrait les parcours les plus courants.

Six concepts ont été sélectionnés pour le prototypage. Ces prototypes ont été réalisés au niveau wireframe sur des écrans reproduisant la résolution 1920 x 1080 pixels des caisses réelles. Vingt-neuf sessions de test, réparties sur les différents streams, ont inclus une évaluation structurée des prototypes avec des caissiers et des superviseurs. Les retours ont porté sur la rapidité, la clarté de l’ordre des tâches et l’alignement avec les routines de rapprochement.

La solution finale ne recherchait pas la nouveauté. Elle a réorganisé les flux afin que les opérations courantes nécessitent moins d’étapes et moins de transitions mentales, tout en respectant les contraintes du matériel existant grâce au constraint respecting. C’est là que le point of sale UX a le plus d’impact pour le retail operations UX, et non dans des effets d’interface isolés.

RÉSULTATS DE TERRAIN BASÉS SUR DES PROTOTYPES

Le travail de test a produit plusieurs enseignements concrets expliquant pourquoi les configurations précédentes rencontraient des difficultés en période de forte affluence. Les caissiers avaient développé des raccourcis personnels pour compenser les problèmes de mise en page. Ces raccourcis fonctionnaient pour le personnel expérimenté, mais rendaient la formation des nouveaux employés plus difficile. Les séquences de correction d’erreurs observées ont montré que de petites incohérences dans l’ordre des champs entraînaient des retards disproportionnés lorsque les files d’attente étaient longues.

Lors des tests, les caissiers ont réagi positivement lorsque les séquences suivaient la logique interne de leur travail plutôt que la structure des logiciels hérités. Ils ont souligné les améliorations lorsque le système s’alignait sur leur manière de combiner carburant, articles de boutique et actions de fidélité. Les superviseurs ont insisté sur le fait que des flux plus prévisibles facilitent le maintien du contrôle en période de forte affluence, car ils réduisent le nombre de cas particuliers nécessitant une intervention.

L’équipe a utilisé ces retours pour affiner l’architecture finale grâce au tension-driven reasoning. Des ajustements ont été apportés au regroupement des actions, à l’emplacement des informations clés et à la gestion des exceptions rares, qui entraînent des coûts opérationnels élevés lorsqu’elles sont mal traitées. Ces décisions ont été documentées de manière à pouvoir être discutées avec l’ingénierie en termes précis.

Grâce à ce processus, la refonte du POS a établi un modèle fiable pour les caissiers et créé une référence pour les canaux associés. Elle a également offert au comité de pilotage du client une démonstration concrète de la manière dont des décisions structurées peuvent découler des données de terrain et conduire à des changements au niveau des systèmes dans le retail operations UX.

CONCEPTION DE L’EXPÉRIENCE SELF CHECKOUT

Les terminaux de paiement extérieurs nécessitaient une approche dédiée, car ils représentent un contexte d’interaction différent. Les clients se tiennent devant un appareil exposé aux conditions météorologiques tout en gérant l’acte physique du ravitaillement. Ils disposent de peu d’attention pour explorer l’interface et s’attendent à ce que le système réagisse de manière prévisible.

Les terminaux devaient fonctionner à des températures comprises entre –20 et +40 degrés et rester lisibles en faible luminosité comme en cas d’éblouissement intense. Chaque appareil prenait en charge quatre langues : l’allemand, le français, l’italien et l’anglais, ainsi que deux devises : l’euro et le franc suisse. La sélection de la langue et la gestion des devises devaient être résolues sans ajouter d’étapes ralentissant les utilisateurs fréquents.

Les flux ont été définis autour de séquences clés telles que l’autorisation de carte, la sélection de la pompe, le ravitaillement, la gestion du reçu et la reconnaissance de la fidélité lorsque cela était pertinent. L’équipe a également pris en compte des situations d’erreur comme les délais d’expiration des pompes ou les autorisations partielles. Ces flux ont ensuite été testés dans des prototypes utilisant la résolution réelle de 1024 x 768 pixels afin de garantir des décisions de mise en page réalistes.

Des sessions avec des conducteurs et du personnel de station ont permis d’examiner la rapidité avec laquelle les utilisateurs pouvaient accomplir les tâches clés sans explication préalable. Les observations ont conduit à des ajustements du texte, de l’ordre des étapes et de la présentation des états d’erreur. L’objectif était d’atteindre un niveau où l’interface du terminal de paiement reflète la logique du processus de ravitaillement et les contraintes d’une utilisation sans supervision, tout en offrant une expérience cohérente avec les systèmes intérieurs.

CONTRAINTES MATÉRIELLES ET CONSIDÉRATIONS EMBEDDED

Tant pour les caisses intérieures que pour les terminaux extérieurs, le projet devait composer avec les limites du matériel existant. Le client ne remplaçait pas les appareils, et le travail de conception ne pouvait donc pas s’appuyer sur des améliorations telles que des écrans plus grands ou des processeurs plus rapides. Cela a fait de l’embedded system UX une préoccupation explicite plutôt qu’un simple détail de contexte.

Les résolutions d’écran de 1920 x 1080 pixels pour les caisses et de 1024 x 768 pixels pour les terminaux extérieurs ont été traitées comme des paramètres fixes. L’équipe a mesuré les temps de réponse typiques des opérations clés et a identifié des séquences spécifiques où la latence du système influençait les schémas d’interaction. Par exemple, des délais entre l’autorisation et la confirmation ont conduit les caissiers à mettre en place des contournements, compliquant la formation et la documentation.

Les décisions de conception visaient à réduire la dépendance aux séquences sensibles à la latence. Lorsque les écrans nécessitaient des informations plus détaillées, la structure privilégiait la clarté plutôt que la densité. Pour le matériel embedded, il ne s’agit pas d’une préférence esthétique, mais d’un moyen d’éviter de dépasser les limites pratiques d’interaction en situation de charge.

Ces considérations ont été documentées pour les équipes d’ingénierie afin qu’elles puissent comprendre pourquoi certaines mises en page ou certains schémas d’interaction étaient recommandés. L’objectif était de s’assurer que la mise en œuvre ne réintroduise pas des modèles qui semblent efficaces en théorie, mais posent des problèmes dans des conditions d’exploitation réelles.

DESIGN SYSTEM ET SUPPORT À L’IMPLÉMENTATION

À mesure que les streams arrivaient à maturité, l’équipe a consolidé les patterns dans un Design System unique couvrant les caisses, les terminaux extérieurs, CarPlay et le concept mobile. Le système comprenait des définitions de composants, des règles d’interaction et des notes d’usage, structurées par canal et par pattern partagé. Il visait à soutenir à la fois l’implémentation actuelle et les évolutions futures.

La documentation précisait quels éléments étaient communs à l’ensemble des dispositifs et lesquels étaient spécifiques à une plateforme donnée. Par exemple, les états de boutons, les choix typographiques de base et certains schémas de présentation des données restaient cohérents. D’autres aspects, comme les grilles de mise en page et les modèles d’interaction, s’adaptaient aux contraintes de chaque type de dispositif et au contexte d’utilisation.

Les développeurs ont reçu des assets alignés avec leur toolchain existante. L’équipe de design a participé aux sessions d’implémentation régulières afin de clarifier les comportements et de résoudre les questions liées aux edge cases dans le cadre de l’Implementation Partnership. Cela a réduit le risque d’écart entre le comportement prévu et le comportement réel, notamment en matière de gestion des erreurs et de transitions d’état.

Le Design System peut être décrit comme un Design System pour des applications retail devant fonctionner à la fois sur des terminaux embedded et dans des environnements connectés. Son objectif n’est pas uniquement le branding visuel, mais une prise de décision reproductible que les équipes produit et ingénierie peuvent appliquer lors de l’évolution ou de l’ajustement de l’écosystème.

APPLICATION CARPLAY ET INTÉGRATION VÉHICULE

L’application CarPlay couvrait une autre partie du parcours. Elle devait prendre en charge la découverte des stations à proximité, le guidage vers l’aire de service et l’identification de la pompe correcte après l’arrivée. En parallèle, elle devait respecter les règles de la plateforme limitant la distraction du conducteur ainsi que les réglementations locales liées au ravitaillement.

L’équipe a défini des scénarios d’usage dans lesquels les conducteurs approchent d’une station, reçoivent des invites en entrant sur l’aire de service et confirment la pompe à laquelle ils s’arrêtent. Les séquences d’interaction ont été volontairement courtes. Lorsque cela était possible, le design s’appuyait sur des actions vocales et des confirmations simples plutôt que sur une navigation étendue dans des menus. Cela reflète la discipline propre à l’automotive UX design, plutôt que les schémas des applications mobiles grand public.

Le travail d’intégration s’est concentré sur l’identification cohérente des pompes et sur une autorisation sécurisée. L’application devait communiquer avec le back end existant afin que l’état des pompes et le statut de paiement correspondent à la réalité sur l’aire de service. Des sessions de test avec des conducteurs ont évalué la clarté avec laquelle l’application communiquait ces états et la pertinence de la logique par rapport aux attentes.

La structure résultante a servi de base à l’UX de l’application CarPlay pour ce client. Elle s’alignait, dans ses principes, sur les flux définis pour les terminaux extérieurs et les caisses, tout en respectant les contraintes plus strictes des interfaces embarquées. Ce canal a ensuite influencé d’autres parties de l’écosystème lorsque les conducteurs approchaient de la station via le véhicule plutôt que par des outils de navigation indépendants.

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.

CONCEPT D’APPLICATION MOBILE ET LOGIQUE DE FIDÉLITÉ

L’application mobile n’a pas été développée comme un produit entièrement implémenté durant le programme. L’équipe a plutôt défini un concept décrivant comment la fidélité, la préparation du paiement et l’historique des visites pourraient fonctionner en relation avec les autres canaux. L’objectif était de fournir une orientation claire pour les investissements futurs sans enfermer le client dans des détails prématurés.

Le concept décrivait comment les clients pouvaient enregistrer leurs véhicules, gérer leurs moyens de paiement, consulter l’historique de ravitaillement et bénéficier d’avantages de fidélité. Il tenait compte de la structure des transactions observées en station ainsi que des contraintes liées à l’intégration des pompes et des terminaux. L’architecture de l’application évitait d’introduire une nouvelle logique qui divergerait de celle déjà utilisée par le personnel et les systèmes.

Des scénarios ont été définis pour les utilisateurs fréquents, les visiteurs occasionnels et les conducteurs gérant plusieurs véhicules. Ces scénarios ont guidé la structure de navigation et la présentation des données. L’équipe a également pris en compte le comportement de l’application dans les zones à connectivité plus faible et la manière dont elle se coordonnerait avec CarPlay lorsque les deux sont présents dans le véhicule.

En fournissant ce concept, le programme a offert au client une référence pour les travaux futurs. Il a montré comment une multi-channel user experience peut s’étendre au mobile sans fragmenter la logique ni créer des processus parallèles pour la loyalty program UX que le personnel ne peut pas soutenir.

OPÉRATIONS UNIFIÉES ET CROISSANCE PRÉVISIBLE

Le programme a produit des expériences repensées ou nouvellement définies pour cinq applications clés. Il s’agissait des caisses, des terminaux de paiement extérieurs, de l’application CarPlay, du concept mobile et du modèle architectural partagé qui les relie. Le travail a également donné lieu à un Design System et à des directives d’implémentation qui continuent d’orienter le développement.

Sur le plan opérationnel, l’architecture POS est désormais alignée sur les schémas de transaction observés plutôt que sur les contraintes historiques des systèmes. Les caissiers signalent des flux plus prévisibles et moins de situations où ils doivent contourner le système sous pression. Bien que le client n’ait pas publié de résultats quantitatifs de performance, les retours internes indiquent une gestion plus fluide des transactions complexes en période de pointe.

L’interaction avec les terminaux extérieurs est devenue plus cohérente d’un site à l’autre, avec une gestion plus claire du choix de la langue et des états des pompes. L’intégration CarPlay offre à l’organisation un moyen structuré d’engager les conducteurs avant qu’ils n’atteignent le terminal de paiement. Le concept mobile fournit une feuille de route pratique pour les futures fonctionnalités de fidélité et de compte.

Au niveau organisationnel, le client dispose désormais d’un modèle transparent de son parcours client numérique et des workflows associés du personnel. La gestion de produit, les opérations et l’ingénierie travaillent à partir d’une compréhension partagée pour prioriser les changements.

L’organisation a acquis des ressources immatérielles : un jugement sur ce qui compte dans la distribution de carburant à travers les canaux, une intuition produit partagée sur la manière dont les systèmes multi-device doivent fonctionner sous pression opérationnelle, et une capacité de raisonnement permettant aux équipes d’étendre les points de contact numériques sans fragmenter l’expérience. Le système maintient sa competitive position en soutenant des transactions efficaces et prévisibles sur l’aire de service, à l’intérieur et dans le véhicule, tandis que les concurrents qui privilégient l’accumulation de fonctionnalités au détriment de la cohérence opérationnelle peinent à servir des réseaux soumis à une pression en temps réel avec des exigences complexes de coordination multi-channel.

Le programme montre comment le design UX pour les stations-service peut soutenir une clarté opérationnelle à long terme sans s’appuyer sur des affirmations dramatiques ou des refontes superficielles.

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

Vous avez un projet en tête ?