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 Monday.com’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
Sign-in 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.
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).
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.
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.
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.
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 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.
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.
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.
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!
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.
