UX Case Study: Implementing a self-service SaaS model (Part 1)
By using self-service models, you can automate support for users, allowing your team to focus on building meaningful relationships with them rather than handling repetitive support requests.
Introducing the self-service model for B2B
These days, most B2B SaaS companies use a self-service model as their new way of automating their business. This model has been used widely to simplify customers’ workflows in the competitive global marketplace. Furthermore, the self-service model eliminates manual and repetitive support requests, helping companies scale. Automating the business enables users to convert in a faster, more efficient manner, and provide value to your customers in the process.
In particular, here are some of the benefits of using self-service models for B2B SaaS companies.
- Increasing trial conversion rates
- A faster response time
- Greater customer satisfaction
- Low overhead costs
Switching over to self-service
The self-service project was a top priority when I worked as a Product Designer at my previous company. During that time, my company handled all transactions and payments manually, which took a lot of time for the internal team to check and verify things. Due to the long process, our users had difficulty completing the transaction; they had to email customer support, wait for their response, send payments manually, wait for payment verification, and then wait for our customer support to add credits and active periods. The waiting process was too long.
In this project, I collaborated closely with the CEO (Head of Product), Product Manager, UI/UX Designer, Key Account Manager, Frontend Engineer, and Lead Engineer.
Each role contributed to the self-service project in the following ways.
CEO (Head of Product)
Together with the Key Account Manager, he defined the pricing plans and bundles. He reviewed the payment integration and subscription flows created by our Product Manager. Moreover, he reviewed the high-fidelity mockups and copywriting as a whole with the Product Designer. Involved the Lead Engineer in conducting thorough research on the payment integration and ensuring the Product Designer and the Lead Engineer were conversant about Stripe’s UI payment capabilities. The timeline for the self-service project was also set by him.
Key Account Manager
Analyzed Willo, Jobma, Sparkhire, and MyInterview in order to carry out a competitive analysis. She redefined the pricing plans with the CEO and discussed it. Confluence was used as a reference by the Product Manager and the Product Designer to keep track of the final pricing plans.
Product Manager
Documented the product requirements (payment integration flows and subscription flows) in Confluence. Presented these flows to the CEO, Product Designer, Lead Engineer, and Frontend Engineer. In collaboration with the Lead Engineer, ensured payment integration capabilities. Assisting the Product Designer with reviewing user flows and high-fidelity mockups.
Product Designer
Examined pricing plan documentation in Confluence and flowcharts related to registration and payment integration. I analysed the checkout page of Stripe UI documentation in collaboration with the Lead Engineer to ensure we could customize it. Created high-fidelity mockups and prototypes. The CEO and I also collaborated on user flows, design, and copywriting. Coordinated with the UI/UX Designer regarding a portion of his work. I communicated the design with the Frontend Engineer so he understood the user flows and the function of design elements.
UI/UX Designer
Examined the documentation in Confluence and discussed the related tasks with the Product Designer. He mostly focused on the top up credits design, renewal enterprise/NGO/startup expiration, and support dashboard.
Frontend Engineer
Developed the design in coordination with the Product Designer, Product Manager, and Lead Engineer.
Lead Engineer
Distributed tickets in Jira and created the development timeline. Coordinated with engineers and the Product Manager on the project. Analyzed the payment integration process and feasibility of the Stripe payment checkout UI.
UX Improvement: Registration and pricing plans page
The first step in the design was to provide a better registration and pricing plan information. Google Analytics data shows a high bounce rate for pricing plans (*84%) due to inefficient content. Upon analyzing the user behavior, I found that visitors were trying to find information on this page, but quickly left since they couldn’t find the information.
Here is our previous pricing plans page before it was redesigned.
New pricing plans page after redesigned
User experience improvements such as:
Persuasive headline and sub headline
The previous headline did not reflect the plans themselves and was monotonous. This additional sub headline allows visitors to try our product without worrying about having to provide their credit card information right away. A well-written and persuasive headline can grab users’ attention and create higher chance of a conversion.
Previous headline: Choose what’s best for you.
New headline: Flexible pricing that fits your team size.
New sub headline: No credit card required in your first 14 days.
Prominent plans comparison description
It was not specifically indicated in the previous plans which plans would be appropriate for visitors (30 for 30, Start Small, Scale up) and which currency would be accepted.
Previous pricing plans: 30 for 30, Start Small, Scale up.
New pricing plans: Essential and Entreprise. Every plan has an indication; Essential is for startups, small, and medium enterprises, while Entreprise is for large companies.
By simplifying the table, users can easily scan at a glance and understand the differences between plans. Providing users with information about the different pricing plans available for your product and how they differ is crucial to converting visitors into customers, which is one of SaaS businesses’ primary objectives.
Price and feature alignment
I have added proper whitespace there to make the pricing and features more obvious. Moreover, the F-shaped pattern is used here since most of our visitors read left-to-right.
Relevant FAQ
In order to help potential customers get the information they need about pricing plans, it is helpful if you provide answers to common questions. We also included payment methods in the design.
The next step is to improve the registration process.
Our previous registration page needed updates since we have changed our pricing plans. This page is also crucial as visitors are redirected to registration after clicking the ‘Get a free trial’ button. We should therefore create frictionless form registration and focus on collecting the desired data.
New registration page after redesigned
User experience improvements such as:
A glimpse reminder to the value of our product
In order to help potential customers get a sense of the pricing plans summary, we need to improve our headline, sub headline and product value. In this way, our new copy has a more credible, compelling and relevant tone. Using our product’s vision as a guide, I suggested the new copy.
Previous headline: Get 30 for 30, free of charge.
Previous sub headline: Try Astronaut today! Here’s what’s included.
New headline: A faster, smarter way that candidates love.
New sub headline: Join hundreds of talent ecosystem leaders digitizing and automating their selection processes and keeping their organisations safe & agile.
Informative registration form
The form components were adjusted to align with our new design system, and a more effective placeholder copy was created. Creating a simpler form and making sure potential customers understand what each input field is supposed to do right away is our goal.
Designed to serve a specific purpose
We added a new option under the label of ‘What best describes your focus?’. This approach was benchmarked against Sparkhire and myInterview. Now we have three options: Recruitment & Assessment, University Admissions, and I’m An Applicant. The page aims to attract more potential customers, yet, we also cater to the needs of applicants who already possess an interview code.
The entire flow of the updated pricing plans and registrations
There are two gates to the registration page:
- Visitors who click on the ‘Get a free trial’ button on the pricing plans page.
- Visitors who click on the “Try for Free” button without being on the pricing plans page. By clicking on the button, they must select what best describes their focus.
If the visitor clicks on ‘Apply Now’, the registration process will look somewhat different since the team is interested in knowing what are the problems they want to solve or goals they want to achieve.
Takeaways
SaaS companies frequently spend too much time optimising their products and adding new features while completely overlooking the first steps their users take with the product. The pricing plans and registration page should be carefully examined since both contribute to the conversion rate of potential customers. Thus, providing the best customer experience will greatly improve chances of achieving business goals.
Thank you for reading the first part of the self-service process!
In the next step, I will explain the checkout and payment integration process for the Essential plan. Stay tuned! 😊
Reference
Meanwhile, you can explore the following references to learn more about the self-service model.
