New User Onboarding Flow

Resolve is a free financial management platform created by a team of passionate financial advisors, debt experts & technologists to provide affordable and unbiased help for people in financial distress. 

MY ROLE

Problem

Conversion rates on the debt relief options page were low for a few factors. First, users needed to complete 3 separate forms to see all 3 of their debt relief options. Second, users found it difficult to compare specific aspects of an option with the same aspects of a different option. Lastly, most users were most interested in the cost of each option but had trouble figuring out how much each option cost.

Solution

Require all information needed to display all debt relief options during the initial onboarding flow. Move all option preview cards onto the same page so the user can compare all aspects of each option against each other. Finally, add a cost breakdown to the top of the option preview.

User Flow

Once I have a clear understanding of the problem and I have defined the solution, I start with a rough flow chart. The purpose of this is to get a sense for the scope of the work involved. This is also a great place to start the feedback loop with the rest of the team. 

In this case, we are creating a brand new onboarding experience for new users. My requirements for this flow were to collect all information needed to do a full evaluation across all debt relief options and improve the user interface so it is easier for users to enter their information.

Project Roadmap

The next phase of my process is to put together a roadmap so that stakeholders can track my progress during the project. It is also how I stay organized and focused on the most important tasks.

Wireframe & Design

I typically start with wireframes to quickly layout the page and focus on copy and user interface elements. I find the more variables in play when collecting feedback from the team, the harder it is to collect quality feedback. By doing wireframes I am eliminating one of the more subjective aspects of the design. 

For this project we already had an established visual design language and I am working with a master design file. We use React for our front-end so I have designed a component library that expedites design and implementation. The majority of this project used components that were already built. This essentially eliminated the need for a wireframe phase.

User Testing

I usually run multiple user tests if we have the bandwidth. In this case, I used usertesting.com to quickly test my solutions. There were various aspects of the design I was looking to collect feedback on. Does the narrative carried throughout the onboarding stick with the user? Do the users feel like there is too much being requested from them? How do they react to the debt relief options page?

My initial design for the debt relief options page was a much similar design than the end result. My fear was that we would overwhelm the user with too much information. What I found was that users were already vested at this point. They wanted to dig into the details of their plan and compare them against each other. This information would help them decide if they would proceed any further. 

Handoff

For new designs I hand-off a mockup along with design specs. This facilitates the implementation for the engineer. Once the design is implemented, I personally review the work and provide specific direction in the form of code snippets to refine the final implementation. I like to stay involved all the way through the end of the project to ensure a high-quality end-result.