GasBuddy Savings & GasBack
Redesigning GasBuddy's cashback rewards experience, expanding from affiliate offers to card-linked offers across onboarding, browsing, and redemption.
Company
GasBuddy
Year
2020
Collaborators
Product, Engineering, Marketing
Platforms
iOS, Android
Responsibilities End-to-end UX/UI
Role
Design lead
PROBLEM
GasBack was confusing, and users didn't understand how to earn or redeem it, limiting engagement with the rewards program.
WHAT I DID
Led UX/UI design for an expanded GasBack experience, including CLO, onboarding, browsing, search, and personalization.
OUTCOME
After 2 rounds of usability testing, 9/10 users understood how to earn and redeem GasBack, up from a majority of users being confused in round 1.
The Problem
GasBuddy's GasBack program let users earn cashback on purchases, but it wasn't landing. Users were confused about how the program worked, what they needed to do to earn, and how to redeem what they'd accumulated. The result was a rewards feature that wasn't rewarding anyone.
The project had two layers of complexity: fixing the comprehension problem for existing users, while simultaneously expanding the experience to support card-linked offers (CLO). This new earn mechanic added even more surface area to explain.
User Journey & Goals
New/discovering
Help me understand how GasBack works and why it's worth my time. Reduce anxiety by linking my card.
Starting to engage
Help me browse offers relevant to me and understand what happens when I click through to a retailer.
Habitual
Surface new or changed offers proactively. Remind me to shop through GasBuddy before I check out elsewhere.
Usability Testing
I ran two rounds of unmoderated usability testing via UserTesting.com to answer a specific question: Do users understand what GasBack is, how to earn it, and how to redeem it?
ROUND 1
Majority Failed
Most users couldn't explain how to receive or redeem GasBack after going through the prototype. The core issue: the copy wasn't doing enough work. Users were navigating correctly but leaving confused.
ROUND 2 - AFTER COPY REWRITE
9/10 Users Passed
After rewriting onboarding copy and restructuring the explanation flow, 9 out of 10 users correctly understood how to earn and redeem GasBack. Confident to move to high-fidelity.
Design Process
Auditing the existing experience — Mapped the current affiliate offer flow to understand what was already working and where the CLO expansion would need to plug in.
Whiteboarding — Explored four problem areas: discovery (what is GasBack?), browsing, continuous onboarding, and personalization. These became the design workstreams.
Lo-fi wireframes & round 1 testing — Built and tested initial prototypes in InVision. Results showed the copy was the primary failure point — not the navigation or layout.
Copy rewrite & round 2 testing — Rewrote the onboarding and explanation copy from scratch, retested with a new cohort. 9/10 users passed. Moved to high-fidelity.
High-fidelity & handoff — Designed final screens across iOS and Android, covering onboarding, map POI view, offer browsing, search, favorites, and redemption states.
Reflection
WHAT WORKED
Running usability testing before high-fidelity work was the right call. The round 1 failure would have been much more expensive to catch after visual design was complete — discovering it in lo-fi saved significant rework time.
WHAT I’D DO DIFFERENTLY
I'd frame the copy problem as a hypothesis earlier. Once I suspected comprehension was the issue (not navigation), I could have tested copy in isolation rather than within a full prototype, which would have made iteration faster.