Pay at the Pump
The Solution
Add new and improved animations to enhance app-to-in-person interaction for a clearer understanding of expected responses and to eliminate the perception of being "stuck."
The Problem
User testing suggested users experiencing confusion/uncertainty during app-to-in-person interaction when it's time to pump fuel. Some typical user feedback includes: "Can I close my phone?", "Should I leave the app open?", etc. How might we "smooth out" this transitional step so that our users can fuel up their cars with confidence?
Pay at the Pump First Draft
The flow below was an early design from PayPal UX. Their UXR showed that users felt ‘stuck’ on the authorizing payment screen as it could take up to 20 seconds to process, during which period, without proper additional on-screen instruction, any attempt to start pumping could result in an error and fueling failure.
First Exploration
The first visual re-design exploration aimed to utilize PayPal UI illustrations for visual storytelling with added animation. Fresh graphics were created for the gas nozzle since none was available in the PayPal UI library. The PayPal UI lead was also brought in to ensure brand style consistency and alignment.
Second & Third Exploration
The second visual re-design exploration adds a secondary animated pumping screen after the payment validation screen. It indicates that users were free to put away their phones and begin fueling.
Scene 1: Authorizing Payment - Looping
A pulse-like green line was incorporated to visually show the users that the PayPal app is actively connecting to and communicating with the merchant.
Final Animations
Scene 2: You can start fueling - Plays Once
The green circle scales into size to show a checkmark then scales down followed by the nozzle illustration with a validation burst.
Early Animation Ideas
Prototype
Context
The Pay at the Pump flow encountered a prolonged authorizing/loading state, which could take up to 20 secs after users have selected their form of payment before fueling. This lengthy and bland loading state could cause user drop-offs considering that they are in an in-store environment which is extremely time-sensitive. Without further visual assistance from the in-app message to indicate expected actions, feeling stuck on the loading screen could cause confusion or even frustration to our users.
Scene 3: You can start fueling - Looping
The gas pump is tilted clockwise by animated hose pulling movement to insert the nozzle into the gas funnel. Additional details such as a tire and trim were added to resemble a stereotypical vehicle configuration.
