In a perfect scenario, your users should learn how to use your product without the need to contact customer support. And as a team of product designers, at Eleken we always strive to create simple and self-explanatory UI/UX that helps users quickly adopt the product. Still, there are cases when SaaS is too complex for people to feel its value from the very first interaction. That’s the time we have to think out an intuitive SaaS onboarding process.
Good onboarding experience that brings value for both users and SaaS businesses should be:
- Unobtrusive
- Have low friction
- Contextual
- Interactive
In this article, we will show you five SaaS onboarding examples featuring the abovementioned characteristics that you can use as an inspiration for your cloud company.
Onboarding examples
Depending on the context and type of a cloud product, each project requires different approaches to onboarding design. And when planned out correctly it positively influences SaaS customer success.
Below we want to illustrate Eleken’s best onboarding experiences and lessons we’ve learned from them so that you’d want to create the one that suits your SaaS best.
Gridle: saving development hours with Intercom code-free product tours
Gridle (now Clientjoy) is a client relationship management software that focuses on helping small companies and freelancers store client data and manage sales, starting from leads and ending with invoices. Considering its target audience, Gridle set its unique value proposition as full client lifecycle management automation and simplicity of use.
Eleken was hired to revamp the look and feel of this SaaS product so that it clearly communicates the core value proposition to its audience. To successfully cope with this task and understand customers’ true needs, we started our design process with user research.
One of the insights we received from talking to users was that the platform should make it easy for newcomers to get started and give them instant confidence that they can succeed. That is, we had to design an intuitive onboarding.
To help the company save time (and therefore money) needed for development, we decided to introduce Gridle to its users with the help of a no-code interactive product tour by Intercome known for its simplicity.
Onboarding starts right after signing up and gently guides the user through the app’s key features, giving them a clear understanding of what to do first.
The main thing about product tours you should remember is that they should be super easy, and illustrate only the information that the user needs to start feeling product value. Thus, for Gridle onboarding, we chose a light minimalist design with a lot of white space that quickly focuses users’ attention on straightforward copy and bright CTA.
Additionally, to make it even easier for non-experts to get started, we created customizable templates for Proposals and Invoices. Templates reduce the mental effort needed to create a new thing and shorten users’ time to value.
Habstash: making long sign-up process painless
Habstash is a British financial service startup that helps people navigate the savings needed to buy homes. They hired Eleken to turn the existing prototype into a minimum viable product (MVP).
To bring maximum value and show users what type of house they can afford within their current budget, or help them calculate how much money to save up to buy a house of their dreams, Habstash needs to learn user preferences and gather a lot of personal information such as income level, amount of current savings, preferable home location, home type, and so on.
As you may understand, people are often unwilling to enter a great amount of data as a part of the sign-up process. So, our challenge was to create such an onboarding flow that prevents design cluttering and user drop-off.
We made a decision to use the Wizard design pattern, “a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones”, so that novice customers can easily perceive the information.
Habstash onboarding consists of 5 steps, each of which is represented on a separate screen with questions and fields.
The first thing the app wants to know is whether the user is saving alone or with a partner, and what their primary goal is. Depending on the answer, Habstash can show a different onboarding scenario for saving with the partner option. Also, there is a progress bar at the top of each onboarding screen that lets users quickly understand how many steps are left.
As well, the app warns users if they enter the field incorrectly and explains what has been done wrong.
To retain users if they can’t/don't want to continue filling in the information, we added the “Save&Exit” button. It offers customers to enter email address to be able to continue the registration from the same point where they left.
As the last step, the app uses the entered data to form a target plan with an estimated deposit for a dream house and offers the user to create an account to have full access to Habstash features.
To reduce friction and help users start using the platform faster, when filling in the password Habstash provides a checklist, points at which that fades away once the password matches with the requirements. Note that customers also have an option to create an account with just one click using their Google profile.
Prift: effectiveness because of the simplicity
Prift is a personal finance platform that helps people cope with money issues and quickly achieve their financial goals.
Eleken’s task was to design a simple, accessible, and intuitive MVP, and as Prift’s target audience are people over the age of 30, we opted for light minimalist UI and avoided overusing gamification.
Just like in the Habstash case, we used the Wizard design pattern to create onboarding flows.
Onboarding steps are designed with a light-blue and white color palette which aligns with the overall product style and makes the information on each screen easy to read.
To encourage users to go through all stages of onboarding we added a small note on each screen that explains the importance of filling in more fields, designed a progress bar, and showed newcomers how many steps are left. As well, we added a “Cancel” button, so that the user can quit the onboarding anytime.
In case some specific issue arises, the “Support” button in the top right corner is always there to contact Prift users with a customer support representative.
To help newcomers effectively use your product, you should define which functions in your app are essential for reaching customers’ primary goal and, more importantly, teach users how to use them.
Thus, to fully benefit from Prift, users should fill in the information about their property and pension. To simplify these processes we designed an opportunity to either enter the data manually or by adding an address (for property)/by connecting to a pension provider (for pension pot).
As a result, we got informative onboarding that is effective because of its intuitiveness and simplicity.
SEOcrawl: combining in-product and email onboarding
SEOcrawl is an all-in-one SEO management tool that came to Eleken for UI/UX overhaul. As a part of the redesign, we had to create a new onboarding sequence.
Product tours are great for quickly communicating essentials to users in a simple and understandable way. Email marketing perfectly engages subscribers and users check their inboxes more often than the app they’ve just signed up for. Therefore, we decided to combine these two types of SaaS onboarding.
Welcome email
After signing up for SEOcrawl users receive a welcome email in their inboxes. It suggests novice customers watch a 10-minute onboarding video to learn how to make the most of SEOcrawl and offers them to make the first action (add new project) by clicking the CTA button.
We made sure that the text in the email is readable, the CTA is clearly visible, and the overall design matches the product’s style.
As well, to make the email more trustworthy and attract users' attention to its content, we added a funny photo of SEOcrawl’s CEO who welcomes newcomers.
Product tour
SEOcrawl’s in-product onboarding consists of just three easy steps so that users don’t get bored but vice versa, are kept engaged and interested.
Each onboarding screen contains minimum text and bright CTAs that leave no questions on what to do to proceed to the next step. Also, there is a progress bar for users to track their progress. When one step is completed a checkmark appears, which motivates users to complete the next tasks.
The onboarding process starts right after the registration. When an account is created, the platform asks the user to take their first action - add a project. This way, newbies get not just a theoretical walkthrough, but a practical task.
We made adding a project just a piece of cake for SEOcrawl's users. There are only two fields to fill in.
The last step is for syncing the API (application programming interface). Not to scare users away at this stage and add credibility, we decided to put text with a privacy policy that states that all data from the user’s project is completely confidential.
Finally, users see the screen that notifies them that the data uploading is in progress. Not to lose a user at this point, SEOcrawl promises to send an email notification when all the data is ready.
Process place: fun and engaging onboarding
Process place is a workflow management application that aims to bring clarity to all business processes. One of the main issues the platform deals with is helping HRs onboard new employees. Thus, the onboarding we designed for Process place is teaching users to kick off new workers.
Onboarding flow starts with a pop-up window that welcomes newcomers and offers to “start exploring from completing the kick-off checklist”. Note that it’s always important to give your customers the ability to omit onboarding. Thus, the user can either click the green CTA button and proceed with an onboarding checklist or close the pop-up and explore the product on their own.
By nature people don’t like leaving lists of tasks uncompleted, so we decided to design the onboarding in a form of a to-do list that users have to cross out task by task.
As well, it’s important that the checklist creates a sense of progress. After completing one action the user should receive clear instructions on what to do next. This way, we engage customers and encourage them to explore the product further.
To entertain users a bit, at the last onboarding step, we decided to add a funny image of sheep that clap their hands and a short instruction of the final task.
When the user completes the whole checklist, they come across a congratulation pop-up. And, lastly, not to leave novice users alone in an app, it’s important to give them a direction on what they can do next to start using the product on their own.
In Process Place, we offer new customers to start building their own processes from scratch or with the help of customizable templates.
What helps us design effective SaaS onboarding
Based on the cases described above, we can single out the following characteristics that help create good SaaS onboarding.
- Thorough user research. To create the onboarding that helps your customers, you should identify what problems they want to solve and focus your efforts on what makes sense to the user, not what you want them to do.
- Personalized onboarding. If your onboarding aligns with different types of buyer personas, they are more likely to feel the value, and therefore start paying for your SaaS.
- Creating a few onboarding steps. Define how many steps the user needs to perform the first task. Remove all unnecessary elements to reduce friction and create a smooth user experience. Make sure each step of your onboarding has its clear purpose and brings customers use.
- Identifying the Aha-moment. Users come to your application not because of the beautiful design or the great number of functions it offers. They want to have their problems solved. The sooner you will show them the value of your solution, the more chances they will retain and pay for your app.
- Offering templates. Performing an action or completing a task is easier if you have a suggested example of how it can be done. Therefore ready-made templates educate users and save them time.
- Showing the progress. As users move from step to step, they should understand how long the education is going to take and what their current results are. Showing the progress promotes newcomers to take further actions and prevent them from dropping off.
Want to learn more about how our designers can help you create great experiences for your customers? Schedule a call with us.
