Helping users stick to their budgets, wherever they are.

1/2015 - 6/2015

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 helped 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 designed a new iPhone app that would not only help users set and track financial goals, but also monitor their weekly spending habits.

MY ROLE
UX/UI Designer (Staff)

INDUSTRY
Finance

NOT JUST ANY BUDGETING APP

Keeping users on track with LearnVest's budgeting philosophy

The primary objective for the digital teams are to create products that support LearnVestโ€™s financial advice; customers receive that advice by purchasing an official LearnVest plan from their financial planner, customized to their personal situation. The advice includes the basics of financial literacy, including LearnVest's "One Number" strategy for budgeting (shown below).

one-number-strategyone-number-strategy

THE CHALLENGE

Explaining "One Number" to New Budgeters

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 amount). Thus, the customer only has to remember their "One Number" as their budget, because funds for all bills, obligations, and goals has already been accounted for. How could we build an app that supports LearnVest's financial plan and teaches our customers about our budgeting methodology?

DESIGN STUDIO

Collaboration leads to consensus

I facilitated a design studio session that included my colleagues from the planning, product, design, and tech departments. I prompted them to sketch their own ideas; then I led a discussion about the possible approaches in tackling the problem.

CONCEPT VALIDATION

Do our concepts help users with their needs?

From there, we distilled the best ideas and I created high level wireframes, which we later showed to users to test our concepts. Our testing began with basic questions about the users' 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-testingconcept-testing
Concept-Screens-01Concept-Screens-01
Concept-Screens-02Concept-Screens-02

DESIGN CONCEPT

A money meter in your pocket

The concept of a meter really resonated with users. Keeping ease of use and an on-the-go lifestyle in mind, I wanted to ensure that the user could quickly glance at the app and understand how much they have left to spend for the week. My design was inspired by the metaphor of a fuel or temperature gauge, and to make the concept even clearer, I added animation.

spent-available-smallspent-available-small

Quick swipe to transactions

Now that users were able to quickly check their budget, I also wanted them to easily see how they spent their money. I designed an interaction that allows users to quickly swipe up to view the week's transactions. In this way, the user is not overwhelmed with all the transaction information at once, but she can easily access it if desired.

Marking items as "Flex"

Initially, the app won't know which of the user's finances is considered "Flex spending" based on LearnVest's "One Number" strategy. Over time, the app would learn the user's rules. But in the early usage of the app, a quick swipe can tell us what's discretionary and what's not.

Final UI Design

Using color to fortify the tone

Blue, yellow, and red were used to indicate the user's flex spending balance. Our team decided not to use the signature "LearnVest green" for on-track spending, as we felt green signified "GO!" as in, "Go spend more money!" Instead, we chose a more neutral, calm blue.