HelloWallet’s Financial Guidance
Company: HelloWallet (2010-2015)
Roles: Director of UX, UX Strategy, Data Visualization Designer, Product Management
Introduction
With the main HelloWallet app, you can link the app to your bank accounts, investments, and credit cards, and it would give you a customized guidance path to help you achieve financial goals. Out of all of that functionality, the special sauce was expert, research-backed financial guidance. The focus on this guidance was to drive positive behavior change – whether that was paying down debt, increasing savings, controlling spending, and saving for long term goals like retirement.
I was asked by leadership to break off from the main product lines to conceptualize what a 2.0 version experience of our guidance would look like given the product goals below. Then lead a dedicated team of UX Designers and Engineers once the core ideas were validated.
Product Goals
Focus on life goals, not just financial goals (like getting married, having a child, etc)
Use visual forecasts and interaction to explain how small changes today can have big impacts in the future
Create a modular design & implementation, for long-term iteration
Hit Our KPI's: Increased Monthly Active Users, Increase in Monthly Savings Rate, Increase in Emergency Savings Balance, Increase Retirement Plan Contributions
The Result
The new version of Guidance went through a year long beta testing period, where iterative changes were made to the UI, but the overall designed themes and UX remained. Feedback was positive enough that HelloWallet made the tool generally available to all users in June 2016. I left HelloWallet in 2015, specific results were not available.
Screenshot of final implementation in 2016, after HelloWallet was sold by Morningstar to KeyBank (hence the branding at the top).
Initial Prototyping & Wireframes
I coded a quick prototype using AngularJS, D3, and Bootstrap to test major concepts. Very early wireframes below.
Base UI Layout
Spending Goals in the left rail. Chart shows how savings increases over time with green dots representing the occurance of a spending goal.
Proposed Modular "Card" Design
In this product, users could articular their spending goals and plot them based on when they would occur. This meant that user's could have an unlimited amount of goals that all occur in one month. This hi-fi wireframe shows a proposed UX/UI that would allow for scale.
Just before leaving HelloWallet, we decided to hold off on the "card" paradigm...and ended up using the area below the main visualization as a starting point.
Savings Goal UX
The chart helps users add spending goals and visualize large upcoming purchases. In the column on the right, HelloWallet gauges how prepared the user is for unexpected expenses based on their personalized emergency savings estimate. If a spending goal puts the user’s emergency savings funds at risk, HelloWallet offers suggestions to delay spending, reduce their goal amount, or increase savings contributions to reach their goal on time.
Debt Paydown Goal UX
The tools also let users set goals for debt, guiding them to pay down loans with the highest interest rate first. To help motivate, HelloWallet educates the user on how much interest they will pay in the upcoming years and adjusts the number based on their payoff date.
Summer 2016 Launch
Prompted by requests from users, the Washington, D.C.-based company launched Savings & Debt Guidance to help users achieve their emergency savings, spending, and debt goals.
Miscellaneous Artifacts
Below is a collection of design artifacts that show some of the conceptual mockups along the iterative path.
