Fuel POS Experience — Joey Morgan

Overview

The Fuel POS system is the touchscreen that gas station cashiers use all day, every day. It handles pump monitoring, prepay transactions, in-store sales, loyalty programs, product catalogs. All of it, on one screen, hundreds of times per shift.

The problem was that the interface had been built up over years without much design direction. Layouts were dense, patterns were inconsistent, and even basic tasks like processing a prepay took way too many taps. I was brought on to redesign the core experience so it could actually keep up with the pace cashiers work at.

The Challenge

Think about what a gas station cashier is juggling at any given moment. They're watching fuel pumps, ringing up snacks and drinks, applying loyalty discounts, handling prepay transactions, and dealing with pump alerts. Sometimes all at once. The system needs to show the right thing at the right time without burying them in information.

Here's what we were working with:

Cashiers had to keep an eye on up to 16 pumps while also processing in-store sales
Prepay workflows took too many steps, which slowed the line down during rush hours
Pump status indicators all kind of looked the same. Idle, active, stopped, alert: they blended together
The sales palette and product catalog weren't organized well, so cashiers were constantly hunting for common items

Design Approach

Three things guided pretty much every decision I made on this project:

Glanceability: A cashier should be able to read pump status, transaction totals, and alerts from arm's length in under 2 seconds
Minimal taps: The stuff cashiers do most often (prepay, product lookup, payment) should take as few taps as possible
Error recovery: Anything destructive like a void, refund, or stopping a pump needs clear confirmation and an easy way to undo it

I redesigned the pump grid with color-coded status indicators. Green for active, yellow for alert, red for stopped, neutral for idle. Each pump card now shows gallons, dollar amount, and fuel type right on the surface. No tapping in just to see basic info.

Key Flows

Prepay was the number one priority. Customers paying for fuel at the register is one of the most common transactions, but the old flow needed 6+ taps and required the cashier to mentally track which pump the customer was parked at. That's a lot of room for error when there's a line out the door.

Here's what the redesigned prepay flow includes:

Quick-select denomination buttons ($5, $10, $20, $100) plus a custom amount keypad
A "Balance to Prepay" option that applies the remaining transaction balance directly
A Transfer Prepay modal for when a customer changes their mind about which pump they're at
Clear pump identification with visual highlighting so the cashier never authorizes the wrong one

I also redesigned the pump detail view. It now shows transaction history, active pump controls (Prepay, Pre-Set, Transfer, Suppress, Refund, Reauthorize), and real-time dispensing data without pulling the cashier away from the main screen.

AI-Assisted Design

This project was where I really leaned into AI as a design tool. Most of the Fuel POS work was done using Claude Code and Figma Make AI, and it changed how fast I could move through the entire process.

Personas: I used AI to help generate and refine our user personas. I fed in what we knew from stakeholder interviews and existing research, and used Claude to draft detailed persona profiles. It gave me a strong starting point that I could validate and adjust with the team instead of spending days writing personas from scratch.

Affinity Mapping: After gathering research inputs, I used AI to help cluster and organize themes from user feedback and stakeholder conversations. It surfaced patterns I might have missed and helped me move from raw notes to structured insights faster than doing it manually on a whiteboard.

A/B Testing: I used AI to help frame our A/B test hypotheses, define success metrics, and structure the test plans. When results came in, it helped me analyze the data and pull out the key takeaways without getting lost in spreadsheets.

Prototyping: Figma Make AI accelerated the prototyping phase. I could describe interactions and layout ideas and get working concepts to iterate on quickly. Claude Code helped me build out the interactive prototype that we used for customer demos. The combination of both tools meant I was producing polished, testable work at a pace that would normally require a bigger team.

AI didn't replace the design thinking. It removed the busywork so I could spend more time on the decisions that actually mattered.

Results & Impact

Internal testing and customer demos validated the redesign across the board:

Prepay flow reduced from 6+ taps to 2–3 with quick-select denominations
Estimated 35% reduction in average prepay transaction time based on usability testing
Projected onboarding time cut from 2 days to half a day based on task completion rates in testing
Pump mis-authorization risk significantly reduced through visual highlighting and confirmation patterns

We shared the redesigned Fuel POS experience with potential customers, and it directly contributed to signing a major US gas station chain. The designs sold the vision. Seeing a polished, interactive prototype made the product feel real and ready, and that's what closed the deal.

UX Perspectives & Best Practices

01 Design for the environment, not just the screen. POS interfaces are used standing up, at arm's length, in noisy stores with impatient customers waiting. Touch targets need to be big, contrast needs to be high, and the hierarchy has to work at a glance. Not just in a Figma preview.
02 Color is doing real work here. When you're managing 16 pumps, color isn't decoration. It's the main way information gets communicated. Green means active, yellow means alert, red means stopped. Once that vocabulary is set, a cashier can scan all 16 pumps in a second.
03 Fix the thing people do most, not the most complicated thing. Prepay is a simple concept, but it was the biggest source of friction. Cutting it from 6+ taps to 2–3 with quick-select denominations did more for the experience than any edge-case redesign could have.
04 Keep modals focused. In a POS environment, every modal is a potential bottleneck. The Transfer Prepay dialog asks one question ("Select a pump"), has one action, and one exit. No tabs, no settings, no secondary flows. Get in, get out.

Gallery