Client Helper: support and educate adviser's clients
Advicefront, Mar 2017 - Apr 2017


Advicefront premise is simple: leverage the whole adviser and paraplanners’ workflow by delivering good tech tools. Automation will be the key to improve productivity, save time and reduce the costs to serve – making each client more profitable.

This also means advisers have to convince their clients to work with them in a digital way: sign up, have a proper onboarding and submit their data through the website.

As it began to evolve, it became more and more complex. We realised online collaboration was about much more than asking questions in a digital interface.

The team

André Costa – Full Stack Developer
André Rebelo – Front-End Developer
Andreia Costa – Designer (me)
Francisco Cordoeiro – Project Manager

The challenge

Our onboarding was a very long process for the client. He had 3 required main tasks to accomplish before getting any financial advice. Adding more features could lead to even more pains. But clients were getting stuck in one of the steps – and we knew that if the clients sign up, but can't get started, nobody benefits.

Advicefront onboarding flow

Client flow from the onboarding until the submission of the financial draft plan to the adviser.

Summing up, these were the main problems:

  • Our onboarding was misleading;
  • The clients tend to request help to accomplish 1 of the 3 main steps;
  • Difficulty in finding the right balance between keeping the clients updated about the progress and steps to complete.
Advicefront onboarding flow

Clients were getting stuck on step 2. Not accomplishing the 3 tasks meant the data wasn't being submitted to the adviser.

Even knowing there were a lot of risks by making our product more complex, we decided to build a feature that would provide assistance to the clients in the context of each task. This also meant analysing our entire flow. Our advisers' feedback was on the same page.

My role

I worked closely with the dev team to gain insights and understand what technical constrains existed. I also engaged with advisers, asking what were the pains of their clients and what improvements they would like to see. I designed the wireframes and low/high fidelity prototypes.


Very few feedback due to having few advisers experimenting with clients. Feedback only from the advisers and not directly from his clients.


The initial idea was making our helper be the digital "bot" of the adviser. The "Adviser bot" would be there to provide support to their clients. We believed mixing support and the "presence" of their adviser would increase comfort for their clients. It turns out advisers believed that representing the "bot" as themselves would mistake clients into thinking this was a chat. Advisers preferred to represent the helper as a product support feature and leave the client-adviser relationship outside the product.

"We’re keen to promote the client-adviser relationship so sometimes we would want the client to come to us. Simple stuff and software issues would ideally be dealt with by the platform, more complicated issues, and financial planning stuff should probably be resolved by the adviser."

Richard, Beta adviser

We then decided to display on our onboarding a set of messages and tips based on each page context. We wanted to help and support adviser’s clients through the 3 main steps until they submitted a plan to their adviser.

These were our high-level goals:

  • Remove the client fear of adding or deleting goals;
  • Reduce adviser intervention;
  • Remember the client he has tasks to do;
  • Educate in context and explain how it’s done.

By understanding the context of each page, we quickly defined the components that would be part of our smart helper.

Advicefront onboarding flow

Components of our the helper guide.

Initial sketches and wireframes

We wanted our helper to provide the right support without becoming overwhelming. The content should be precise and clear. I iterated on different views: lists, tabs... I tried several versions to see what worked best. Ongoing talks with the team and iterative prototyping using Figma was crucial.

Advicefront onboarding flow
Advicefront onboarding flow

High-fidelity prototypes

I'm sure many designers can relate to this: when designing, we tend to include everything and then try to do the exact opposite.

Too much copy, and elements flying around, and illustrations...

I hear you, Dieter! The hardest part is always cutting away the fat while keeping the function. A lot of work went into displaying the right amount of info in a way that wouldn't confuse clients.

Advicefront onboarding flow

Multiple versions of the helper for the "Define your goals" page.

I also put a lot of effort into writing the first content. Makes all the difference in the world designing with "realistic copy" even if it will never make it to production.

The final design resulted in a much more simpler UI. We also continued to listen to our advisers, after all, they know their clients much better than we:

"One thing that might help would be a short video/animation showing how to delete and add goals, amend the amounts and time scales and play around with everything generally. This would obviously take some effort/cost to produce but it would make it clear to the client how it works as they would be able to see it all in action."

Richard, Beta adviser
Advicefront onboarding flownciple

Interactive prototype made with Principle.

My time at Advicefront ended before I could see this project live. The project took a while longer to implement.

I'm confident this made a difference in the client's experience. I also hope the number of calls received by the advisers from frustrated client's had diminished, plus the time to accomplish the 3 steps and submit the data as also decreased.

We didn't have all the answers, and we did the best to design in collaboration. All the work I've done was supported and shared with the rest of the team.