Self-Service Gas Pump

Redesigning the Pay-at-the-Pump Experience​

For the over 30 million motorists in the US who pay for their gasoline at the pump each year, the experience is an often overlooked but critical part of the day-to-day. Despite the acceptance of the current system, users do not generally have good associations with gas stations. How could this ubiquitous experience be improved?


Solution features include:

  • Order and pay for food and drinks directly on pump interface

  • Fill-up tank to an exact dollar amount

  • Enhanced fill-up progress indicators

  • Prominent attendant call button

  • Security mirror and in-set interaction area


Team Members: Bianca Copello, Joshua Crisp, Christa Peet and Elaine Schertz

My Contributions: User Research, Wireframing, Interactive Prototyping, User and Expert Evaluation, Project Manager

Duration: 3 Months


Semi-Structured Interviews | Observation | Focus Groups | Surveys | Competitive Analysis

User Needs

In the initial stages of research, we were interested in learning more about the entire gas station environment. In order to accomplish this, we conducted a literature review, semi-structured interviews with gas station attendants and hour-long observation sessions. We gained several key insights from this research:​​

  • Gas stations profit more from the sale of beverages and food than they do from selling gasoline

  • When stopping at urban gas stations, we observed that although ~80% of US motorists pay for their gas at the pump, the majority those users still enter the convenience store

  • The most common problems users report is the pump being out of receipt paper and elderly users not leaving the chip cards in the machine for a sufficient amount of time

  • Most gas stations are independently owned

In the next stage of research, we were interested in learning more about how users interact with the pump itself and how they feel about the gas station environment. After conducting 6 interviews and 3 focus groups, we created a survey to help verify our findings in a larger population. The common themes of desiring more efficiency, cleanliness and safety emerged throughout the research. Further selected results are shown below.

Words users associate with gas stations from survey (n=50)

User Needs


We used affinity mapping to categorize our user needs research findings into three main categories: efficiency, safety and cleanliness. In addition to our interviews with various users and stakeholders, we used these needs to developed the following personas to help guide our design. 


There are many possible experiences that users may have while at the gas station, the customer journey map below illuminates some of the most common experiences which were highlighted in our research.

User Journey Map for buying gas

Our research further helped us to identify a few key design requirements. First we knew that the system must be easy to use and that any new features should not take away from the system's current level of simplicity. Second, as a walk-up-and-use system, the interface must be easy to learn for motorists of all ability levels.



Ideation & Sketches


We gathered as a group and created quick sketches for each of our central user concerns (safety, efficiency and cleanliness). We then categorized our sketches according to the level of complexity, cost of the proposed solutions, and their visual and workflow similarity to existing pumps. We then designed our early pump alternatives according to these categories.

The first alternative had the most affordable, easily implementable features, which include a security mirror, a privacy guard around the keypad, a receipt request button, sanitary wipes and greenery/beautification.


The second alternative was a gas pump-vending machine combination which would allow users to add snacks and drinks to their gas purchase. Other features include mobile payments, the ability to specify a dollar amount of gas to be purchased, a prominent attendant call button and an additional progress indicator.

The next design represents our most futuristic idea and would allow users to fill their tanks without getting out of the car. Users would operate the pump using gestural movements from within their car; they would also be able to select their own entertainment. Convenience store items could be ordered and delivered to the user through the pneumatic tube.

We then held 6 sketch feedback sessions with randomized sketch presentation order to determine how users felt about the various new features. We asked about the features individually as well as each of the pumps overall. At the end, we had users sort cards with the various features from most to least interesting. After analyzing the ranking and the sentiments surrounding each feature, we selected several to be included in the wireframe.



I developed simple wireframes in Sketch to get feedback on the proposed gas purchasing flow.

Payment options

Specify dollar amount

Main screen with added feedback

Add-on selection example

Transaction closing screen

Perforated Receipt

3D model of gas pump with trash can and ADA compliant call system

We then completed 6 wireframe feedback sessions, aiming to determine how efficiently users could move through the modified system. We wanted to verify that the new features would not add any unnecessary complexity to the gas pumping experience. Several design improvements were gathered from the feedback sessions: 

  • De-emphasize the specify dollar amount feature and re-phrase to "fill-up to an exact dollar amount"

  • Label the progress bar with 1/4, 1/2 and 3/4 tank markers and add the words "to full" at the end of the time remaining

  • Change how the gallons and price totals are displayed



Since some of our features, such as the security mirror and the in-set interaction area, could not be adequately tested in a laboratory environment, we decided to focus the first round of testing on how well the vending machine functionality was integrated into the gas buying experience and the overall efficiency of the process


To complete the prototype, two of the team members concentrated on the physical cardboard model, while another team member and I worked to create a prototype, using Construct 3, which allowed users to interact with the pump using either the touch screen or a keypad.

Prototype screen flow diagram

Physical prototype



Heuristic Evaluation | Usability Testing | SUS


Evaluation Findings​


After conducting 3 heuristic evaluations with usability experts, we uncovered 13 unique problems ranging in severity from cosmetic to critical. Some of the critical issues are given below:

  • It should be made more clear that the progress bar represents the user's gas tank

  • It should be left to the user when to decide when to end the transaction 

  • Pricing total should be displayed in a larger font size 

We conducted 5 usability sessions with users thinking aloud as they completed the following tasks:

Task 1: Purchase gas

Task 2: Purchase $15.00 worth of gas

Task 3: Purchase at least one add-on while you are getting gas


We selected these tasks in order to test that our design would allow users to efficiently complete their primary task and make sure that the functionality of new features were clear to new users. After completing the tasks, users were asked a set of open-ended and likert-scale questions which allowed us to ask about the users' overall impressions and about specific features. 

3 users said that what stood out to them most was how simple the system was. On a scale of 1 to 5, with 1 being not at all likely and 5 being very likely, when asked whether they would use vending machine, the average rating was 4.4. When asked to compare the speed of this system to that of current pumps on a scale of 1 to 5, where 5 was much faster, the average rating was 4.0. This was interesting because the actual speed of the (simulated) gas flow was based off of average gas flows at existing pumps. Overall the system received a SUS score of 78, with some clear areas of improvement possible.

Design Implications

  • ​The intention of the receipt button was to eliminate a step for people who do not want a receipt, while not increasing the steps that those who do want a receipt have to perform. Paired with the transaction countdown, this feature was also meant to increase users' sense of financial security by clearly indicating the end of the transaction. However, the countdown left users feeling rushed and opened potential for users to miss the receipt option. Therefore, the receipt functionality should not be implemented.

  • Although the vending machine feature received ~30% negative response, some of this was due to users who thought it would be too easy to buy items from the machine; this problem could be solved by adding a confirmation dialog to the vending machine add-ons.

  • Users should be able to edit the quantity of the item they are purchasing from the vending machine.

  • The final version should have pictures of the vending machine items.

  • Add 1/4, 1/2 and 3/4 tank markings to the progress bar and the phrase 'to full' at the end of the time remaining text.

  • Add icons for the credit card and mobile payment brands that the machine accepts.



Home | Restaurant Inventory | Tech Fair | Resume

© 2019 by Elaine Schertz