Overview
Existing pay with GasBuddy users to have an optimal experience browsing and finding relevant offers within the app. They need to understand how GasBack works and be able to redeem it in the following three scenarios: online, nearby retail, and nearby dining.
My Role
Lead Product Designer. I took the lead on all UI and UX design for cross platforms. Worked closely with my Product Manager and iOS/Android Engineers on the Payments/GasBack squad — collaborating together to meet the end goals.
Existing Experience
Currently the user can shop through our affiliate offers within the app, make a purchase, earn and redeem GasBack. Within this project we are expanding the GasBack experience with Card linked offers (CLO).
Use Cases/User Experience Goals
New/Beginner
When I’m first discovering the program, help me understand how this entire program works and why it’s valuable to me.
What do I have to do to get started? Etc.
Anxiety around linking cards
When I’m first discovering the program, help me understand the types of offers available from GasBuddy and what I need to do to take advantage of them
Starting to engage
When I’m looking to browse offers, help me find offers that are relevant to me
When I have a particular purchase in mind, help me understand if GasBuddy has an offer for the particular brand/store/object.
Anxiety: Feels unsettling to be dropped into a retailer site from GasBuddy without context
Engaged -> Habitual
When I’m already engaged with the program, help me understand what offers are new or changed.
When I’m already engaged with the program, help remind me to shop through GasBuddy
Areas/Components to be Designed
POI view on map
Onboarding
Personalization
Search
Favorites
Understanding GasBack: Unmoderated Testing results
Two rounds of usability testing were created to learn whether or not a user understood what GasBack is, how to earn, and how to redeem. I designed prototypes in Invision and used UserTesting.com to see and hear the results.
Round 1
Next Steps
Majority of the testers didn’t fully understand how to receive or redeem GasBack. So the results show that I needed to re-write the copy and create another user test.
Round 2
As you can see in the results above 9/10 users knew how to receive and redeem GasBack. Which allowed me to move forward in my design process.
Next Steps
Those results made things easier for future iterations, like on-boarding for new and existing GasBack users. And making sure the user understands through out their entire experience.
White-boarding ideas
Explored areas of:
Discovery
solving: what is GasBack and how does it work?
Browsing/shopping experience
Help me understand what offers are around me now
Continuos onboarding
Personalization
Help or find offers relevant to me
Lo-Fi Wireframes
Zoom into wireframes below to see more in detail.