Kikelomo Blavo's profile

Flair's Salesforce HR App: Customer Onboarding

Flair is a complete platform built on top of Salesforce with customisable features for managing your HR department

Flair's system automates every internal process any HR department has, which removes the need to look for other tools for a specific use-case. Learn more about Flair here
I had the opportunity to redesign the onboarding experience for the HR web app on salesforce.
Team
Kikelomo Blavo (Me) - UX & Project Lead
Maher Khdeir  - Full Stack Engineer

Tools
Figma/Figjam
Notion
Linear
Adobe Illustrator
So, what was the problem?

The current homepage for new and existing users of our HR web app lacked any personalised flow or experience. As such our customers did not fully understand what the product is designed for, what goals they can achieve with it, and what benefits our unique solution could give to their HR departments. Some of the core problems with our onboarding include:
1. No personalised onboarding experience
2. No information on how to get started with the platform
3. Bland Interface
4. Increased drop-off rate due to a lack of motivation from users to continue the discovery journey
What we want to achieve

Our goal is to give a good first impression of our product and ensure our customers (HR professionals) have a seamless walkthrough and take initial steps to make sure they can immediately set up the environment and achieve some quick wins. We want to achieve this by:
1. Showing an interactive welcome screen with a knowledge base for new users to learn about the product before diving in
2. Introducing demo data for our potential customers to explore the platform
3. Showing a setup process in short simple steps
4. To make interface simple, despite data complexity
Insights

Our data showed that 40 to 60 percent of our users who signed up for a free trial used it once and never came back.

Clearly, we had to re-strategize and start using the right tone, elements, and explanations to give users everything they need to hit their targets successfully. The most critical phase in the entire customer journey is represented by the moment when trial/new users land on our homepage for the very first time. This is where our user's actual journey within our product begins, It is the first step of the customer journey that leads to success and advocacy, as such we had to make sure that we significantly reduce our customers’ friction points by guiding them as smoothly as possible.
Strategy

Effective onboarding means bringing prospects to their desired outcomes as quickly and efficiently as possible.

After analysing all my research findings, the strategy I came up with was to urge users towards success milestones. Customers don’t buy a product, they buy outcomes and our users needed to get quick wins as soon as possible to be motivated to continue the discovery journey within our product. The sooner we prove that our HR web app provides real value, the more engaged and active our users will be.

It was helpful for me to think of the onboarding process as a smooth ramp where we needed to meet our users at level 0, and take them from barely knowing what our product does to appreciating its value, committing to using it, and succeeding in the long run. Taking a cue from the 5 stages of user onboarding, I created a vision/user journey that shows the whole onboarding process. Because onboarding is really an ongoing process, and this will act as our guide to continuously provide support for our users
Design Approach

I wanted to also make sure that the experience I create should be one that offers flexibility, support, and guidance for the user, not dictating their experience. Since our web app is built on-top of salesforce, the visual design experience aligns with the salesforce guidelines and lightning design system.
Welcome screen for new users

I wanted to give our potential customers a good positive first impression as it is a vital start to forging a strong relationship with them. So the first thing they see after installing our app is a pop up of our welcome message. This is a part of our strategy of providing our customers with a better understanding of what the product is about and what next action to take to get started on using our product successfully.
Before the Redesign
After installing our HR app on salesforce, the landing page shows a bland interface without any personalised onboarding experience for new users.
New landing page with pop-up welcome message
An interactive view of the new landing page with a pop-up welcome message for new users to learn about the product before diving in
Setup Guide

At this stage, our potential customers may have already seen a product demo, and seen a ton of screenshots. When our users get to the homepage, I want to get them set up and ready to start using our product. I included a step by step guide or something similar to a set-up wizard to take our customers through each step of the set-up process.
Our new setup assistant to guide users in short simple steps
Once all steps are complete, the user can close out this panel and dive in to using the platform to achieve some quick wins
New Homepage Layout

Our homepage was bland, we had no information or overview on display and I wanted our users to get some insights on their organization and employees as they land on the homepage. We had already gathered some information from our customers on what details will be useful to display on the homepage, My main challenge here was displaying them in a simple and intuitive way despite the data complexity.

In terms of prioritizing what information to display, as typical of our platform, it can be fully customized during setup with one of our implementation specialist and HR Managers or Admins can choose depending on their use cases what information they will like to have on the homepage.

Current Day, Workflow and Missing Information
I wanted our users (HR Managers) to see what is happening for the day right on the homepage. They can see which employees have birthdays and those who are absent for the day, They can also see right away employees who have information on their record missing as well as progress and status of their employees' workflows either for their onboarding or offboarding or any other type of workflow that has been set.
With the new layout, HR Managers can see information about the employees in their organizations and can perform quick actions right here on the homepage!
Organization Overview, Approvals and New Hires
A general overview was important so our users, not just HR Managers but also management and C-level executives can get insights on the overall organization, in terms of employee attendance, employee diversity and compensations across all departments and locations. All recent approval requests can be processed (approved or declined) right on the homepage and onboarding workflows can be created for new hires starting soon.
With the new layout, HR Managers can see information about the employees in their organizations and can perform quick actions right here on the homepage!
Exploring our product with demo data

For prospects/new trial users to understand the value of our product and become customers, It was a strategic desicion to include demo data into our platform because it was important for our users to get a first hand experience on how our application works.
Our users could explore an in-built customization and demo data that can provide a good starting point or serve as a reference in understanding how our product work.
Validation

As an HR tech company, we practise dogfooding. We use our product as regularly as we expect our customers to. that way we get to live their experience of the product to work out bugs and evaluate the quality prior to its release.

Because we wanted to move fast as is typical with startups, I opted for an internal beta testing, I wanted to use the flair team to view our product from the perspective of customers or clients, and by extension, ensure that our user experience is exactly as we want it to be. I drafted scenarios to validate functionality and usability. Test cases validated that:
1. The new homepage was easy-to-use, and similar to industry-accepted interfaces that are widely used
2. The homepage components was supported by the salesforce platform
3. Information on the homepage was simple, clear and visible to the users.
Outcome

Requirements and design were completed within the space of 2 months. There was some improvement in retention and real customer feedback was generally positive with most indicating that the new homepage was easy-to-use and helped them perform task much faster than it would normally have taken them with the previous interface.
Thanks for scrolling!
Flair's Salesforce HR App: Customer Onboarding
Published:

Owner

Flair's Salesforce HR App: Customer Onboarding

Published:

Creative Fields