How Chargebee created a product-led experience in a sales-led world

Discover UI/UX best practices for building a PLG experience, plus grab a free Chargebee-style Chili Piper booking template

Try this template
Jonathan Anderson
minutes reading time
Skip to section:
The fourth post in our best-in-class onboarding series explores how top SaaS companies deliver product-led growth with personalized, in-product content. (Check out our first post featuring’s onboarding dashboard and our second post featuring Vidyard’s onboarding survey.) Each blog includes a best-in-class UX template you can build yourself without coding.

About the UX/UI of Chargebee’s product-led experience

Chargebee helps revenue teams understand their subscription revenue. It’s a problem where the details are devilish, but somehow they make it look easy. Any revenue leader who’s dabbled in Chargebee’s product category, Subscription Management, knows it gets hairy fast. Nonetheless, Chargebee can carve a niche by building an outstanding free trial experience.

Click through the Arcade demo below to see the start-to-finish experience:

Chargebee's clever onboarding flow explained

page with a testimonial

Chargebee doesn’t stop marketing to users just because users need to sign up. The new user signup screen provides big smiles and recognizable logos.

Two-panel sign-in with carousel testimonial.

Quick stats reinforce what value new accounts can expect by adopting Chargebee. The product is selling itself! Get your testimonial template.

"Book a call" page

In a nod to a sales-assist motion, Chargebee immediately provides a “book a call” widget powered by Chili Piper. This page is one of our favorites because it cleverly re-categorizes booking a demo as ✨working with an onboarding team✨ (even if your onboarding specialist ultimately reports to sales).

Onboarding flow step with two-panel design and Chili Piper calendar.

Terms like “fast track your evaluation” imply our time is valuable. Similarly, “we’re on the other side of the calendar” reinforces that real humans are on the other end. Humans with feelings just like you! This component takes up an entire page, but you can skip ahead.

This is some text inside of a div block.

Get your Chargebee-style onboarding demo step template

Build a product-led onboarding experience like Chargebee's. Check out our Candu-built version of the two-panel design. Explore the interactive onboarding template below.

Nowhere is it written down that solving a complex revenue problem requires a complicated User Experience. Our aim is to make our customer's life easier, not more difficult."

Tarmo van der Goot
Vice President of EMEA, Chargebee

What makes Chargebee's onboarding flow so great?

Verification modal prompt

Thou shall not pass until verified. You cannot skip this action for security reasons. The user is only able to open their mail client or sign out.

Full-page "lock screen" teases the UI.

This pattern is powerful because it takes advantage of our anticipation ‘Land Ho! We can access the product! 

Account setup step

Before accessing the product, Chargebee inserts a two-part account setup survey. It asks us to name our account and personalize the experience by selecting our primary industry and payment technology. Given that the initial screen suggested we were ‘almost!’ within the product, this could be frustrating to the user. It also implies that this was added later.

The short set-up wizard includes a simple entry action.

Thankfully, Chargebee follows the two-question rule, staying below our frustration threshold. In return, Chargebee learns valuable insight into how it ought to personalize the product experience, which onboarding emails to send, and helps its sales reps (err onboarding team members) understand whom to chase. Try our Onboarding Flow with Personas template.

Helpful homepage

This UX has to be one of our favorite product dashboards. It contains a video overview, a little product education, and sample demo data below. 

Video demo, carousel module, and demo data help users get familiar with the product.

Video explainer announcement bar

The video explainer announcement bar is fun and easy to understand. Clicking the thumbnail opens up a full-page video explaining Chargebee’s value proposition.

Short-form demo video greets users via a banner at the top of the page.

One improvement to this design would be to mark completed or minimize the announcement bar once the user watches the video. Get your video announcement bar template.

Product education carousel

This main carousel is one of our absolute favorite components because it gives users a mental model of how Chargebee works while defining key terms.

Simple carousel of key conceptual model.

It’s easy to overlook these educational components within SaaS products, but it is invaluable because it helps us understand how the product works. Much like providing a trail map to a new hiker,  this simple carousel helps all feel confident that we’re on the right track.

Demo analytics

Finally, the demo data below the fold helps us understand what value we’ll get once we start using the product.

Demo data helps users visualize the value they'll (eventually) get from Chargebee.

We strongly prefer providing demo analytics (vs. an illustrative splash page) when appropriate, as it will help your users understand what’s to come before they do the hard work of integrating their data. Explore our Key Metrics template.

Related post: Three metrics for customer onboarding

Beyond onboarding: Recommendations for Chargebee's implementation pages

Here’s where the truth comes out. Subscription management is, indeed, complex. We have a few ideas for improving Chargebee's implementation pages.

Configuration checklists

The Getting Started page contains a set of 15 configuration actions nested within checklists. Woof. Good thing we’re already hooked! 

Long-form "getting started guide" includes links to documentation inside the product.

The educational panel on the right-hand side provides an academy course and contextual links to relevant documentation. Each set of questions says how long it will take to complete. A more straightforward UI pattern would use product events to check them off or allow users to mark them as “read” by clicking the CTA. Discover our Implementation Guide template.

Action cards carousel

Within a specific config, Chargebee provides a series of action cards. These cards are fun to scroll through but may not effectively prompt action. We prefer all essential steps to be visible above the fold or, if not possible, to provide a vertical scroll. A horizontal carousel is excellent when a user is browsing and deciding which option to pick.

We prefer all essential steps to be visible above the fold or, if not possible, to provide a vertical scroll. A horizontal carousel is excellent when a user is browsing and deciding which option to pick.

Pro tip: Instead of this horizontal scroll UX, try this no-code Newsfeed template.


Select the template used on this article and customize it based on your users needs.

Try this template

Turn your ideas into UX today

Get a custom walkthrough of Candu

Request free trial