The fully integrated petrol station experience

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.

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.

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.

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.

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.

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.

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.

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.