.png)
Foursquare Dev Console
Improve Billing Transparency to Reduce User Confusion
Contribution: Lead Product Designer
Date: Q4 2022
Skills and Tools: Competitive Analysis, Interviewing, Site Mapping, Prototyping, Figma
The Problem
Users have expressed confusion and lack of awareness about the free credits they receive in the Developer Console and how to check their balance. This has resulted in a pain point for users and a need to improve billing transparency in the product.
Our Solution
The proposed quick win solution is to educate users about API billing and the free monthly $200 credits they receive per Org. This was achieved by showing the user's remaining balance directly on the developer console's landing page accompanied by a tooltip that clearly and concisely explains how the free credits work. We increased users ability to understand and find billing information by +50%. We also increased the number of users knew they were receiving free credit on a monthly basis for their organization by +57%
Final design (click to view)
The Process
01
Understand the Problem
Background Research
Foursquare's developer console gives users access to the Places API. This API allows users to get real-time data access to global POI data and rich content such as search, discovery, and the ability to rank venues.
Pain Points
Lack of billing transparency
-
Many users don’t know how to check billing balance
-
Many users don’t know they were receiving free credits monthly
-
It took users a long time to find billing information
Hypothesis
If we enhance the visibility and clarity of billing information then
-
users will be more aware of their $200 monthly API credits
-
users will be able to easily check their balance
-
users will manage their credits effectively
Experiment Details & Success Metrics
Experiment Details
-
Treatment (10%) will receive new design experiment.
Success Metrics
-
Billing Information Comprehension Rate:
Percentage of users who accurately locate and understand their billing details and account balance.
-
Free Credits Awareness Rate:
Percentage of users who are aware of their $200 monthly API credits.
.
-
Billing Page Navigation Time:
Average time taken by users to find the billing page from main dashboard?
How do free credits and billing work?
-
An organization can have multiple projects.
-
You receive $200 in API credits for the entire organization, regardless of the number of projects within it.
-
If you have multiple organizations, each one receives $200 in API credits separately.
-
Once the $200 credits for an organization are used up, you will need to purchase additional credits to continue using the API.
02
Design Process
Competitive Analysis
To assess/benchmark how Foursquare handles billing in comparison to peers & competitors, I conducted a competitive analysis of other Developer Consoles.
It was clear that our billing page button was buried multiple clicks away (3) compared to our competitors (1), making it difficult for users to find it. Putting the billing page under the organization section made it less clear to the users how to get to the billing page because that information was never made clear to the user.
Competitors (click to enlarge)
.png)
Foursquare (click to enlarge)
Current site map
I created a site map to gain a better understanding of the overall structure of the product and highlight potential issues such as deep linking the billing page. This also served as an important tool for communication with stakeholders and team members, helping to ensure everyone is aligned on the current structure of the site as well as the short and long term goals of the product moving forward.
%201.png)
Current site map (click to enlarge)
%201.png)
Proposed site map
Thinking about how we wanted to reduce the amount of clicks for the user to get to the billing page allowed us to explore different solutions and trade-offs, such as balancing user needs with technical feasibility and resource constraints. This allowed us to make informed decisions about which features and improvements to prioritize and pursue, aligning with our users' needs and our business goals.
Proposed site map (click to enlarge)
Iterating
We decided to prioritize low effort options for now and have the proposed site plan be a guide to how our product might evolve and meet user needs over time. I discussed these options with stakeholders as well as other designers in the company to get their input and ensure that we were considering all possibilities. I conducted a few rounds of user testing to narrow down the options.
Option 1
Use banner to communicate balance and free credits
Pros:
-
Easily showed user their new balance and educated them about free credits
Cons:
-
Doesn't scale if we have to use banner to inform users about more than one thing
Low Lift Option 1
Option 2
Add new section to show remaining balances
Pros:
-
Easily communicates balance and free credits above
Cons:
-
User works too hard to connect organization name above and project below
-
Doesn't scale if we have to user is part of more than one billing organization
Low Lift Option 2
Option 3
Combine new section and group projects
Pros:
-
Easily communicates balance and
-
Easily communicates free credits with tooltip
-
Reduces cognitive load and scales regardless of number of projects/organization
Cons:
-
No easy way to get to billing page
Low Lift Option 3
04
Final Design
High Fidelity Design
After our iterations, we felt comfortable with our final solution.
-
We visually communicated to users their remaining balance to simplify that credit remaining is for the overall organization and not a single project.
-
Users can get to the billing page with one click. We want our users to easily accomplish their goals when using our product.
-
The tooltip makes users aware of how the free credits work.
-
We did this with a quick low level-of-effort design that benefits the users and the business.
Final design video (click to view)
Success Metrics
This was a great project to work on as we continue to improve the customer experience. We have received positive feedback from admin developers who can more easily find and understand billing and credits on our console. The design is cohesive for new users and those who didn't have billing access (manager or viewer) as well.
-
93% of users understand and can find billing information +50%
-
83% of users knew they were receiving free credit on a monthly basis for their organization +57%
-
20 seconds for users to find billing page 50% reduction in time
Next steps
The plan is to continue to track the experiments and propose work on high level lift design iterations that will require rearchitecting of the site so that users can access the billing page more easily and intuitively.