Helping financial planners record and review a family’s details to prepare for an algorithmically created financial plan

Learnvest header.png


Learnvest + Northwestern Mutual


2015 - 2016


  • Product strategy & design

  • User research

  • Web application


  • Sr. Designer (me)

  • Sr. designer

  • Design researcher

  • PM x2

  • Devs x7

  • QA


How might we improve workflow efficiency for financial planners maintaining a conversation with a client over the phone?

Historically financial planning is seen as something only wealthy people with lots of invests should have. Learnvest’s core value and service was providing affordable financial plans to everyone.




Evaluate my starting point

Before making any changes I need to first understand what was already built, who was using, and how they were using it.

The designer previously responsible for the work had left the company, so my first conversations were with the developers and product manager to get my footing.

The users were financial planners employed by the company. When a customer signed up for the service, they provided some of their own details and then scheduled a phone call with a financial planner.

On this phone call a planner would review the provide information with the customer, and make changes with the goal have as complete of a financial picture as possible. Once they had all the “Facts” straight as well as what the customer’s life and savings goals were, then they could run a “Plan”.

The plan algorithm provided three “Budget Options” for different levels of savings options. The customer would pick one of these budgets by the end of the call.



What principals will govern this Fact Set UI?

There were some very clear opportunities of improvement for the existing system, but before getting too deep into solutions I felt it was important to define some principals for this specific area of the product. These would be something the guide the way and be referred to when discussing with stakeholders, product managers, developers, and other designers.



What pain points did the planners have?

Because these planners with other employees, we were lucky to have consistent conversations with the lead financial planners as subject matter experts and discuss challenges they and their teams were running into.

This situation also allowed us to sit in on calls and watch the planner use the app while maintaining a steady conversation with the customer. Their biggest issues were that

  1. The information they needed was spread across multiple tabs. This organization was based on an “ideal conversation flow” which rarely occurred because conversation are naturally organic.

  2. They had to read information within text inputs. This made finding information extremely cumbersome

Example of the UI when I inherited it in late 2015



How might we make the information easier to review?

In conversation with the product manager and developers, we realized there was already an existing UI that provided a more scannable version of all the information. This UI was currently shown in the customers experience, and we were able to port it over to the planner experience.

This change also gave me an opportunity to refine the IA and get rid of the tabs. Now planners could simply scroll up/down to find the group of data being discussed instead of remembering which tab to click on. To provide more explicit wayfinding on a long scroll, I designed a vertical sub-navigation that highlighted what section of the screen they were currently viewing.

I also adjust the visual styling by removing the super thin weight typefaces, increasing the color contrasts, and adding some stronger highlight colors.



Iterative improvements

The Fact Set UI was broken up into multiple content panels. This allowed us to improve each content group individually. This also provided the flexibility re-organize them as the planners refined how they had conversations as well as add new content, such as insurance.

Starting order

  1. Basics

  2. Income

  3. Budget

  4. Net Worth

  5. Goals

Ending order

  1. Basics

  2. Goals

  3. Net Worth

  4. Insurance

  5. Income

  6. Budget



Refining Net Worth

For the planners, understanding a customers accounts was the most important financial foundation to get correct. If they didn’t know how much they had in assets and how much they had in debts, then the budget options and goal fulfillment would be completely wrong.

In addition to the personalized plans, customers also had access to a personal finance management tool where they could add their bank accounts, credit cards, and various accounts to track their own finances. This gave everybody a starting point, but the planners also needed a way to add other manual accounts as well.

Unfortunately, the client-facing version of this information was superficial and didn’t provide the planners enough details.

My goal was to work with product managers to understand exactly what information the planners were looking for, and design a system that would handle the different data for the different account types.

The tool also needed to help planners quickly identify what information was missing and what might be out of date.

Italicized orange type created emphasis on warnings or missing information that the planner should ask about.

For some accounts understanding current contribution amounts was critical to understand spending and get the algorithm’s match accurate

Primary + Secondary value pairings allowed for greater contextual information but still optimized for scanability. I also strived to keep column alignment — asset contributions and debt monthly costs are aligned to help the planner know how much money is being spent.

Some accounts were cross-linked with other items such as jobs and properties.



Improving the forms

The other side to this coin was creating, updating, and deleting the information which was done through forms displayed with modals.

Modals allowed the planner to maintain their context within the Fact Set and create a perception of speed.

I updated the style, format, and structure of the HTML forms to increase clarity and scanability.

The original input forms – All inputs were side-by-side

Updated forms – Clear groupings and only related data was displayed side-by-side



Merging with Northwestern Mutual

Eventually this tool we knew internally as “Blazewater” was going to be integrated into and used by Northwestern Mutual (NM) financial advisors. On this path, not only did we update each of the different content areas but we also added a new section for insurance (NM sells life insurance) and redesigned the navigation to align with the NM advisor platform (that’s a different case study).

The next steps would have been the planning tools and eventually allowing a planner to explore different scenarios through different “fact sets”.