Redesigning MongoDB Billing

Lead Product Designer • September to October 2019

I redesigned our billing overview and invoice pages to help customers better understand consumption activity on our platform.

Background
Many customers would contact our support teams or customer success managers in order to better understand the breakdown of their invoices. Our billing pages hadn't undergone a design transformation in years and there were many pain points that prompted confusion around comprehension of consumption activity on our platform.

This project aimed at addressing users’ difficulty in better understanding their billing information.
Goals
By offering a new project-level breakdown, we wanted our users to be able to better track their spending moving forward. If a team within an organization was utilizing more or less resources than expected, customers would be able to react swiftly and make effective measures accordingly. Thus, we found it necessary to add billing improvements to increase users' comprehension of our current billing and invoice pages.
Our ultimate goal was to allow customers to clearly understand a breakdown of spending per project within their organization.
Measuring Success
Support tickets related to billing consumed 11-16% of our Support team’s monthly resources over the last year.

Billing was also a previously high-touchpoint topic for many of our customer success managers. Many took data from their Tableau dashboards to create personal slide decks to show customers’ spending activities over a previous timeline.

Our ideal aim was to see a reduction in Support tickets and improve users’ overall sentiment of our Billing platform.
We would monitor this from speaking with our technical account managers, Support team, and customer success managers.
Internal User Interviews
9 interviews
1 hour-long
5 larger enterprise customers
4 startup customers
Learned how customers currently understand consumption activity and what their  pain points were
Insights and Trends
Larger Enterprise Customers
• Our users view the billing page very frequently (from once a day to a couple times a week)
• Our customers are conducting calculations themselves to "keep their eyes on their tabs." This is the only way they can understand consumption and track down offenders who are over their allotted budget.
• Largest pain point is uncovering who the biggest consumers of credits are. Majority want to make sure they’re exactly where they want to be on a cost basis.
• Having projections, visualizations, and filters would be great in amplifying the value of the billing page.
Smaller Enterprise Customers
Most smaller enterprise customers only view billing once or twice a month.
Understanding what is costing the team the most and what they're spending it on is crucial. Customers create organizations for each team in order to get around having one invoice for the entire organization.
Visualizations, metrics, history comparisons, and alerts are all features they'd like to see in future iterations.
Design Studios with Stakeholders
I hosted two separate design studios with two groups of stakeholders. One group was focused on my immediate product team while the other was with stakeholders who had direct relationships with our users.
1 Design PM
1 Product PM
1 Design Lead
1 Engineering Lead
1 SWE
1 Director of Cloud Support
2 Technical Account Managers
2 Customer Success Managers
2 Support Team Leads
2 Designers
In each of the ~1.5 hr long meetings, we participated in activities that encouraged original thinking through experimentation and iteration.
How Might We's
Came up with questions related to the goal of the project at hand to see if it could steer some innovative ideas.
Mind-Mapping
Asked participants to jot down their thoughts with no specific formatting. Aimed to place “mind junk” into tangible drawings and words on paper.
Crazy Eights
Forced participants to place 8 sketches in each 8 panels. I noted that they would not be shared with the group to ensure that fidelity did not have to be high.
Storyboarding
Participants went back to their mind-maps and crazy 8’s to find the best ideas they came up with. Here, attendees framed what the interaction of the feature they came up with would be like.
Silent Critique
After uploading photos of their storyboards onto the slide-deck, we had 2 ballots each to vote for what we thought were the best ideas. For each idea, we also discussed why we liked the feature and why it worked.
Competitive Audit
In addition to the ideas captured in the design studios, I also wanted to grab inspiration from well-designed existing applications that tackled the same problems. I researched platforms that had clear hierarchy of data, an organized layout, and used graphs or projects in a way that aided the user in understanding consumption or activity.

I created an artboard to document the inspiration that I had gathered. This in turn led me to admire the minimalistic visual style of the varying applications I had looked at.
User Testing
3 rounds of user studies in RITE testing
2 Technical Account Managers
3 Small Enterprise Managers
2 Large Enterprise Managers
During each round of user testing, I was able to ask customers what their impression of the designs were. Then, I would shape the interview to dive deeper into the areas of the design that I wanted most feedback on.

Many of the questions in my user research script revolved around asking what the most valuable parts of the designs were, what users disliked about the concepts if there were any concerns, what was helpful or not helpful, and features users wanted to see on top of the ones I had designed in the prototypes.
User Research Feedback
On our billing overview pages, the redesign formatted groupings of relevant information into cards, highlighted a monthly summary, and included an upfront running total for services on our platform.
Users notice the monthly summary amount as the first item on the page before interacting with any other pieces. They enjoy its clarity and comprehension as it elevates high-level details yet still shows the finer-grain details if the user chose to.

Overall, the consensus was that these designs are more organized, informational, and easier-to-read than the old billing pages. Most participants agreed that they forecasted experiencing less issues with understanding their billing information and spending less time inspecting details with these new designs.
For our invoice pages, customers enjoyed the monthly summary at top in addition to the roll-up on the different features. The new invoices made it easier for them to expand on details and the graph clearly articulated the largest spenders.
Customers expressed that the monthly summary with total spend was really clear and that the roll-up on the different business units was really useful. They said the way the data was presented was much more organized and they enjoyed how consumption was shown for different layers for the billing period.
All users stated that the designs were easier to understand than the old pages.
“It's an improvement from before. It's just enough information that I can tell what's going on here.”
“It's fantastic, it's been my biggest pain point when I try to manually go to the line items. This makes it a lot easier.”
"AWS's billing page seems to have a lot of bells and whistles. In comparison, this is relatively straightforward."
“It's very quick and easy to look at what I need to know."
Impact
We’ve been releasing these new features in phases and have set up close conversations with our Support team, TAMs, and CSMs post-launch. Since then, billing-related cases have decreased from 11-16% to 5-8%.
READ NEXT: BUZZFEED TASTY