iPhone mockup featuring VACU accounts screen with budget

iPhone mockup of VACU's monthly expense step of setting up the budget

iPhone mockup of VACU's savings goals step of setting up the budget

Virginia Credit Union

feature concept

fintech

Designed to be accessible and practical, the VACU budgeting tool allows users to confidently plan, save, and reach their financial goals all in one place.

Background

Virginia Credit Union is a financial cooperative with over 300,000 members. Being a not-for-profit organization means that VACU is able to focus on the members and their financial well-being by offering affordable rates, low fees, and financial resources among other banking conveniences.

Problem

Virginia Credit Union has resources available for information on budgeting finances, but they lack a built in budgeting feature within the app. As a result, many members rely on external tools for financial management and budgeting, and may even find themselves moving funds to accounts that are more integrated with those tools. This gap in the member experience can lead to a decrease in engagement, and ultimately a decrease in VACU’s assets under management.

Solution

A budgeting feature that empowers users to take control of their finances by implementing an intentional budgeting method tailored to their unique financial situation and goals. By bringing budgeting directly into the app, VACU promotes financial awareness, keeps members engaged, and supports their mission to help members achieve greater financial success.

Timeline

4 weeks

MY ROLE

Research

UX/UI Design

TOOLS

Figma

Maze

Build and maintain a budget seamlessly from your account dashboard, with a clear snapshot of your spending and savings for effortless tracking and better financial awareness.

iPhone mockup featuring specific savings goals input

Set up and customize savings goals to work within your budget, helping you to stay on track and maximize savings.

“I guess I just don’t expect much from it [current VACU app], so I don’t really know what it’s missing. It hasn’t shown me anything that’s exciting, that’s made me want to know more…"

– interview participant

RESEARCH

Getting to know the industry

There are budgeting services out there, so why would a credit union need its own?   

I began by auditing existing financial tools including ones that are native to their financial institutions, a third-party service, and just to broaden the analysis, The Bank of Nook from Animal Crossing. It came as no surprise that the tools with paid options (PNC Virtual Wallet and YNAB) came out on top for actually helping users build and stick to a budget.

With a better understanding of existing products, I wanted to hear directly from target users. I spoke with five individuals across a range of occupations and lifestyles. I was fully aware that I was working under the assumptions that occupation and lifestyle influence how and why people budget, that users need or even want help managing their finances, and that they’d be comfortable discussing their habits.

Uncovering the behaviors behind budgeting

“It’s not a topic that I feel is a strong suit of mine. It’s making and sticking to the budget that’s hard, but I enjoy it when I do it.”

– interview participant

Through grouping and regrouping insights from interviews, I identified overarching themes and patterns.

BUDGETING IS PERSONAL

Everyone has their own system. Meticulous or sporadic, they’ve found what gets the bills paid and works for their lifestyle.

BUDGETING IS UNPREDICTABLE

It’s hard to stick with a budget, especially when unexpected expenses arise. Without a solid system in place, the budget easily becomes out of sight, out of mind.

BUDGETING FOR PEACE OF MIND

Time and convenience are huge factors. People want a seamless, automated experience that helps them feel financially secure and minimize stress.

Strategy

To each their own budget…

I created two personas with different budgeting styles.

Choosing features that lay a foundation

I started jotting down ideas that could provide an approachable, low-stress budgeting experience.

PERSONALIZED BUDGET

Accommodating individual lifestyles and goals

EXPENSE INPUT

Creating a sense of accountability

SAVINGS GOALS

Helping to better prioritize and feel confident about saving

VISUAL REPRESENTATION

Making progress visible to reinforce motivation

I took this time to further familiarize myself with the flow of the VACU app and mapped out the user flow for creating a budget.

USER FLOW FOR creating a budget

DESIGN

Piecing it together

I sketched low-fidelity wireframes of key screens following the app's existing design patterns.

For the mid-fidelity wireframes, I stayed pretty close to the app’s current design and flow. The problem was that for certain features a browser would open within the app, which felt disconnected from the design as a whole.

Looking for an outside perspective, I brought my designs to a group critique for feedback. The general consensus was that it did feel disconnected, and to make the design more app-like even if it meant deviating from the current design of the app.

I visited the VACU website, which had a much cleaner and updated look compared to the app. I pulled elements from the website to update the look and feel of the app, as well as create consistency across devices.

ORIGINAL MID-FI’S BASED ON EXISTING APP

updated mid-fi's based on FEEDBACK AND THE vacu website

view mid-fi wireframes

TESTING + ITERATION

Is this thing on?

I met with the individuals from user interviews via Zoom and presented the following scenario:

"Create a budget with a linked account and two savings goals."

The task was completed, but not seamlessly. 40% of participants overlooked the CTA and spent time searching for where to start, leading to increased time-on-task. To address this issue, I came up with variations of the CTA to make it more prominent.

Priority revisions and A/B testing

For the second round of testing, I conducted an A/B test with the new designs. Two prototypes were tested, each with a version of the CTA. Participants were asked to access Virginia Credit Union’s new budget feature, then presented with a side-by-side comparison of both versions and asked which they preferred and why.

80% of participants preferred Version A.

original

CTA OVERLOOKED IN FIRST ROUND OF TESTING

Version A

CTA with direct language

version b

CTA with photo

“While I’d normally say a picture would make something more appealing or engaging, I usually associate it with an advertisement and would overlook it. I like the simplicity of version A and the purposeful statement of ‘start a budget’.”

– interview participant

Implementing VACU's brand for a seamless fit

I found VACU’s design system online, and pulled the typography and color palette. I recreated existing components used in the app, and created custom components to ensure the new budgeting feature was a seamless fit.

final design

VACU, meet your new budgeting feature.

ACCOUNT HOME WITHOUT BUDGET

ACCOUNT HOME WITH BUDGET

"START A NEW BUDGET" SCREENS

view hi-fi wireframes

Reflection

Working within an existing design system was a fun change of pace. Considering existing elements, recreating them and creating new ones to match was a test of my attention to detail.   

I had a lot of ideas for this feature, but I had to think realistically and prioritize them for the scope of this project. For example, I wanted to incorporate a calendar to keep track of financial tasks with notifications, but with the time constraints, I had to focus on the key aspects of my design and stay focused on the problem I was trying to solve. In the end, I settled on a feature that can be expanded upon over time.