The client operates a large petrol station network in Switzerland, with fuel, shop and service activities spread across urban and motorway locations. They asked for support in reshaping a fragmented digital environment that had grown around legacy systems and local workarounds. The scope covered cashier till systems, outdoor payment terminals, in vehicle interaction through CarPlay and a concept for a loyalty oriented mobile application. The objective was to create a consistent architecture that reflects how stations actually run rather than a surface level interface refresh.
This project is part of our continued work in retail operations and multi-channel systems, where evidence based UX, embedded system constraints and forecourt workflow optimization shape interfaces for complex operational environments.
Creative Navy approached the engagement as a long term program rather than a single project. Work extended over three years and followed a sequence of research, modelling, application redesign and design system consolidation. Each step had to respect existing infrastructure and operational realities at seven stations in the Zurich area.
We applied Dynamic Systems Design, a method that grows solutions through embedded experimentation, resolves tensions between local optimization and system coherence, and stewards implementation until organizations gain independence.
The client formed a project team of six people from operations, digital and engineering. Strategic guidance came from a steering committee of five members of the executive team. This governance structure ensured that detailed observations from the field could be translated into decisions that affected technology roadmaps.
Throughout the engagement the focus remained on traceable reasoning. Every design decision had to be linked back to observed behaviour, quantified patterns or explicit constraints. This created a stable foundation for retail UX design that can be maintained and extended over time without returning to first principles for every new feature.
Multi-Station Field Research
Transaction Pattern Analysis
Journey Mapping
Option Space Mapping
POS Workflow Redesign
Multi-Device Architecture
UI Design
Design System
Implementation Partnership
The team began by analysing the operating conditions that distinguish petrol stations from other forms of retail. Each station manages intense demand peaks, complex transactions that combine fuel and shop items and outdoor interactions that are exposed to weather. These factors compress decision time for both staff and customers.
At the busiest sites cashiers on a single till processed up to eighty four transactions per hour during peak periods. Complex mixed transactions could reach seven minutes before the redesign. These conditions made apparent that even small inefficiencies in point of sale flows translate into significant cumulative delays.
The till systems ran on embedded terminals with full HD displays at 1920 by 1080 pixels. Outdoor payment terminals relied on 1024 by 768 pixel screens that need to remain readable from different angles. Both device classes had performance limits that influenced how fast screens could update when handling multistep transaction logic.
Outdoor hardware operated in temperatures from minus 20 to plus 40 degrees. During field visits the team observed glare conditions under direct sunlight and under canopies. These constraints meant that interface decisions could not be separated from physical realities. Any claim about improvement had to reflect what is feasible in this environment for petrol station UX design and gas station interface design.
From the start the work was framed as a multi year program with clear governance rather than a collection of isolated initiatives. The client appointed a core team of six members drawn from operations, digital product, engineering and finance. They coordinated daily questions, managed access to stations and aligned local managers.
Above this group a steering committee of five executives met at defined milestones. This group reviewed research findings, made decisions on architectural direction and resolved trade offs between operational efficiency, regulatory compliance and longer term technology strategy. Their involvement ensured that decisions about POS flows, outdoor terminals and in vehicle integration were not treated as local adjustments.
The program was broken into streams with clear sequencing. The redesign of POS workflows ran for six months and formed the backbone for subsequent work. The outdoor payment terminal stream spanned seven months and built on lessons from the POS changes. The CarPlay application was designed in two months once integration assumptions had been tested. Other activities such as journey mapping, mobile concept definition and design system consolidation ran across these streams.
This structure created predictable touchpoints for review and allowed the client to plan development resources. It also made it easier to ensure that decisions taken for one channel were not contradicted by choices in another. In practice this is essential for a multi channel user experience that can be governed rather than patched.
The program began with fieldwork at seven stations in the Zurich area through Sandbox Experiments. Over one week the team conducted forty hours of structured observation and documented five hundred thirty two transactions across different day parts and traffic patterns. The goal was to understand how work is actually carried out and where digital systems help or hinder.
The researchers observed thirty six cashiers during live operation. They focused on how often staff switched between fuel and shop modes, how they navigated discount or loyalty logic and where they relied on memory instead of screen guidance. This work was complemented by twenty four interviews with cashiers, shift supervisors and trainees. Research took place in German which supported direct communication and precise capture of domain specific terminology.
Transactions were coded by type and by complexity. The team identified patterns where staff routinely skipped fields, reentered data to correct mistakes or waited for system responses while queues grew. These patterns later served as evidence for architectural changes.
The approach combined interviews, contextual inquiry and quantitative coding. The intention was not to collect stories but to build a structured dataset for user research for retail operations. This created a foundation for evidence based UX for retail that could be discussed transparently with both operations and engineering stakeholders.
With the research corpus in place the team constructed journey models that described both customer and staff behaviour across channels. The focus was not on marketing journeys but on operationally relevant sequences that start with approach to the station and end with completed payment and loyalty allocation.
For customers the mapping captured how drivers chose a station, how they approached the forecourt, how they selected a pump and how they combined fueling with shop purchases. For staff the mapping documented how they handled queue formation, mixed transactions, exceptions such as declined cards and end of shift reconciliation.
Each journey was broken into discrete steps with associated triggers, system states and environmental conditions. This allowed the team to see where the logic of digital systems diverged from the logic of work. For example certain flows required cashiers to switch between screens multiple times for transaction types that occur frequently under peak load.
The models also described transitions between channels. A driver could arrive through in vehicle navigation, authorise at the outdoor terminal, then enter the shop to complete a combined purchase. Staff needed consistent information across these steps. By defining these structures clearly the team prepared the ground for POS system redesign and ensured that changes in one channel would not create new inconsistencies in another.
The POS stream focused on cashier till systems since they carry the heaviest operational load. Building on the journey models the team catalogued transaction types and grouped them by frequency and complexity. This included separate paths for fuel only, combined fuel and shop, voucher redemptions, loyalty operations and exception handling.
Sixteen alternative POS architectures were modelled through option space mapping. Each option reorganised how actions were grouped and how information was presented in relation to task sequences. The objective was to reduce unnecessary navigation, limit mode switching and make error handling more consistent. The team compared each option against the observed dataset of five hundred thirty two transactions to see how often a given structure would touch common paths.
Six concepts were selected for prototyping. These prototypes were implemented at wireframe level on screens that mirrored the 1920 by 1080 pixel layout of the actual tills. Twenty nine test sessions across streams included structured evaluation of these prototypes with cashiers and supervisors. Feedback focused on speed, clarity of task ordering and alignment with reconciliation routines.
The resulting solution did not chase novelty. It reorganised flows so that common operations required fewer steps and fewer mental transitions while respecting the constraints of existing hardware through constraint respecting. This is where point of sale UX matters most for retail operations UX and not in isolated interface flourishes.
The testing work produced several concrete insights that explained why previous configurations had struggled under peak load. Cashiers had developed personal shortcuts to compensate for layout issues. These shortcuts worked for experienced staff but made training harder for new employees. Observed error correction sequences showed that small inconsistencies in field ordering produced disproportionate delays when queues were long.
During testing cashiers responded positively when sequences followed the internal logic of their work rather than the structure of legacy software. They highlighted improvements where the system aligned with how they think about combining fuel, shop items and loyalty actions. Supervisors emphasised that more predictable flows make it easier to maintain control during busy periods since they reduce the number of special cases that require intervention.
The team used this feedback to refine the final architecture through tension-driven reasoning. Changes were made to the grouping of actions, placement of key information and the handling of rare exceptions that carry high operational cost when mishandled. These decisions were documented in a way that could be discussed with engineering in precise terms.
Through this process the POS redesign established a reliable model for cashiers and created a reference for related channels. It also provided a tangible demonstration to the client steering committee of how structured decisions can flow from field evidence into system level change in retail operations UX.
Outdoor payment terminals required a dedicated approach because they represent a different interaction context. Customers stand in front of a device exposed to weather while managing the physical act of fueling. They have limited attention for interface exploration and expect the system to respond predictably.
The terminals had to operate across temperatures from minus 20 to plus 40 degrees and remain readable in low light and strong glare. Each device supported four languages which were German, French, Italian and English, and two currencies which were euro and Swiss francs. Language selection and currency handling had to be resolved without adding steps that slow down frequent users.
Flows were defined around core sequences such as card authorisation, pump selection, fueling, receipt handling and loyalty recognition where relevant. The team also considered fault conditions such as pump timeouts or partial authorisations. These flows were then tested in prototypes that used the actual resolution of 1024 by 768 pixels to ensure realistic layout decisions.
Sessions with drivers and station staff examined how quickly people could complete key tasks without prior explanation. Observations informed adjustments to copy, ordering of steps and the way error states were presented. The intent was to reach a level where the payment terminal interface reflected the logic of the fueling process and the constraints of unattended operation, while providing a coherent experience alongside the indoor systems.
Across both indoor tills and outdoor terminals the project had to work within the limits of existing hardware. The client was not replacing devices and therefore the design work could not rely on upgrades such as larger screens or faster processors. This made embedded system UX an explicit concern rather than a background detail.
Display resolutions of 1920 by 1080 pixels for tills and 1024 by 768 pixels for outdoor devices were treated as fixed parameters. The team measured typical response times for core operations and discovered specific sequences where system latency affected interaction patterns. For example delays between authorisation and confirmation caused cashiers to initiate workarounds that complicated training and documentation.
Design decisions sought to minimise dependence on sequences that were sensitive to latency. Where screens required more extensive information the structure prioritised clarity over density. For embedded hardware this is not an aesthetic preference but a way to avoid exceeding practical interaction budgets under load.
These considerations were documented for engineering teams so that they could trace why certain layouts or interaction patterns were recommended. The goal was to ensure that implementation did not reintroduce patterns that seemed efficient in theory but caused problems under real operating conditions.
As streams matured the team consolidated patterns into a single design system that covered tills, outdoor terminals, CarPlay and the mobile concept. The system contained component definitions, interaction rules and usage notes structured by channel and by shared pattern. It aimed to support both current implementation and future evolution.
Documentation clarified which elements were common across devices and which were specific to a given platform. For example button states, basic typography choices and certain data presentation patterns remained consistent. Other aspects such as layout grids and interaction models adapted to the constraints of each device class and context of use.
Developers received assets aligned with their existing toolchain. The design team joined regular implementation sessions to clarify behaviour and resolve questions about edge cases during Implementation Partnership. This reduced the risk of divergence between intended and actual behaviour, especially in error handling and state transitions.
The design system is best described as a design system for retail applications that must operate across embedded terminals and connected environments. Its purpose is not visual branding alone but repeatable decision making that product and engineering teams can apply when extending or adjusting the ecosystem.
The CarPlay application addressed a different part of the journey. It needed to support discovery of nearby stations, guidance to the forecourt and identification of the correct pump after arrival. At the same time it had to comply with platform rules that limit driver distraction and with local regulations for fueling behaviour.
The team defined usage scenarios where drivers approach a station, receive prompts when entering the forecourt and confirm the pump at which they stop. Interaction sequences were kept short. Where possible the design relied on voice actions and simple confirmations rather than extended menu navigation. This reflects the discipline required for automotive UX design rather than consumer mobile patterns.
Integration work focused on consistent pump identification and secure authorisation. The application had to communicate with the existing back end so that pump status and payment state matched reality at the forecourt. Testing sessions with drivers explored how clearly the app conveyed these states and how well the logic matched expectations.
The resulting structure formed the basis of the CarPlay app UX for this client. It aligned in principle with flows defined for outdoor terminals and tills while respecting the stricter constraints of in vehicle interfaces. This channel then influenced other parts of the ecosystem whenever drivers approached the station through the vehicle instead of through independent navigation tools.
Las aplicaciones Car Play funcionan tanto con la voz como con el control táctil, y el diseño UX/UI debe adaptarse a un escenario de conducción. Cuando se diseña correctamente, Car Play facilita y hace más seguro el uso de una aplicación.
La experiencia de usuario de car play se diseñó de acuerdo con los estándares de las aplicaciones de car play y la normativa de automoción. Teníamos experiencia previa con software de diseño de IU como Kanzi, así que pudimos entregar la aplicación en solo dos sprints de diseño.
The mobile application was not developed as a fully implemented product during the program. Instead the team defined a concept that captured how loyalty, payment preparation and visit history could work in relation to the other channels. The aim was to provide a clear direction for future investment without locking the client into premature detail.
The concept described how customers could register vehicles, manage payment methods, view fueling history and receive loyalty benefits. It took into account the structure of transactions observed at stations and the constraints of pump and terminal integration. The application architecture avoided introducing new logic that would diverge from what staff and systems already used.
Scenarios were defined for frequent users, occasional visitors and drivers managing multiple vehicles. These scenarios informed navigation structure and data presentation. The team also considered how the app would behave in locations with weaker connectivity and how it would coordinate with CarPlay when both are present in the vehicle.
By providing this concept the program gave the client a reference for future work. It outlined how multi channel user experience could extend into mobile without fragmenting logic or creating parallel processes for loyalty program UX that staff cannot support.
The program produced redesigned or newly defined experiences for five key applications. These were cashier tills, outdoor payment terminals, the CarPlay application, the mobile concept and the shared architectural model that links them. The work also produced a design system and implementation guidelines that continue to inform development.
Operationally the POS architecture now aligns with observed transaction patterns rather than historical system constraints. Cashiers report more predictable flows and fewer instances where they need to work around the system under pressure. While the client has not published quantitative performance results, internal feedback indicates smoother handling of complex transactions during peaks.
Outdoor terminal interaction has become more consistent across sites, with clearer handling of language selection and pump states. The CarPlay integration gives the organisation a structured way to engage drivers before they reach the payment terminal. The mobile concept provides a practical roadmap for future loyalty and account features.
At organisational level the client gained a transparent model of its digital customer journey and associated staff workflows. Product management, operations and engineering work from a shared understanding when prioritising changes.
The organization gained intangible resources: judgment about what matters in fuel retail operations across channels, shared product intuition about how multi-device systems should behave under operational pressure, and reasoning capability that allows teams to extend digital touchpoints without fragmenting the experience. The system maintains competitive position by supporting efficient, predictable transactions across forecourt, indoor and vehicle contexts, while competitors who prioritize feature accumulation over operational coherence struggle to serve networks working under real time pressure with complex multi-channel coordination requirements.
The program demonstrates how UX design for petrol stations can support long term operational clarity without relying on dramatic claims or superficial redesign.
Cobertura completa de la experiencia del cliente
UX/UI para 5 aplicaciones entregadas en 10 meses
Asistencia en tiempo real a los desarrolladores durante la implantación