Kroger Pay at the Pump
Giving Users control, reducing drop-offs, and driving digital adoption
Kroger Pay at the Pump
Role: Product Designer
Employer: Kroger
Platforms: Mobile
Areas: Research & Design
🚩 The Problem
Kroger Pay only allowed preset amounts or a full tank; no way to enter a custom dollar amount.
This frustrated budget-conscious users, especially gift card holders, and led to abandoned transactions.
🔍 What Was at Stake
User Pain: No way to enter exact amounts (e.g. $7.43)
Drop-offs: Users canceled at checkout
Missed Revenue: Lower Kroger Pay usage & incomplete purchases
Competitive Gap: Other fuel providers allowed custom entry
✅ The Solution
We added a Custom Amount option, letting users type in any amount directly.
This flowed naturally with the existing UI and required no onboarding.
Design highlights:
✔ Real-time validation
✔ Easy to find above presets
✔ Seamlessly integrated into current flow
✏️ Let’s Sketch
Kroger Pay At The Pump Sketch
Custom Amount Sketch
💻 Final Design
Kroger Pay At The Pump (Entry Point)
Custom Amount Feather
💥 Results
📈 +10% increase in completed transactions
💳 Higher Kroger Pay usage
📉 Fewer complaints around payment flexibility
💬 Why It Worked
“The moment I saw the custom entry, I knew exactly what to do.” - Cynthia (Avid Kroger Pay User)
“I feel more in control of my money now.” - John (A Regular Fuel Shopper)
🔁 Takeaways
Solved a real UX pain point with a lightweight solution
Boosted key metrics with no user learning curve
Balanced business and customer goals seamlessly
