The fully integrated petrol station experience
As one of the leading petrol station networks in Switzerland, they offer a world of retail, including supermarkets, cafeterias and car services.
The vision is to improve the customer experience by reducing friction. This means an overhaul of the usability of the point of sale software used by cashiers, and the introduction of a customer screen at the till. Going beyond the classical point of sale (POS) experience, they wanted to design a payment machine outside the shop, a mobile application and a carplay app.
They engaged our UX/UI design agency to support this strategic design project. We started with a thorough user research assignment on site in Switzerland. Then we drafted a new end to end customer experience map and designed the UX and UI for each POS application, one by one.
OUR CONTRIBUTIONS
User research
UX design
User testing
Prototyping
UI Design - Design System
Information Architecture
Quality Assurance
ON SITE USER RESEARCH IN SWITZERLAND
Our UX agency's research team spent a week in Switzerland to perform user research in petrol stations around Zurich. We met experienced shift supervisors, station managers and people in training.
We applied a mix of user research methods, both quantitative and qualitative, to create a complete picture of what needs to change. The UX research was carried out in German, one of the UX design agency’s language proficiencies.
BECOME A CLERK TO KNOW A CLERK
The aim of the user research was to discover the complexities and pain points that cashiers experience when using the POS application.
User interviews gave us a starting point, but systematic observation of how they use the POS application to serve customers gave us a quantitative insights into usability bottlenecks. To go a level deeper, our UX/UI designers worked along side cashiers in a participatory research design. While having lunch with them we learn the challenges they face beyond the POS usability.
HOW UX PAIN POINTS EMERGE IN RETAIL POS APPS
POS applications deal with hundreds of types of transactions. By mapping the UX research data, we created an inventory of scenarios that generate problems.
There are patterns in how UX pain points emerge. Usually there are tiny UX/UI complexities that build up in real life and they compromise a transaction which takes too long. These UX design issues can only be discovered in real life, they cannot be anticipated in the design process.
UX CHALLENGES ARE AMPLIFIED BY THE CONTEXT
In real life, POS applications operate in a complex context. By doing on site user research and participating directly, we mapped the contextual factors that distort the usability of the POS system.
We uncovered dozens of contextual UX factors, such glare on the POS screen produced by overhead lighting or how the layout of the desk makes it difficult to tap some areas of the POS touchscreen.
COMPARATIVE ANALYSIS OF POS USER FLOWS
We benchmarked the user experience of other POS systems. In this detailed analysis we compared and contrasted solutions under the light of the scenarios that we uncovered in the user research.
This systematic review of competitor user experience designs revealed a host of do’s and don’ts applicable to the project. It helped us narrow down the subsequent UX design approach.
PROTOTYPING AND TESTING SOLUTIONS FOR POS DESIGN
We created prototypes for different approaches to the user experience. Each was a combination of interface layouts combined with a treatment of the user flows.
A systematic comparison of the benefits and down sides of each approach was presented to the customer's project team and together we chose the ones to be tested with users. This iterative UX design process gave us focus and it facilitated fast delivery. In just 6 weeks we had completed the UX solution for the POS application and development started.
SELF CHECKOUT EXPERIENCE FOR GAS STATIONS
The outdoor payment terminal is the start of the self checkout experience in the gas station. It is available 24/7 in four languages and two currencies. The self checkout experience for gas stations is unique in the retail world because petrol transactions involve the pump system.
The user interface for the terminal was designed to work in different conditions. For example, extreme cold in winter has an impact and at night the colours of the user interface adapt to be more welcoming.
ITERATIONS LEAD TO A SIMPLE USER EXPERIENCE
In an iterative approach with 6 design sprints, we have created multiple wire-flows and tested them. We refined the UI of each screen, stripping away interface components to reduce complexity. Every time we tested the designs to make sure we haven’t gone too far.
The user research performed in the previous phases was useful to make the self checkout UI straight forward. For example, short statements put transaction data into context and users experience clarity.
SUPPORT FOR DEVELOPMENT
Embedded systems come with specific hardware capabilities and these were considered in the UX/UI design process. The UI design reflects the looks of the machine and it takes stock of the display's specs.
We made it easy for developers to implement the UI design of the self checkout terminal by preparing a design system. Now they use the design system to maintain and update the system independently.
THE CAR PLAY APP COMPLETES THE USER EXPERIENCE
To round up the customer experience we have designed a car play application. It is a native app for cars and it automatically detects when you pull into a gas station. It also knows the pump you stopped at. All you need to do is fuel up and drive away.
The car play app integrates discovery of gas stations, navigation and fueling. It reduces the load on the shop POS system and it makes it convenient for users to fuel up.
CAR PLAY APP CREATED IN TWO DESIGN SPRINTS
Car play apps work both with voice and with touch control and the UX/UI design must be adapted to a driving scenario. When designed correctly, car play makes it easier and safer to use an app.
The car play user experience is designed in accordance with the standards for car play apps and automotive regulations. We had prior experience with UI design software such as Kanzi so we were able to deliver the application in just two design sprints.
MOBILE APP CONCEPT DESIGN
Building on all the previous design work, we performed two more UX/UI design sprints to propose a forward looking user experience for a retail mobile app. It brings together all elements of the customer journey.
The mobile app is a critical component in loyalty programs and in the retail data model. For the customer it opens up new ways to make the most of their repeated use of the gas stations. The UI design reflects the visionary nature of the app.
A COMPLETE CUSTOMER EXPERIENCE FOR GAS STATIONS
All the applications we designed work together to create a coherent end to end customer experience in gas stations. The self checkout applications reduce the load on the cashiers in the store, so they can offer better service to shoppers.
The user experience is coherent from one app to the other, but we have adapted each to reflect the constraints of embedded systems or regulations applying to car play apps. The UI design elevates the branding and positions the customer as an innovative player in petrol retail.
Our UX design agency provided the missing expertise in user experience design for the creation of the entire range of digital products. To deliver a complete service, we traveled to Switzerland to perform user research and to understand the unique context.
OUTCOMES
Complete coverage of the customer experience
UX/UI for 5 applications delivered in 10 months
Real time support for developers during implementation