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.
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.
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
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
New landing page with pop-up welcome message
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.
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.
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.
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.
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.
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:
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!