top of page
Untitled-2.png
MY ROLE
Designed customers' onboarding experience and worked closely with engineering team to deliver a minimum viable feature (MVF).
MY TEAM
Worked with one product manager, one key designer and three engineers
TIMELINE
April 2022 - June 2022

Context

CharlieHR is the HR software for small to medium companies in the UK.  We noticed that most new customers were struggling to learn about Charlie's features and relied heavily on the one-to-one demo meeting. To reduce the workload of the business development team, our team aimed to deliver the best self-onboarding experience to new customers. Thus, increasing our self-activation conversion rate.

Big Objective 

Improve the self-activation rate from 19% to 35%.

Problems

1. Should we focus on helping new customers to set up or demonstrate the value of our product?
2. Can we demonstrate the value of our product in a trial?
3. Are our customers comfortable with self-activating?
4. Will we be able to target the key decision-makers (KDMs)?

Target Users

  • HR
  • Admins

Design Sprint

To find out the answer to the above questions, we ran a design sprint at the beginning of our project. We interviewed many experts in different fields to craft an accurate user map and brainstorm the best idea.

Map

Screenshot 2022-06-23 at 10.51.34 pm.png

Speedy Prototyping

Sketches and Heat Mapping

20220408_111656.jpg

Storyboard

1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
3.jpg

Prototypes

1st prototype

DS 1.png

2nd prototype

DS 2.png

Feedback from User Testing 

'You get straight into setup and you don't really get that opportunity to learn about the product.'
'There's a lot of information on the dashboard now.'
My eyes are more prone to go to the navigation panel on the left. 
'I would need to look into to really understand what Charlie is capable of helping me with.'
'I wanted to see what this(the feature) looked like.'
'I'd like to be exploring on my own.'

Solutions

Solution 1
Offering a way for trial users to quickly see and find key features is valuable.
Solution 2
Offering a way for trial users to quickly get an understanding of the things they can achieve with our features
We separated 3 steps to develop our idea and design to make the design flow clear and allow developers to start coding.
Step 1: Decluttered the Trial Dashboard
             To make to trial dashboard less cluttered to let users focus on the onboarding navigation
Step 2: Develop Onboarding Navigation
            Showing the 6 key features and bringing the users straightly to each feature's page
Step 3: Develop Onboarding Description 
            Helping users to understand quickly what can they achieve with the features

Decluttered the Trial Dashboard

Many users mentioned that the trial dashboard was too busy, and they did not know where they should focus when they first landed on the dashboard. So my first mission is to redesign it to make it less cluttered. 

Before

Dashboard - Existing.png

After

Desktop layouts (FINALL).png

Onboarding Navigation & Description 

After decluttering the trial dashboard, we developed the 30% wireframe of onboarding navigation and description. 

Low Fidelity Wireframes - Onboarding Navigation

image (1) copy 2.png

Low Fidelity Wireframes - Onboarding Description

image (1) copy.png
image (2).png
image (3).png

Final Design

Onboarding Navigation

  • The key features button is located on the left navigation panel - left navigation panel is the first area that the users will focus on.
​
  • Selected the 6 features that HR is concerned with most - reference from user testing and marketing data.
​
  • Allow new customers immediately know what features Charlie has. 
​
  • Default close - many users will unintentionally close the popup stuff to see the product.
Dashboard - option 2 (no video).png
Dashboard - open.png
close.png
Create Meaningful Conversation.png

Onboarding Description

REVIEWS is the first page we chose to design, and we will adopt this design to other key feature pages.
 
  • A scroll-up window - easy to adopt on other key feature pages.
​
  • Deflect open - we know many users will close, but it is okay. Users can explore the feature on their own, and they can always go back to the guide if they have a problem. 
​
  • Showing the REVIEWS steps and advantages on the first tab lets users know how it works and what Charlie can benefit them.
  • Users always want to see the product's look. If they do not add team members, it is hard to show how REVIEW looks. Therefore, we offer an example on the second tab. Users can understand what information they can get after creating a review and how to manage it.
​
  • In this section, it will become a full screen to allow users to read it in detail.
View sample - page 1.png
Templates.png
  • REVIEW TEMPLATES are another selling point of this feature. Showing it on the third tab allows users immediately know what they can gain from Charlie, and how it makes their job easier.
​​
  • Users can click into the different templates to know the detail such as review questions.

Outcome 🎉

👏 Drop off in the sign-up processes rate decreased from 22% to only 2%.
👏 Improved average page views in trial from 6.2 pages to 6.9 pages.
👏 Adding the animation to key features doubled the number of people using it, from 24% to 49%.
👏 Users who use key features are improved activation rate from 4.6% to 16%.
bottom of page