Redesign Moneyfarm's onboarding

Company

Moneyfarm

Year

2019

Length

2 months

Team

Back to top
handy-favorite

The problem

Analytics was showing us a big drop off in a specific part of account creation. The screen was cluttered with information and input fields, it was hard to prevent error and it was challenging to identify a specific part of the form that was unclear to the end-user.

handy-favorite

My role

I was responsible for the whole redesign of the onboarding: from identifying existing usability issues to proposing solutions and designing the navigation and visual restyle of the mobile components.

handy-favorite

Current state

The account creation flow (called within the company "onboarding") had each main sections cluttered in one long scroll screen, overwhelming the user that, disoriented by such amounts of inputs, would drop out of the flow. Also, it was hard to handle errors and validations that would happen all at the same time on at a press of the button. Finally, the old cluttered screen didn't give us any insights regarding which input field the user had more issues with because everything was happening in one screen.

handy-favorite
handy-favorite

The new navigation

The new navigation presents the user, trough progressive disclosure, one request of information at a time, letting the user focus on multiple simple tasks and one single call to action always visible. A progress bar was introduced to make the user aware and informed of his progression in the flow.

handy-favorite
handy-favorite

Mobile components

The new UI library had to support the new approach of the flow by offering a more simple interface and interaction. If, from one hand the style didn't drastically change, but more rearranged and polished, on the other hands the interactions with the components had to be rethought: auto-focus states, keyboard behaviour and interactions, error messages and validations logic.

handy-favorite

Final UI

At the beginning of each section of the account creation, I designed an intro screen explaining the next steps and setting up the expectation for the user. For each section, I used the mobile components to create a simple progression of inputs fields.

Up next

Handy App