Our research uncovered a few main pain points:
- Users couldn't see when or how much they would be charged within the platform.
- Users would like the ability to retrieve payment receipts from within the platform.
- Both internal and external users did not have transparency into errors that occurred, which increased the workload of the technical operations team, as well as increased user frustration when their campaigns would stop running due to a billing issue the user was not aware of.
- Previous payment processor had a maximum number of payment cards (10) which was an issue for our agency users who managed campaigns for a number of clients.
We conducted a competitive audit of other advertising platforms such as Meta, Google, and Amazon to understand what features we could build to further improve our product.
Discovery
- Implement a new way of billing that reduces risk for the business and burden for users
- The business remains in compliance with consumer regulations and does not handle or process any sensitive payment information
- User pain points caused by technical constraints of previous payment processor are addressed
- Support long term deprecation of the old platform with minimal user frustration by building the new platform (Astra) to achieve parity with the old platform
Here is a look at the previous experience:
Goals
How might we handle billing in Astra, our new platform?
The Challenge
Choozle is a SaaS company that enables businesses to run programmatic campaigns using its platform. The product integrates with demand-side platforms (DSPs) such as The Trade Desk and Amazon Ads in order to distill their advertising offerings into a curated and simplified experience for maximum campaign performance.
During 2023-2024, the business decided to migrate from its legacy payment processor to Stripe.
I was the sole product designer responsible for the end-to-end design process from conception to final deliverables. My role included the following responsibilities: conducting interviews, user research, competitive analysis, paper and digital wireframing, information architecture, prototyping, visual design, usability testing, design QA prior to release, and design iteration. I worked cross-functionally with a product manager and our front-end engineering team to bring the project to life.
Overview
Advertising Billing Experience
Design
This was a really interesting project because we dealt with the complexity of permission and feature restrictions at two account levels (organization vs. advertising account).
Tradeoffs and constraints
Given that this project involved rebuilding the way the business collected revenue, the scope of this project was very large and involved multiple iterations over a year and a half. Originally we designed the experience to be more competitive with other large advertising platforms that our users were familiar with; however the business decided that to do so would introduce too much financial risk for such a small company, and midway through the project our team had to pivot and change the entire billing system due to changes from executive leadership. It was important for our team to be flexible and adapt to business needs, while still addressing the pain points our users experienced.
We also encountered technical constraints with the Stripe API that our engineers discovered late in the process—for example, Stripe would not allow users to edit all of their card information, so we made the product decision to remove the 'edit card' functionality we initially designed since users would not be able to edit all of their card details.
Given the scale of this project and the changing needs of a startup organization, I'm proud of what our team was able to accomplish in providing users with a modern billing experience.
Results, Reflections, & Next Steps
^ BACK TO TOP
The new Astra billing experience will improve user satisfaction with Choozle by increasing user control, while helping the business reduce risk and move forward with deprecating the old platform.
- Solving the user pain point of lack of clarity on billing errors - The error states for these sections solve the user pain point of lack of clarity and control around billing errors.
- Solving the user pain point of lack of clarity of when they will be charged - I added a separate card section on the Billing Settings page that shows the user what their payment method is, and when they will be charged based on the business needs..
The purpose of this page is to:
- allow users to add funds to load their prepaid balance
- allow users to see their active payment method (source of prepaid balance refills)
- allow users to change their active payment method
- allow users to view all payment methods saved to their account
- allow users to add and delete payment methods
- allow users to address any billing errors
- allow users to view their balance settings and turn automatic balance refills on or off
- Solving the user pain point of wanting to export receipts - This feature solves the user pain point of needing to pull payment receipts from within the platform.
The purpose of this page is to:
- give users a record of all transactional history
- allow users to export transaction history
- show users their current balance, amount spent, and remaining balance, as well as how their balance is approaching the point at which they will need to manually or automatically refill their balance
- this page gives users a way to contact support for questions and access additional billing resources
- Solving the user pain point of ten payment cards maximum - I introduced a saved payment methods section that serves as a library of all of the saved payment methods per account.