Redesigning onboarding
Advicefront, Mar 2017 - Apr 2017

Overview

As explained in the Client Helper post, one of the biggest challenges at Advicefront was always to keep our collaborative workflow simple and flexible enough while still addressing the requirements of advice services.

Our onboarding was one of these challenges. The firsts versions were overloaded with a ton of financial terms and generic concepts. Advisers' clients were getting confused and needed help from their advisers to start the process.

It needed fixing.

The team

Andreia Costa – Designer (me)

The challenge

Despite the financial jargon that let potential users scared, we noticed some misleading steps along our onboarding – mostly due to small fixes from time to time – leading to a broken experience.

I decided it was time to address the main problems:

  • Too much info at once, users didn't understand the main concepts (like having a financial plan made of goals);
  • Friction to balance data gathering and give users some value from application;
  • Possibly, didn't make use of empty states.

Our onboarding flow (for advisers' clients, B2B2C) looked like this:

Old onboarding flow
  1. Advisers sent a link of their online page to start the process. Clients landed on a page to start their financial 'plan' by completing some blank spaces.
  2. Land up on a screen with a "what your plan could look like" example.
  3. Sign up.
  4. Land on a screen with 3 steps, read-only.
  5. Answer a 10 questions risk questionnaire.
  6. Get their risk score.
  7. Land on screen with an 'financial plan' and inside a 3 steps flow, where your next step is to 'Define your life goals'. One step was already accomplished, the risk profile step.

One positive aspect of the flow: users didn't need to open the sign-up email sent to proceed.

My role

This work was an individual approach to a known problem that needed fixing. It was later shared with the team. My time at Advicefront ended before the designs made it to the high-fidelity UI prototypes. I believed this was valuable to the team regardless of my presence in the company.

Limitations

No funnel numbers to help the problem analysis. Also, we had limited access to advisers' feedback from his clients' experience.

Approach

My strategy consisted in not worrying too much about styling, the challenge was to deliver a consistent solution to onboard clients without re-inventing the wheel.

Main points:

  • Demonstrate progress to the client;
  • Help the client start planning their life goals right from the start;
  • Reduce adviser intervention.

The critique

I went over each onboarding screen and took notes on what could be changed or improved.

Keep in mind: the client onboarding purpose was to enter the application with a draft plan of their life goals and risk profiling well defined. The last step was completing their financial profile and submitting all the information.

Advicefront onboarding screen1

Screen 1

The client starts the onboarding and this is the first screen he sees. Mainly data gathering – well balanced I believe. The sentences appear one at a time and the language is friendly.

In the last form field we ask for the main reason they need financial advice. In this example 'planning to buy a house'. This turned out to be a big problem at the end of the flow.

Advicefront onboarding screen2

Screen 2

Cool, we are using the data to build an example plan. I believe it's good (too fast for that amount of text) but that's an easy fix.

Advicefront onboarding screen3

Screen 3

Things begin to complicate here. Most of clients don't get this, they usually don't read all the text explaining 'this is just an example plan'. They try to interact with the cards right away, trying to change values..."and why 3 goals? why those goals??"

Problems: too much financial jargon... too much text, too many concepts (plan, goals, portfolio), too much...

Advicefront onboarding screen3

Screen 3 again

Another problem with this screen is showing numbers that few understand as being the result of the starting and monthly investments they defined early on. The money appears distributed differently throughout goals (this has a financial reason but we decided to hide it in the past).

Advicefront onboarding screen4

Screen 4

Next, they'll land on the sign-up screen, where they "meet" their financial adviser (they might know the adviser already, depends if we're talking about cold or warm leads).

I believe we have too much info again, specially next to a sign-up form. It might be important to explain things but sometimes the key is to keep it "short beats good" – as John Saito explains on this Intercom blog post.

"Users or readers on the web don’t technically read word for word. (...) Sometimes you orally want to say a lot of things, but if you say too much, they may not read anything."

John Saito, The role of writing in experience design
Advicefront onboarding screen5

Screen 5

Ok, after signing up...

I completely failed this screen. Again "short beats good", users want to progress into the application and they probably won't read all the text and won't remember all the steps.

Advicefront onboarding screen6

Screen 6

Next... yeah, a risk questionnaire (with a lot of questions... the experience was good and fast though). Also worth considering that financial advisers won't start building their clients' plans without the risk profile completed (the FCA requires them to do this too).

Advicefront onboarding screen7

Screen 7

(After risk questions):  Ok, they get the risk tolerance score and then they can start building a draft plan with a better fit.

Advicefront onboarding screen7

Screen 8

They finally enter the application – and they get this!

The thing that most confuses clients at this stage is not seeing nothing related to the main reason they needed advice (remember this? in this example the client has chosen "planning to buy a house") and none of the goals says "house". We show "bucket list", "retirement" and "emergency".

Approach

I believed we had two options:

  • We'd give them an empty state and also explained the basics of building a financial plan;
  • or, we allowed them to choose their goals before they signed up.

I went with the 2nd option, it solved most of the other problems.

The ugly prototypes

I never made it to the high-fidelity UI, but the next screens demonstrate what I believed to be a much clear onboarding for the client. The clients had all the steps they needed to progress and get value out of our application.

Simple changes can make a bigger difference.

Advicefront onboarding new onboarding screen1

Step 1

Main changes:

  • Starting with the Firm welcoming gives a better sense we are building this together right from the start;
  • I've removed the last input where we were asking for the main reason they need advice.
Advicefront onboarding new onboarding screen2

Step 2

A whole new screen. I wanted to focus on the main reason the client needed advice by introducing the goal cards. Clients could choose from several goals or add custom ones.

Advicefront onboarding new onboarding screen3

Step 3

Only at this phase, the client would get our recommendations. The foundations of a good financial plan should always include an Emergency goal and a Retirement goal (if that's not your first priority).

Advicefront onboarding new onboarding screen4

Step 4

Up to the last screen before the sign up, the clients would see the investment projections of their goals. It would be also a good idea to let them change values and play with the outcomes.

Advicefront onboarding new onboarding screen5

Step 5

And finally the sign up screen would show up. The rest of the screens would be similar with minor changes to the copy, and then clients would enter the application and find the exact same plan they've chosen before.

The positives

The clients would have by now a better sense of our application:

  • New concepts like adding goals to make a plan were introduced earlier;
  • Wouldn't feel mislead by finding some random example plan;
  • And, would be able to envision what the adviser could help them achieve.