Costco Gas Station Redesign

My Role

User Research
User Personas
Wireframes
Interface Design (Shared with Tomoki Arakawa)
Prototyping
User Testing

Overview

Redesign an Existing gas station to make it more user friendly.

Problem: Paying for gasoline in 2015 is antiquated and awkward; with a bad user experience and a bad user interface.

Solution: Costco phone app saves time by shortening wait times for gas at Costco Gas Stations. It allows the user to set gas and payment preferences, as well as daily gas purchase limits with their phone. The RFID tag on the windshield of the car stores membership information and gets scanned as the vehicle approaches the pump. The credit card info and preferences get stored in Costco’s database.
The new touch screen gas pump interface speeds up the process of the checkout. For those users that prefer not to use their phone for payments, the membership card scanning process is still in place. The customer gets greeted with a personalized greeting based on their membership info scanned.
This improves the customer experience by reducing time spent in line and allows them to spend more time doing the things they enjoy.

User Research

I conducted user research on Costco company and who their users are. Through the survey I learnt that the most favorite thing for Costco customers was the great value and the least favorite thing was the long lines at the gas pump. The users reported the need to scan two cards – the membership card and the credit card as annoying. We took that into consideration when we were designing the features for the app.

User Personas

Based on my research I created my user personas. The majority of consumer Costco customers are middle to upper middle class females that are 35 y.o. and older.

Task Flows

We analyzed the information in the survey and created task flows based on the user feedback.

Dealing with long lines

We discussed the problem of long lines that users complained about. In addition to the payment process redesign, one of the possible solutions could be in creating SUVs lanes with a higher capacity pumps.

Payment Process

We thought about payment process. We decided that Costco member could get an RFID for their car. It would only store their membership number. As the car would pull up to the pump, the membership info would get read by the scanner. The payment information would get accessed by the built-in computer within the pump itself. All of the technologies currently exist.
We have created an illustration to better explain our thinking process.

Wireframes

I designed the wireframes based on survey feedback and the paper prototyping. Then I went through the round of user testing, recorded feedback and adjusted the designs based on that.

Screen Designs

After the second round of user testing we created the screen designs. The user interface was influenced by the Material Design Guidelines. I tried to keep the screen design simple and easy to understand, so the even not very tech savvy person could carry out tasks with ease. I executed these skins in the UXPin online prototyping tool. Tomoki created an updated look for the logo and a chevron banner. We wanted to update Costco’s logo slightly without turning off the existing business and the consumer customers.

Gas Pump User Interface

As part of payment process redesign we came up with a new gas pump UI design. Our users indicated that they perceive gas pump interface and the whole pumping process as unclean and much preferred a touch screen display.

Gas Pump Touch Screen Prototype Video

I created this video to illustrate the interaction at the touch screen gas pump.

Gas Payment App Prototype Video

I also created this video to show the user interaction with the phone app.