Redesigning a website as a design intern
Advicefront, Jun 2016 - Sep 2016

Overview

I first joined Advicefront in June 2016, as a design intern in Faber-Ventures summer internship. I didn’t know anything about startups and even less about fintech.

Advicefront’s value proposition was not clear to me since day one. The previous website didn’t help and I did struggle to understand the workflow of financial planning between advisers and their clients.

As a design intern, I was asked to redesign the website under Francisca Veloso’s mentorship (Advicefront's designer at the time).

The website was confusing, information exploding everywhere and full of dark-colored images. No one really understood what Advicefront was selling or who was their target audience. Was it robo-advice? Or just financial tools for advisers?

The team

André Costa – Front-End Developer
Andreia Costa – Intern Designer (me)
Eduardo Pereira – Full Stack Developer
Francisca Veloso – Product Designer
Francisco Cordoeiro – Project Manager

The challenge

It’s hard to design a good landing page or redesign a website.

The structure matters, the copy matters, the white space, and typography matters. What about the images and calls-to-action? Are we capturing the potential customer's needs?

This job gets even harder if:

  • you're a junior design intern;
  • you're new to the startup world;
  • your startup is a fintech startup in a context you know nothing about – financial advice services.

To give a little bit of context: Advicefront was a B2B2C online collaborative platform between advisers and their respective clients – which aimed to simplify the whole workflow in such a way that every client becomes profitable – making everyone able to get financial advice.

The platform had two sides: adviser and client side. Despite being connected, each side had its own workflow with different features and tasks to accomplish – which lead to different design solutions.

Advicefront platform diagram

My role

I worked with Francisca to reach a new website structure, new visuals, clear calls-to-action, and better-explained product features.

Limitations

We were still discovering what was the best proposition to fit Advicefront's audience needs.

Approach

Design goals:

  • Clear website proposition about what Advicefront was selling and to whom;
  • Visuals should match a younger, future generation of financial advisers;
  • The value proposition should stand out in the main page through illustrations;
  • Clear separation of the benefits from the product features.

The before

Advicefront onboarding flow

Advicefront's landing page before the redesign.

Critical points:

  • Advicefront was only trying to explain what they do;
  • No clues about who was Advicefront’s audience by scrolling through the website;
  • Coloured sections mixed with stock-photos and a variety of typography styles created a very messy visual journey.
  • Product benefits shown through big numbers in a very commercial way was not a good way to gain the audience’s trust.
  • The information presented lacked a clear and logical structure. The topics jumped all over the page and key points were left out.

Getting started

To avoid the same mistakes, we divided the website into 3 main pages: Intro, Features, and Pricing.

The content was rewritten from zero. The pages were fragmented into small sections focusing on key points and a better storytelling.

The team was all aligned and everyone understood the need for a change.

As if this was not a big of a task, I also had to create an illustration style for this redesign (gasp!)

It wasn't an easy task. I needed the illustration style to be consistent and to leveraged Advicefront's value proposition, which was hard considering the financial advice industry was and still is a very traditional one.

I'll let the images speak for themselves.

As a starting point, I used the existing illustration style of Advicefront's product at the time.

Advicefront onboarding flow

Previous product illustration style.

Experiments evolution

Advicefront illustrations experimentsAdvicefront illustrations experiments 2Advicefront illustrations experiments 3

And the final result

I believe this style suits Advicefront’s brand. Trusting their financial adviser is the number one priority for all clients. So I aimed for collaboration and ongoing conversation between advisers and clients.

Problems with this style:

  • Ambiguous role “who’s the adviser? who’s the client?”
  • The representation of people only by their faces might be limited for representing complex ideas and storytelling.
MORE PROFITS
Turn your smaller accounts into a valuable business line

Focus on high value-added tasks and client relationships and let Advicefront handle the heavy lifting in the background, drastically reducing time spent per client.

MORE CLIENTS
Reach out to new clients at scale

Expand your network to hundreds of thousands of clients and engage digital natives by promoting healthy saving habits and tracking their actions.

THE GREAT WEALTH TRANSFER
Future-proof your business

We are witnessing the biggest wealth transfer in history, with younger clients set to inherit trillions of pounds in the coming years.

Advicefront can help you protect your AUMs and help you become one of the winners to emerge out of this massive market shift.

SECURE & COMPLIANT
Deliver regulated advice securely with a complete audit trail

Advicefront is continually refining its compliance framework to ensure you apply market and regulatory best practices, making the advice
you deliver secure, personalised and searchable at all times.

BUILD STRONG RELATIONSHIPS
Focus on what matters to your clients

Help your clients achieve their innermost goals and dreams, educating and supporting them along the way. Better engaged clients are clients for life.

The redesign outcome

The final website looked more modern and with a clear proposition. There were few colours and more defined blocks of information.

  • The Landing page talks directly to the audience, makes call-to-actions stand-out and focus on the benefits for advisers;
  • On the Features page, we get rid of the typical stock photos and replaced them with product images by listing the main features;
  • The Pricing page is simple and straight to the point (we only have one price packaging).

This version of Advicefront's website is no longer live, but you can see the old website at web.archive.org by clicking here.

Advicefront website redesign

Our next step was to adopt the new illustration/ website style to other areas of Advicefront (branding, marketing, product, etc).

Thank you to all the team for contributing with their feedback and guidance, especially to Francisca.