Overview
Our 2019 company goals were to drive adoption of Pay with GasBuddy. We wanted to funnel more people in to pay enrollment, so it was important that the enrollment experience was tightened up.
My Role
Lead Product Designer. I took lead on all UI and UX design for this experience. Worked closely with my Product Manager and Engineers on the Payments squad — collaborating and brainstorming together to meet the end goals.
Previous Design
Pay enrollment was designed when the Pay with GasBuddy product first launched in 2017. It had an added completion rate of 60%. So there was quite a bit of opportunity to improve the visual design both aesthetically and systematically.
Goals of Refreshed enrollment
Overall business KPI to increase enrollment %
Ability to modularize enrollment steps (will allow testing conversion by moving steps around)
Add more context to what we are asking for and why (intro to enrollment, in context, copy, tone)
Ask for address only once - as the shipping address
Streamline with GB registration (include in the PwGB registration)
Autofill city, state, and zip from user's zip that was provided in GB registration
User Flow
After the introduction page, all of the enrollment steps should be interchangeable from the backend. The default flow will be:
Intro → Shipping → License → Bank Intro → Bank → Confirm
All of the steps can be swapped around except confirm screen.
If a user abandons enrollment during any step they are taken to the steps they did not complete already. They also have the ability to edit or correct any previously entered information.
Lo-Fi Prototype & Testing
I created low fidelity wireframes to conduct unmoderated usability tests with GasBuddy users, and to get feedback from my squad (PM, Engineers) and other designers during our critiques.
Final Design Iterations
Journey Map of entire Pay enrollment and card activation: