Onboarding experience designed to increase completion and get to product value ASAP.
Overview
These are the elements I focused on to make sure the onboarding experience was approachable, easy to understand, and trustworthy.
Progress Indicator
This allows investors to understand how many steps it will take to complete onboarding, where they are in the process, and what are the upcoming steps.
Prompt
This tells investors what they need to do. It usually is in the form of a question.
Exit
Investors can easily exit the onboarding process. It's not visually loud so it doesn't entice them to press it.
Options
This is where investors answer the prompt. Icons visualize the content and the trailing action helps them understand what they need to do, e.g. a radio button means only one option can be selected.
CTAs
This is how investors navigate between steps. The buttons are clearly able to make it crystal clear what they do.
Contact Support
This instills trust with investors because help is only a click away.
Overview of the elements that I focused on to ensure the best experience possible using step 5 as an example.
Sign Up
Creating an account first is required because it allows Global Predictions (GP) to save onboarding progress in the event an investor leaves and so GP can send product and marketing emails.
I designed this page to be familiar to investors. There are the standard social sign in options, eg Google, as well as the ability to use an email address.
The right side is designed to help make sure investors understand what the benefits of using GP are and is a way to build trust.
Sign up page for desktop and mobile.
Onboarding Steps
I decided that onboarding should be 8 steps because it gave GP a comprehensive overview of the investor's portfolio, which allowed for actionable recommendations. It also was had a high completion rate.
You can see all 8 steps in the slideshow below.
Slideshow showing all 8 steps of onboarding.
Progress Indicator
The progress indicator is designed so that investors know how many steps it will take to complete onboarding, where they are in the process, and what are the upcoming steps.
To show the investor where they are, a blue border is placed around the step number and the step title's font weight is heavier. Additionally, the connection line changes from gray to blue.
To show which steps are completed, the step number changes to a checkmark and the container's background changes to green. Lastly, the connection line changes from gray to green.
To show which steps have not been completed, the step number container border is gray along with the connection line.
The progress indicator is designed to work on both desktop and mobile devices as shown below, while making implementation easier. The biggest difference being that the mobile version is a drop down so it doesn't take up valuable screen real estate.
Progress indicator for desktop and mobile.
Options
The options are laid out in a list to make it easy to scan and select the one that works best for the investor. The trailing radio button or checkbox lets you know that you can only select one or multiple options respectively. The card design and trailing action both are affordances for the user to know it's clickable.
The options are designed to work on both desktop and mobile devices as shown below, while making implementation easier.
Some options are just a text input, while other options have text inputs only when a specific option is selected. When an investor is asked to input a percentage, using a text field as opposed to slider or select allows for the most efficient way to input any number from 0-100.
Iconography is an important piece of making it easier for the investor to understand each option and be able to tell options because they visualize the content.
Options from various steps for desktop and mobile.
Net Worth
Getting the investors complete net worth is critical. It is the most important information they will provide because it is the best way for GP to give them recommendations to improve their portfolio. That is why this step is designed to be as easy to accomplish as possible.
There are clear CTAs for each item. When an investor presses the 'Add' button, a modal will open up to provide the investor with a focused experience to complete that task efficiently.
Net worth step empty and filled out for desktop and mobile.
Add Items
This is the experience when an investor adds an item for their net worth. When they add their real estate information, they will see a modal with a text input to enter the dollar amount of their real estate holdings.
The text input has a clear label, a leading $, and helper text to assist the investor in making sure they are entering the correct information.
Step 8 add real estate modal for an investor to add the total dollar amount of their RE holdings desktop and mobile.
Add Securities
The experience for adding securities is a lot different from the other items because it has more steps and requires the user to share more sensitive information.
That means, investors will be presented with a full-screen modal to keep them focused on the task at hand.
They can connect an account or upload their information manually via a CSV. The connect account option is emphasized over the manual option because it's quicker, easier, more reliable, and will allow the data to always be up-to-date.
Additionally, to instill trust, there are 3 callouts at the bottom that go over security, social proof, and calling out using Plaid to connect accounts.
Step 8 add securities modal for an investor to add their securities via connecting an account or manually uploading a CSV for desktop and mobile.
Impact
We collected data over the first month and found that the new onboarding experience was a huge success over the original experience. Below are some stats that stood out along with drop-off funnel.
100%
Increase in onboarding completion
52%
Investors who completed onboarding
514
Investors who completed onboarding
Bar chart showing the drop-off funnel for onboarding.