Bringing CircleCI Plans Home

Rethinking the plan experience from the ground up

Role

Product Designer

Company

CircleCI

Timeline

Jun – Dec 2022

Project overview

Problem

Customers don't understand what they're paying for or what they're getting thanks to a complex Plan UI.

Solution

A clear picture of what's in your plan, what costs you money, and comprehensive usage monitoring and controls.

Learnings

Plan usage, billing, and overall plan management must be meaningfully separated to prevent confusing users.

The problem

What annoyed the design team most about the Plan section in CircleCI was that it was literally a fullscreen modal that covered the persistent navigation menu. This project started because we wanted to pull the Plan UI into the core app, but that was just one of our problems.

CircleCI's Plan UI began simple but eventually ballooned into a messy hodgepodge as new features were added. In this project, we reconsidered everything, down to fundamentals like navigation, layout, and overall purpose.

This project was a joint effort between me, the Monetization design lead, and another product designer, the lead for Buyer Experience (focused on pushing free customers to monthly plans).

Who uses this?

Billing admins

Plans in CircleCI are managed by the billing admin persona. Depending on the size of the organization, a billing admin could be an engineering manager, director or VP of engineering, CTO, a single finance employee, or a finance team.

Starting with the wrong framework

The Plan UI serves multiple purposes, so to capture all the necessary functionality, we began with identifying Jobs to Be Done (JTBD). We broke each one down into the steps required to complete the job.

A small slice of a big FigJam breaking down steps for user tasks in the Plan UI.

During this exercise, we realized the JTBD framework was not a good fit for evaluating the Plan UI. Even though it contains multiple small features, there are only 2-3 JTBDs at a high level that can be properly broken down. So, we switched to bucketing features.

Buckets and sorts

We put down all features needed for the Plan UI and grouped them into rough buckets that made sense to us.

Then, we asked 2 product managers, 2 engineering managers, and 4 lead engineers to do a card sort of the same list of features.

Participants went about the exercise in unique ways—some grouped features by what they'd like to see on the same page, others by frequency or visibility of information.

We looked for overlap and synthesized the results of the card sort to create a rough information architecture diagram, separated by plan tier.

Putting the designs to the test

Next, we created an interactive prototype and ran an unmoderated usability test with users.

Findings

All but 1 of 6 tasks were completed in under 2 minutes, with many being completed in under 1 minute
All participants correctly identified their current plan details and usage data
Usage controls must be discoverable at the top-level, since only people who already want to use them them know what they are
Putting usage data and controls on the same page didn't resonate
Some pushback on the amount of friction in the cancel plan flow

The solution

What are you paying for?

The Overview tab gives users a straightforward look at what plan they're on, what features are included, and how many credits are in their monthly subscription.

A usage snapshot gives them a high-level look at how many credits and network + storage space they have left.

How much are you using?

From the Usage tab, billing admins can drill into their organization's usage by billing period. A tabbed table shows exactly where each credit was spent.

Billing admins who conduct monthly, quarterly, or annual financial audits can quickly download CSV usage reports.

How are you paying?

The Billing tab was created for the Plan UI due to this redesign. It gives users a single place to see and download statements, add and edit payment details, apply coupons, and cancel their plan.

Reflection

As a contrast to the rest of my work at CircleCI, this redesign was a long-term, comprehensive look at a huge slice of the product. It was a unique pleasure to have a co-designer on this project from beginning to end, with each of us utilizing our strengths and respective knowledge bases to put together a single cohesive design that works across CircleCI's plan tiers. This redesign was in our minds for a long time, so it was incredibly satisfying to execute such a large-scale improvement.

Due to a layoff, I didn't get to see the final stages of this project through, so final tweaks and handoff were handled by my co-designer. On a positive note, our redesign was shipped not long after I left, and it is live today.

Given more time, I'd love to really dive deep into the Usage tab, starting with research into the most useful data points we can provide. From there, I'd like to design a legible, highly visual way to display that information through useful charts and graphs, rigorously testing with users along the way.