Behind the Scenes of HelloWallet’s New Savings & Debt Guidance

David Glidden

Here at Morningstar’s Washington, DC office, the HelloWallet team recently released a new feature to help our members manage financial goals in the context of their existing savings and debt. We’ve been working on this feature in one form or another since 2014, and learned a great deal along the way. This post covers the opportunity that prompted this new feature, the approach we took, and ultimately the decisions around the release of this new feature.

The Opportunity

As part of our efforts to democratize access to independent financial guidance, we provide tools to manage and improve your financial health. Since very early on, the HelloWallet application has included financial guidance in some form; primarily this is provided through our Financial Wellness Score, a 0–100 measurement of your financial health. Over time, our suite of guidance features has expanded to cover savings and debt, retirement, spending, and health savings guidance.

Our existing Savings & Debt Guidance feature was designed to be a personalized, step-by-step approach to guide a member through the steps they needed to improve their financial wellness, and to subsequently improve their Financial Wellness Score. This roadmap approach has steps such as Set Aside Monthly Savings, Start Emergency Fund, Conquer Credit Cards (if the member had credit card debt), among others.

Our existing Savings & Debt Guidance feature, prior to June 2016

While we could see in our data that this Savings & Debt Guidance feature was helping some of our members become more financially healthy, we received a large amount of qualitative feedback from members who were frustrated with the linear approach that we had prescribed for them. Many disagreed on the order by which we required they move through the various steps, or simply became discouraged when they were stuck on a particular step. We realized that our Savings & Debt Guidance feature didn’t always reflect the way that our members were actually saving and paying down debt. This key piece of feedback prompted us to start thinking how we could help members still make progress toward their savings and debt goals, while having the autonomy to make their own decisions based on individual risk preferences (i.e. make a purchase that would temporarily put them below the recommended amount of emergency savings).

The other element that we felt was missing from our guidance was the ability to set multiple financial goals and see how they affect each other. We’ve always had a challenge of identifying when a member spends on an item for which they intentionally set aside savings. We currently don’t have a way to tie that expenditure to a particular savings goal, but with our new approach, we’re at least giving the member the insight into how their goals affect our recommended emergency savings levels (more on that below).

The Approach

A quick Google Drive search for “Guidance 2.0” (as we’ve come to refer to our new Savings & Debt Guidance feature), resulted in the first mention in a slide deck from November 2014 (nearly 18 months ago, as of this writing!) This vision slide articulated how Guidance 2.0 would show a holistic evaluation of your financial goals, distinguished by short term, long term, and wishlist goals:

Early vision for “Guidance 2.0”, circa November 2014

In this vision, we see the first reference to the savings chart (in blue) that would become a central component of the final design.

Shortly after, in early 2015, the first wireframes and mockups appear. The savings chart has now become a central component of the design. The distinction between savings goals and debt payment goals also make their appearance at this early stage. The concept of a percentage “protection rating” and minor emergency, major emergency, and job loss savings levels surface, to allow users to see how their spending goals affect their emergency savings needs. The connection to your HelloWallet budget and other accounts shows up in the right-hand sidebar in these early mockups.

Early Guidance 2.0 mockup
First reference to emergency savings levels in an early Guidance 2.0 mockup. Emergency savings levels would continue to be a key element of the final product.
Early Guidance 2.0 user flow

In early 2015, we also kick off our research into emergency savings. This would ultimately result in the Emergency Savings white paper, written by our policy team, and an Emergency Savings Calculator. This research solidified the minor emergency, major emergency, and job loss coverage levels that would play a key role in the final design.

At this stage, we also build out our first internal prototype.

Through the spring and summer of 2015, the design of the feature evolved. This was partly due to team changes; the team had changed substantially due to turnover of existing employees and additional growth spurred by the acquisition of HelloWallet by Morningstar, which had occurred the previous year.

Guidance 2.0 mockup, circa Spring 2015
Guidance 2.0 mockup, circa Summer 2015

It was also around this time that there was a need to come to some consensus of what would be considered the “Minimal Viable Product” (MVP) for Guidance 2.0. We wanted to identify what elements of the feature should be built before releasing it to the public. We did this as a collaborative exercise, “voting” for those elements of the feature that we each felt was necessary to make the feature minimally successful (and having some fun along the way).

Guidance 2.0 MVP exercise in the Washington, DC office

