Pump Experience
Product designer / Gilbarco Veeder Root
Try to recall the last time you stopped at a gas station for fuel and coffee.
Wouldn’t it be great if you could order and pay for that coffee while fueling?
That’s exactly what we did in 2019 when we launched the Pump Experience project.
,,
Gilbarco who?
Since 1865, Gilbarco has manufactured the world’s leading fueling and convenience store equipment and technology.
In 2019, GVR (Gilbarco Veeder Root) launched a fuel dispenser with an integrated customer engagement service — The next generation of forecourt interaction, empowering retailers with customizable content and apps.
We were the R&D team that developed the service and the GVR apps.
Roles & Responsibilities
What’s my part?
Areas of Responsibility
I operated as a product designer and lead UX/UI.
I was responsible for UX and research, front-end user flows, design strategy, design system & documentation.
Team
4 developers, 1 QA, and me as the product designer.
Project manager
Our team was based in Israel, while the project manager was located in the US. We had weekly meetings and constant demos to make that long-distance relationship work.
Duration
6 months
What did I actually, do?
This was a "starting from scratch" project.
So before designing, we had a lot to learn, practice, test.
We even create our own test tool, which later on turned to be the official validation tool for approving 3rd party apps for GVR dispensers.
Overview
01
Testing Simulator
I took part in designing a testing simulator tool for developers and QA. This was a great opportunity to enter "backstage" before actually designing a single layout. I learned a lot about the complexity of all the possible actions, fueling states, payment flows.
​
02
Learning the Layouts
While the R&D team developed the backend player and software that runs all the content, I started learning, researching and planning.
03
Family of Apps
We developed and designed a family of 5 customizable apps. We wanted to launch a ready-to-use product, we wanted the retailer to immediately enjoy a variety of marketing interactions with customers: play games and win prizes, special sales, pre-order, and customer feedback.
New Opportunities
This product is a new touchpoint on the consumer journey map.
It opens a new marketing channel for our clients, the retailers.
Our main purpose was to help the retailers maximize profits during every fill-up.
We had to make sure the customer will feel safe and confident enough to follow through with the purchase.
​
We knew we had to minimize friction in the user's flow, meaning reduces reaction-time and system failures. Since those aren't unavoidable, we wanted to compensate in a transparent experience to ensure that the user knows what happens at all times and keeps a sense of security.
Our challenge was to make all those parameters align together.
We broke it down into 3 objectives:
Goals & Objectives
01
Customer Engagement
We had to encourage customer engagement on a new self-service product. We knew it meant creating a UI that reflects friendly, seamlessly, safe and secure interaction with the end-user.
02
Dynamic Content
In the same breath, that experience is intended to be customized by the retailers. We wanted to give them more control of the marketing strategy and content. The design had to be customizable, and the content had to be dynamic and directly configured by the retailer's live data (inventory and price book).
03
Security & GUI
Security was a big issue. We had to achieve security in both the technical aspect and user experience-wise.
A legit self-payment product must comply with strict payment laws and constrictions. ​ Some of the security restrictions dictated technical and GUI implements.
For example, here's my first big UI challenge in this project:
You have 8 fixed-position buttons for the entire design. Go!
End-Users, Clients
& Competition
I conducted my research online, on-site, building personas, calculating pain vs. gain for each. I focused my research on these 3 aspects:
Research
Market Research
The market research of Forecourt merchandising solutions helped me empathize with our clients' struggles in the fuel retail and c-store markets. The c-store market was familiar to me since I worked on Impulse and Impulse Edge.
User Research
With the end-user in mind, I gathered information from similar use-cases of payment flows and digital fueling-related products.
We also used transaction stats from Impulse© to have a better understanding of the average transaction total, most-purchased items, etc.
Visual Research
I gathered visual inspiration for e-commerce design and especially UI design for products with similar payment restrictions, like ATM. ATM's UI has 8 buttons restriction, just like the screen on the dispenser. It was interesting to find different solutions for a visually similar challenge.
My Must-Haves
Research Conclusions
I summed up my research and presented my team with my conclusions of the must-haves in a kick-off meeting.
I got a great response, and it got the conversation going and turned into valuable brainstorming.
It was educational for me and the development team. We understood each other better after that meeting and our goals were much more aligned.
Fast & Friendly
Fast system reactions and friendly experience - helps the end-user feel confident and fluently interact with the product.
Contrast GUI
Screen visibility is crucial. The outdoor light changes require a contrasting color palette, to support visibility during all dayparts.
Lean, Clear UI
Let's face it, the dispenser area is noisy, dirty, and visually disruptive. Keeping the UI minimal and simple will benefit clarity for the end-user and could be easily turned into a dynamic, customizable design for store-owners.
Loyalty
Personalize the experience using Loyalty campaigns. Loyalty programs are proving to drive people to gas stations and engage in conversion.
Personas
The user personas and their pain points helped us mapping the goal experience and became the lighthouse of the design process.
User flow #1
We had several user flows, for each step of the way and its potential scenarios.
User flow #2
Here's a general user flow of the shopping app.
Planning is Carrying
Design Strategy
Just before I dive into the design, I wanted to better plan the design strategy.
The entire design has to match 4-6 different frame sizes, and that difference was significant in scale and dimensions. I struggled with whether the design should be responsive or adaptive. I decided to follow the adaptive design method and use several distinct layouts for multiple frame sizes.
It was my first design for a fuel dispenser screen, so I first designed a draft just to get the feel of the size and locations of graphic elements. I printed that draft on a 1:1 scale to the real screen size on the testing dispenser we had. After a few iterations, we felt comfortable about the size and location of text, buttons, and images, and we could move on to style & colors.
01
Old-school Testing #1
Back when the testing dispenser wasn't functional, I started testing the real size proportions of design elements.
02
Four Apps Layout
When I tested the 4 apps layout on the dispenser, my real purpose was to demonstrate how disruptive and confusing this was.
In-team agreement: 50%
The decision was to wait for the field trials to get real feedback.
03
Old-School Testing #2
The printer's design code was new to us and we had to do some (ok, a lot of) testing to get the correct size and alignment.
04
Style Guide
All components were planned as SVG files to enable user-custom colors across all components. The logic behind the style guide was based on components-relations.
For example, once the user changes the Sunset Orange, all the components with that color will inherit the change.
05
Collaboration
All Possible screens were designed in Figma to collaborate with the team and for prototypes.
Start & Repeat
Design Process
Excited to start working on the design, we all agreed I'd start with the less complicated app with the simple, shortest user-flow: the customer feedback app.
I specified the app’s features and components and listed dynamic components for each app and static components that will apply to all 5 apps.
​
We made weekly code & design iterations and at the same time, I kept building our design system to keep all apps under the same design and experience umbrella.
These are some of the defining steps of the design process for the first release:
Design Tokens
Each frame had a defined structure and style settings for each element.
I documented all the adaptive design frames and shared them with my team as design tokens of the design system we were building.
6 Frames 4 Layouts
Each app and multiple adaptive designs match for all 4 layouts and all 6 frame dimensions.
Black List Testing
The shopping app had to support Black Listing items that will not be displayed.
This was a legal requirement coming directly from retailers. Tobacco & Alcohol are illegal to promote for under-aged customers.
Start Fueling
The field trials were educating in many ways. For example, we learned that we needed a CTA banner to tap the screen or insert a card to start fueling.
Header & Menu
The multiple frames approach wasn't too popular among retailers at field trials.
There was a suggestion for a different layout, having a header on top and menu-like buttons at the bottom.
Future Development
We started planning the next version of user flows, as we planned to develop additional features.
Style Themes
Our users can edit and change the colors and style of any app. Our Merchandise app had an add-on Cart feature. Instead of allowing the user to choose colors & styles, I design 3 themes to choose from.
What now?
We revealed our product at NACS and RTC conferences that year and got great feedback, but we needed more.
User testing and analytics weren't fully developed yet for this platform, so we relied more on user feedback.
We conducted field trials to get the client's and user’s feedback:
-
We saw real interest from both sides in loyalty features, less in ticker/survey.
-
Branded styling was very important to all clients.
-
The most popular layouts in use were full-screen apps or 2 apps max. Turned out the 3 and 4 apps layouts weren't as useful as we thought.
This project is still in development, but as I saw it grow this far, I can confidently say it has the potential to grow even more in the C-Store industry that's becoming more & more interactive.
GVR now offers a similar service to its European clients, called Multimedia Applause Europe.
There was also an effort to bring it back home to Israel and empower the growing Loyalty trend.
