Helping users stick to their budgets, wherever they are.

1n-app

LearnVest Mobile App

My role

Product Designer

Project timeline

1/2015 - 6/2015

Applied methods

User Research & Synthesis, Concept Testing, Partcipatory Design, Design Sprint, Facilitation, Interaction Design, Wireframes, Prototyping, UI Design

The project

LearnVest offers financial planning for everyday people with a staff of certified financial advisors. Although the core of LearnVest's financial advice is budgeting, the company's tool that helps users keep track of their spending was outdated, and didn't meet the needs of how users actually tracked their spending while "on the go." I worked on a concept design for a new iPhone app that better fit LearnVest’s budgeting strategy to help users monitor their weekly spending.

Not your typical budgeting app

Keeping users on track with LearnVest's budgeting method called the "One Number" strategy

The primary objective for the digital teams was to create products that support LearnVest’s financial advice. Customers receive that advice by purchasing an official LearnVest plan with a financial planner; that plan is tailored to the customer’s specific financial situation. The plan includes the basics of financial literacy, including LearnVest's "One Number" strategy for budgeting.

The "One Number" strategy is a formula to help the customer determine what they're allowed to spend each week, on whatever they want (their flexible spending or “flex spend” amount). Thus, the customer only has to remember that "One Number" as their budget, because funds for all bills, obligations, and goals has already been accounted for (shown below).

piggybank
one-number-strategy-graphic
The goals

 Educate users on the One Number strategy

Once users have met with their financial advisor and received their financial plan, they can then download the One Number app. While the financial advisor goes over the One Number budgeting strategy, we wanted to be sure that the app continued to remind users how to budget and categorize their spending in order to meet their goals.

Help users stick to their One Number

Once users got the hang of the One Number strategy, the app would serve as helpful tool to keep users on track with their weekly budget and show users where there spending levels were at during the week.

 Update the look and feel of the app with LearnVest's new branding

LearnVest was undergoing a branding refresh, and the app would be one of the first tools to show it off. We also wanted to be ready for the app to debut with the new version of iOS.

The outdated design

Unfocused and unaligned with the new strategy

The current app was outdated in its visual and UI design, and it didn’t really help users track their “One Number.” It also had a lot of different features—being able to view net worth, assets, debts, goal progress, and aggregated accounts—but it didn’t focus on weekly spending and tracking the “One Number.”

learnvest-iphone

The current app

The Challenge

 

How do we teach users about the

“One Number” strategy for budgeting?

 

How do we teach customers about the

“One Number” strategy for budgeting?

Design sprint with the team

Gathering ideas and finding focus

I facilitated a design studio session that included my colleagues from the financial planning, product, and tech teams. I prompted them to sketch their own ideas; I then led a discussion about the possible approaches in tackling the problem. We then dot-votted to prioritize which ideas to pursue.
group-sketching
sketches
dot-voting

Talking to users

Concept validation and co-designing

Based on the ideas with the most votes, I created high-level wireframes, which we showed to users. Our testing began with basic questions about their finances, how they feel about money, and how they currently budget. We then had them draw their own ideas for a budgeting app.

Finally, we showed them our concepts. The user feedback helped to validate and improve our designs. Since the team felt we were going in the right direction, I moved forward in the design process.

concept-testing
Concept Screens
02_Left to Spend – This Week
07_Your Value Spending
01_Left to Spend – Today
05_Leftover Money
04_Transactions – Bar
03_Transactions – List

A shared understanding of scope

To fully understand what screens and functionality was needed, I created a flow diagram to make sure my product and engineering partners were on the same page.

1nappmap

Onboarding concept

Breaking up info gathering

While the end results of having One Number to budget with is simple, inputting the information needed to calculate it is a lot of work for the end user. Here is a concept for a multi-step onboarding flow. The goal is to educate the user as they enter their information.

01-Whatis1N
02-Intro
03-Takehome-pay
04-Home
05-Bills
06-Goals

Early interaction prototypes

Interactions to help the user navigate the numbers

The concept of a meter really resonated with users. Keeping ease of use and an on-the-go lifestyle in mind, I wanted users to be able to quickly tap between what they have available and what they’ve spent (left).  Initially, the app won't know which of the user's finances is considered "flex spending" based on LearnVest's "One Number" strategy. The app would learn over time, but in the early usage of the app, a quick swipe by the user can tell us what's discretionary and what's not (right).

swipe-up-sketch
spent-available-small
swipe-transition
mark-flex

UI Concepts

Making finances more friendly

I created a mini style guide as an exploration of how we could make the branding of the app feel friendly and fun, then tried it on a few screens.

1n-style
1n-main
1n-transactions-list
1n-saved

Project learnings

 

✍️ Participatory design yielded valuable insights

The participatory design exercise allows users to better articulate their ideal app. As a result, we got more insights than we would have had we only done interview questions and surveys.

🔁 Continual testing of concepts would help us focus

If given more time, I would have continued to test more concepts after the initial participatory design sessions to validate the direction we chose.

🌱 Take a phased approach to features

The team initially approached the design very ambitiously with the intention of grounding the scope of work into what was actually feasible. I would’ve suggested chunking out the features into a phased approach and tying it to a realistic and manageable timeline.

About         LinkedIn       Resume         

2020 WTF. 😷           

About         LinkedIn       Resume

2020 WTF. 😷