In retrospect, it would have been wise to hold ourselves more accountable to releasing the feature sooner than we did. There is a great amount of functionality packed into this single feature, but regardless, there were probably ways that we could have released and iterated on the design instead of waiting to release as long as we did.

Even though we didn’t release Guidance 2.0 until recently, we’ve been testing the evolution of the design since the summer of 2015. Here’s an early video of a remote user test we conducted with an Invision clickable prototype on UserTesting.com. We’ve asked the user to create a spending goal and gauge whether the design functions in the way she would expect. These are great ways to get quick, rapid feedback on a design.

https://www.usertesting.com/videos/CC6bwA0Uaz8Yoa4Uf5HP7Q/clips/920520?shared=true

Throughout the summer of 2015, we focused on building out the functionality for the graph (a technically challenging development effort), adding a spending goal, and adding a debt paydown goal, including the “in-goal” guidance. We struggled a bit with the in-goal guidance because of the complexities of providing updated recommendations on a goal (whether to change the amount to be able to afford it, push back the date, etc.) given all of the other inputs that could change in the system. We ended up redesigning this element a number of times to get to a point where it was both technically feasible and made for an intuitive user experience.

In-goal guidance, iteration #1
In-goal guidance, iteration #2
In-goal guidance, iteration #3

Around this time, we also started building out a style guide to assist our development efforts.

Style guide sample: colors, typography, icons
Style guide sample: sidebar tiles and iconography

Come Fall 2015, we started thinking through how a user might verify and edit the assumptions we were using to build out the graph. The great thing about Guidance 2.0 is that it relies on all of the account data that you’ve already added to HelloWallet, such as your various savings accounts and debt accounts. However, because these data were so crucial to the Guidance 2.0 experience, we wanted to give users a way to double-check and edit that information as necessary, right within the Guidance 2.0 experience. We started off by creating some sketches and user flows, and ultimately refined those into the final design and final product.

Projection settings sketches
Projection settings user flow
Projection settings wireframe
Projection settings final design

As we entered the new year in 2016, we rounded out the design with the Emergency Savings Calculator and the FTUX (first-time user experience).

Emergency Savings Calculator results page, final design
First-time user experience (FTUX) exploratory designs; bottom right ended up in final product

The Release

As we came closer to being ready to release Guidance 2.0, we tackled a conundrum that we had been avoiding up until this point; how do we introduce a new version of an existing feature that was so conceptually different? Our existing Savings & Debt Guidance roadmap feature, despite the feedback we received by some, was being used by many and producing good results.

We initially thought that we would replace the existing Savings & Debt Guidance roadmap with this new feature. Ideally, we had hoped to run an experiment to determine which feature produced better financial results. After many discussions, we ended up deciding that, at least for now, we would retain the existing Savings & Debt Guidance feature that provided step-by-step guidance, as well as introduce the new Savings & Debt Guidance feature, that provided for more flexibility and personal control over building up savings and paying down debt.

Ultimately, we decided to rename the existing version of Savings & Debt Guidance to “Score Guidance”. Much of the existing HelloWallet experience points members to this feature to aid them in improving their Financial Wellness Score, so this new name fit nicely. We then were able to use “Savings & Debt Guidance” for the new feature.

Location of previous and current Savings & Debt Guidance features

We also decided to eventually sunset the existing Spending Guidance feature, and encourage members to user the new Savings & Debt Guidance feature to add spending goals and see how big purchases could affect their emergency savings.

It’s been a long time coming, but I’m extremely proud of the work that the HelloWallet team here at Morningstar has put into releasing an extremely powerful feature that, from early internal feedback, has already helped some to better plan for large purchases with confidence and pay down debt, one month at a time. Take a look at the introductory blog post over on the HelloWallet Member blog to learn more about our new Savings & Debt Guidance feature, and to try it out yourself.

The new Savings & Debt Guidance feature is the first step of a larger strategy to significantly improve every aspect of the HelloWallet application, in pursuit of our mission to democratize access to independent financial guidance and put employees on the path to financial wellness. I’m extremely excited for what else is going behind the scenes of the HelloWallet product, and I hope you’ll keep in touch through this journey.

David Glidden

Written by

District of Columbia fanboy living in CDMX with @egbarnett. Product Manager at @TheoremCo.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade