autopay for e-commerce
autopay for e-commerce
End to end design
End to end design
autopay for b2b e-commerce
Due to an influx of unpaid invoices, Univar product team wanted to implement AutoPay. Much like how user AutoPay bills, we wanted to integrate AutoPay on E-Commerce for chemical sales in the B2B realm. I worked alongside BA’s, PMs, Devs and a UX Manager to design and create this feature over the course of six months.
This project was a huge undertaking which required an understanding of both business, backend and frontend processes.
Where to start?
This was a huge undertaking and turned out to be a learning curve for our team. But we had to start somewhere, So working alongside my manager, I decided to start with a competitor analysis and I also created a starting journey map to establish some kind of visualization of the process that a user may experience.
Autopay journey map
Outcome: establishing the two main experiences of the AutoPay experience: Set up and Manage and necessary unanswered questions which made us realize we need to partner with more stakeholders (the PMS, BAs and Devs)
Autopay competitor analysis
Evaluating AT&T, Discover and Geico’s Autopay experiences. How do they have it set up in the infrastructure of the design? What Manage options do they have? What can we learn from them?
Major outcome: Autopay is usually a simple process. Turn on and forget about it. But we would soon learn with AutoPay for E-Commerce is more complicated than a bill.
Partnering with Project manager, Backend Devs and BA’s, we workshopped requirements and flows for autopay.
By partnering with these stakeholders, we were able to evaluate the business needs, the technical feasibility from a dev perspective as well as identify areas of the experience that we needed to consider that exists specifically within the chemical e-commerce space which included Notifications (along with Set Up and Manage), what type of set up options do we give businesses? When do we implement AutoPay payments? What options do our users need? And also that for MVP we need to consider how users will dispute payments.
This is the clean user flow of the set up experience. it identifies the starting points, processes and backend processes.
Exploring disputes:
AutoPay seemed so simple when we started, but the deeper we went into it, we had to account for a lot of the existing business issues that exist with payments and then the problems that would occur in automating those payments. One such issue was how often our customers dispute payments. We had to partner with the Get Paid team, to learn how disputes work in our system today, and where and how we would integrate this into the set up and manage experience. Through workshopping the experiences we decided to integrate a dispute link into there processing email reminder which would then lead users into a dispute experience through the Get Paid team.
These were my actual notes from our week long workshopping sessions. These notes established all the requirements for the Set AutoPay experience. (I did not include the Manage Autopay notes in here.)
Some of the midfi designs I created and handed off to a researcher.
after several iterations, here are some of the High-FI designs I created for the set up and manage experience.
Set Up: High Fidelity Designs:
manage: High Fidelity Designs:
What’s next?
After working on this project for 6 months, we launched MVP and have started slowly beta testing on users. This project was a huge challenge with many organizational changes that occured and process improvements needed to be made. But we made incredible progress and turned many stones to finally reach MVP, but there are many variables still yet to be explored.