Redesigning Chargebee’s Learning Hub — A study
Hi fellow designers. We at Chargebee have been doing continuous experiments with our web pages in the past couple of months. But we found that though we design stuff, sometimes the learnings from our experiments get lost, making it harder even for us to see it again. In addition, advocating our ideas to the masses matters as much as the design process itself, which would help us become veritable designers. So we decided to document some of the key projects that helped us create an impact on bringing in revenue for the business. Hence, we will be sharing some articles that dive deep into the thinking, the fun, and of course, the blood, sweat, & tears (what’s design without a little bit of drama) behind what we do.
Providing the existing and future Chargebee customers with an experience to get in the driver seat and consume content the way they want to.
Redesigning something does not always mean that the existing design is wholly thrown away.
Sometimes it is just the profundity of the experience, to concentrate on the intrinsic ways that a user would like to engage with the design.
And by Jakob’s law, it’s considered best not to design entirely new things and let the user suffer while you can leverage the existing mental models. And being aware that creating an interface aesthetically can set the usability in the viewers’ blindspot, we kick-started the project to provide the best possible solution.
The primary objective of the redesign
The resources in the Chargebee website were scattered and were hosted on different content platforms. The objective was to design a single learning hub that could imbricate all types and topics of content on a single page. This was to give users an intricate and unified content consuming experience without searching the features & benefits provided by Chargebee as a SaaS company. In addition, this would also help them define, understand and solve their problem. And, of course, to generate meaningful leads for Chargebee.
Secondary objective
To build a modular design template with a defined system that can deal with different forms of content and give the non-developer admins & team members the ability to alter or update content without internal dependency. This could help us save time that includes communicating the required changes, explaining the constraints between major stakeholders i.e, the content writers and the front-end developers.
The project involved stakeholders from different domains of marketing since the hundreds of content pieces that we have today are the brain-children of these superstars:
Below are the various types of content and the platforms where we host them:
Chargebee is a company that has been growing at a supercharged pace — both in terms of the product capabilities, and the human workforce that is driving everything. And due to this, we have been passively circumventing the idea that the consumer needs a unified content-consuming experience. We felt that it was high time we kick-started the project and began in April. It was the first project I was briefed about when I signed as a Chargebee employee. I was excited and elated.
We had 500+ content pieces in the form of different types, as mentioned in the above table. The first blocker we had to deal with was to categorize them based on topics.
Well, we had out categories already:
- Billing
- Building Chargebee
- Growth
- Metrics
- Payments
- Pricing
- Product
But when we looked deep, we had numerous ways of segregating the content. Some could fall under multiple categories, which we definitely wanted to avoid since giving users a simplified search capability was our primary objective. Chargebee’s positioning has evolved over the years and the content categorization needed to reflect that. We divided them into themes and sub-themes to make them easily accessible. The modern way of categorization of our content is as follows:
- Revenue Operations
* Churn
* Sales Operations - Subscription Metrics
- Pricing
- Finance Operations
* Billing
* Payment
* Revenue Recognition
* Accounting
* Taxes and Compliance - Champions of Change
- Building Chargebee
* Product Updates
* Company Updates
And this repertory of content, to be more beneficial for the consumers, was concurred with the idea of content segregation based on the industry they apply to. Chargebee is used across the following industries:
- B2B SaaS
- E-Commerce
- E-learning
- Publishing
- Video & OTT
This was a point where we had all the data required by us to get started. There were a couple of challenges that we wanted to keep in mind which we could solve at every opportunity we could avail:
- Though we knew the ad-words that were performing well for us, we were not aware of what and with what keywords would people search for items in the new resources centre that we were about to build.
- We did not have an advanced search AI or the time & resource to build one in-house. So we wanted to onboard a tool that could do the job for us.
- The existing menubar had drop-down links to the individual content types like blogs, webinars, etc. which in turn had their own landing pages. And each of these links has been performing really well for us in terms of bringing a large number of people closer to the content. We were not sure if and while we deploy the new design, would want to keep or remove them from the menubar.
- The existing content pieces have been tagged with the old keywords or category tags. This required us to find a way to revisit WordPress and Contentful to alter the tags associated with the content. We had the humongous task of re-assigning the tags to 500+ content pieces.
Since we understood the requirements, these were the next steps involved in the process:
- Identify and understand the needs (discussed above)
- Figure out the information flow, a.k.a. Information architecture
- Analyzing other resource centres (figuring out the layout, connecting the dots.)
- Onboarding the advanced search tool
- Layout design, wireframing, prototyping, and the final design
- Development, Quality-Check, and Go-Live
Information Architecture
For this, we tried to simplify the hierarchy within the page. The content types and categories were added as discussed above. However, we decided not to go old school and just lay the information on the functionality within the page. We included what we thought might make a difference to how the user interacts with the page. For example, the advanced keyword search, the ability to filter content manually (based on types, topics and industry), the option to subscribe to the fantastic newsletter we send out frequently, and other gimmicks like having a featured/hand-picked content to give a head start to the visitors. In addition, we wrote down the dependency for each of these things so that the respective stakeholders could solve these problems on a modular basis.
Analyzing the resource centres of other brands
Redesigning something does not always mean that the existing design is completely thrown away. Sometimes it is just the profundity of the experience, to concentrate on the intrinsic ways that a user would like to engage with the design. And by Jakob’s law, it’s considered best to not design completely new things and let the user suffer while you can leverage the existing mental models.
There was a good opportunity to check how other teams do it. Thinking about creating everything from scratch is good in a slightly Pickwickian sense. We are not alienists after all. And these companies have been trying to achieve similar objectives and we just had to just get inspired by them. We especially loved how brands like Slack, Dropbox, Intercom, Mailchimp, and Zendesk solved the case. And there were a couple of things that other brands did which might not work for us. So we approached this with common sense, taking inspirations only on the subjects of interest, in our case — the search feature and the filter options.
Onboarding the tool for advanced search
Our team of developers helped us research the tools that were available in the market. And we wanted a tool that, with the help of the search pattern if the users could help us create content that is more relevant to the users and help them connect to their solution as fast as possible. The tools that topped our list were Search powered by Google, Swiftype, Elastic and Algolia. All these tools had their advantages and disadvantages. By the time we were doing this research, we came to know that our own product documentation team had been using Algolia for a brief period to power their search capability (which was slightly embarrassing for us of course). We took a pause to acknowledge the fact that knowledge transfer by osmosis at the workplace has definitely been affected due to the remote work pattern in our lives.
Since we were already a customer of Algolia it was obvious that the onboarding and implementation time could be saved. We got on a call with folks from the Algolia team to help us figure out how we can customize, and fine-tune the front end of the search window according to our needs. Below are the factors that pushed us to choose Algolia over its competitors:
- We were already a customer of Algolia (and Algolia a customer of Chargebee 🙂).
- Algolia definitely had a better performance than the competitors (crawling time, advanced dashboard, etc.).
- The documentation and code snippets from Algolia were pretty straightforward. They just solved our case.
- The predefined front end design templates and the ability to customize them according to our needs were excellent.
- The ability to integrate the tool into our website was good.
- Algolia had a voice search module that worked brilliantly with almost all accents (try searching by saying a word next time).
Based on the learnings we kick-started the layout design for the learning hub.
Layout design, wireframing, prototyping, and the final design
We decided not to tamper with the design aesthetics that Chargebee as a brand has developed over the year. This is to ensure that the visitors have a streamlined and uniform experience when they sign up for the product and become customers of Chargebee. We kept iterating with regular considerations of feedback for each iteration, making sure that the intention and purpose of the redesign could be kept intact.
A hero section sounded necessary in the banner section since we sporadically, but often plan, launch, participate, announce and host various events, webinars, podcasts, etc. Hence a place to let the user know of what’s hot from Chargebee was needed. And we also wanted to ensure that the visitors are not left alienated when they land on our site :P So we hand-picked a few content pieces that most of our existing Visitors find useful and displayed them along with the hero section in the banner. Our banner section was ready.
For the next scroll, we decided to showcase the latest content pieces from three to four topics that might be very relevant to the visitors. From our data, we identified the topics to be Pricing, Revenue Operations and Finance Operations. We placed these sections following a fold where displayed the cards containing different content types like podcasts, blogs, glossaries, etc. since they have their own respective landing pages.
Since the page displayed existing content we did not have to design illustrations or icons specifically. Fortunately, we even had the OG images designed for our existing content. We made use of the existing resources and added the frost touch to the interfaces/sections that overlap others — like the menubar, the body copy that appears on hovering the content cards, etc.
The design turned out simple and beautiful. We prototyped the interactions on Figma and gathered feedback from the stakeholders one last time to check if we actually missed anything that we thought and talked about in our weekly cadence. The major checkpoint was to identify how the page would like in different viewports including mobile screens. Interestingly one of our developers is also a designer who helped us visualize the responsive design at ease. And we saved another few days of time here.
Finally, it was time for the developers to carry the torch over to the finishing line. By the time we handed over the Figma link to them we had over 424 artboards. Crazy eh.
Development, Quality Check and Go-Live
The small but sharp team of three developers helped us bring our sacramental vision to reality in a significantly short period of time. The web page looked sumptuous. To make it perpetual we got on a zoom call and pulled off a virtual night out, providing our developers company while they push the page live from GitHub. And we did the conventional testing to check for bugs, the responsiveness of the page in various screen sizes, the loading speed, the searching experience, etc. The page, was thus, moved from staging to the live URL.
I once heard someone say that the babies that are born during this pandemic are called Covid babies. And the CTO of the brand I worked with during my earlier stint jokingly said that the employees of a company who get virtually on-boarded should be called Covid babies too. I joined Chargebee just six months ago, virtually. I guess a night out with your colleagues to crack your most demanding projects help you build the very trust that’s required in the first place.
I sometimes have an ambivalent thought on whether trust comes first or the bond, especially in a professional workplace. It’s just like the chicken-egg hypothesis. But on the day the page went live, I figured out that the bond comes first. The trust follows.
A huge shoutout to SB for giving me this as my first project and guiding me with valuable feedback all through the process; Ayyasamy and Raj for being the wonderful developers who take feedback tightly and compliments lightly; Nupura for being sharp on the brief, requirements, helping me with the content categorization and being there throughout the process; Vijay for helping us with the keywords, metadata and the tags for the content; and Sharan for simplifying our approach whenever we tried to complicate it, helping us stay on track to get the project live.
And oh, we have a V2 of the Learning Hub coming up next. Stay connected.
⭐️ If you have any suggestions or feedback about what and how we did things in this project or if you just want to say hi, please drop me a message on Instagram.
🏀 Check out what we are regularly up to, via Chargebee’s Dribbble profile.
🧩 And if you want to join us in solving such interesting problems, check the openings on Chargebee’s careers page.
