Helping users stick to their budgets, wherever they are.

1n-app

LearnVest iPhone App

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.

ROLE


UX/UI Designer

INDUSTRY


Finance

1/2015 - 6/2015

NOT JUST ANY BUDGETING APP
Keeping users on track with LearnVest's budgeting philosophy

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
learnvest-goals
THE CURRENT 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 customers about the

“One Number” strategy for budgeting?

 

How do we teach customers about the

“One Number” strategy for budgeting?

DESIGN STUDIO
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 dot-votted to prioritize which ideas to pursue.
group-sketching
sketches
dot-voting
USER RESEARCH
Concept validation and co-designing with users

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
FLOW DIAGRAM

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 information 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 help tell the story

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.

Selected Work

Speech Device SettingsUX Design, Research, Touch Device

Budgeting AppUX Design, UI Design, Research, iOS

Grocery WidgetUX Design, UI Design, Desktop & Mobile Web

Education AppUI Design, iOS, Android

Networking PlatformUI Design, Web

Membership WebsiteUX Design, Web