Building Financial Resilience:
The NewLeaf Way
A revolutionary financial management solution dedicated to assisting individuals in optimizing their spending habits. Unlike other budgeting apps, NewLeaf focuses on integrating seamlessly with users' existing banking institutions, eliminating the need for additional applications.
I served as our UX / UI Designer.
Kick-off
Objectives
The primary objectives for the 3-day hackathon were as follows:
-
Develop a seamless, user-friendly interface for setting and managing budgets within the user's existing banking institution.
-
Ensure that the solution caters to users who prefer to manage their credit and checking accounts within one banking institution.
-
Incorporate educational resources and tips within the app to guide users on effective saving strategies (if there is time.)
Challenges
-
User Design: Creating an intuitive and user-friendly interface within a limited time frame is a significant challenge. Balancing functionality with a seamless user experience required careful design and testing.
-
Limited Time Frame: The tight 3-day schedule imposed constraints on the depth of features that could be implemented and thoroughly tested. This meant that prioritization and time management were critical.
-
Losing teammates: Maintain open and transparent communication with the remaining team members. Ensure they are aware of the changes in the team dynamics and are aligned on the project goals and tasks.
Results
The app's dashboard allows users to set and manage budgets with ease, providing a clear overview of their spending habits and trends over time.
Understanding the Problem
The Harris Poll conducted an online survey and found that ~74% of adult Americans have a monthly budget, and 84% of Americans with a monthly budget exceed that budget! Nerdwallet.com
DAY 1
Breaking Through
Immediately, things became very challenging, very fast. By the morning we learned that all 3 data scientists dropped out, and by noon we lost 3 developers. From 11 members to now 5, we naturally felt overwhelmed and the engineers were feeling the pressure x2 because with no wireframes yet, they felt like sitting ducks. ​
During our first afternoon standup, the UX team had to explain to the developers that in a perfect world, our step 6 is their step 1. It took some time, but we convinced the dev team that we needed another 2 hours to break out into smaller groups to give us time to analyze the data we obtained the night before and come up with a solution and wireframes for them to work on.
Analyzing Our Findings
The team conducted a series of user interviews to gain insights into the pain points and preferences of NewLeaf's target audience. Key takeaways from the interviews:
-
Users tend to consolidate their credit and checking accounts to minimize the need to check multiple locations.
-
There is a desire for a comprehensive solution that assists in budgeting and provides guidance on saving strategies.
-
Users are unaware of saving techniques.
DISCOVERY
To understand user behavior, we conducted user interviews, surveys, and studied spending habits to identify pain points in current financial management practices.
​
I quickly analyzed existing budgeting apps and identified their strengths and weaknesses to establish a unique value proposition.
DAY 2
Crafting an Intuitive Experience
We created a user flow, mapping the journey from onboarding to editing budgets, tracking expenses, and accessing educational resources. From this, I worked on creating lo- and mid-fidelity wireframes to establish the basic functionality of the site. The UI prioritizes ease of use and a seamless user experience.
Prototyping
While our engineers were plugging away at the mid-fidelity, I built an interactive prototype to test navigation, the user flow, and overall usability.
One of the frustrating roadblocks I encountered during prototyping was the scrollability of the edit feature's pop-up overlay window. I decided to shorten the pop-up frame and remove the scroll to satisfy user test purposes because ultimately, for this part of the task, we just wanted users to access and know how to edit their budgets.
DAY 3
The Results Are In!
As a lot of us know, testing five people will catch 85% of usability issues; the remaining 15% will be caught by fifteen people. I was in charge with getting 3 people (my partner with 2) to test in-person.
​
Why? With all of the obstacles we've faced thus far, and it being our last day, we didn't want to run into any technical issues with our testers during setup. We carefully selected users that weren't fellow UXers so that we could obtain genuine results.
Goals
-
Users will be able to set a spending limit for one subcategorized item (Movies) with 100% accuracy in under 60 seconds.
-
Users will be able to identify in which category they are overspending with 100% accuracy.
...5 people will catch 85% of usability issues; the remaining 15% will be caught by 15 people.
Scenario
You are looking at the login to your NewLeaf bank account and wish to utilize their latest feature. Please imagine you want to spend at most $250 on Streaming Services this month.
TASK 1: Please log into your bank account and look around.
Completion rate: 100%
Time: < 10 seconds
​
​
TASK 2: Based on the information you see on the current page, how would you set a spending limit of $250 on streaming services this month?
Completion rate: 100%
Time: > 30 seconds
TASK 3: From the information on the screen, can you determine in what categories you overspent this month?
Completion rate: 100%
Time: < 10 seconds
TASK 4: How would you edit a category’s spending limit?
Completion rate: 100%
Time: < 10 seconds *
A shorter replica of what users did during Task 2.
The most glaring area of confusion of the most time spent (upwards of 2 minutes), was TASK 2. Now, it should be noted that users found the 'Budget Plan' CTA immediately in ~5 seconds. But once inside the initial onboarding, it didn't matter that there was a 'Next' button, or that the header titled "Bills" along with subcategories was an indicator, or that the instructional text said "Let's get started". Our users expected to immediately see an option for streaming services.
One user wondered aloud if they should incorporate streaming services as a part of their utilities? After they all spent nearly 2 full minutes of clicking around, they realized there were other pages and it dawned on them that there was a page dedicated for setting a budget for Entertainment.
For TASK 3, although 100% of our users were able to complete it within the set time, it wasn't before having to click several times before getting the 'Edit' window to pop up.
Final Design
Striving for a polished presentation, we rallied everyone for an all-night effort.
Collaboratively, we shared screens and toiled away. As the development team pushed to align pages with my wireframes, I delved into researching the ideal color palette and my partner worked on gathering the key points for our presentation slides.
​
​
Ok, but why New Leaf, you ask? It all stems from gratitude for two last-minute developers joining the project. Amidst the stress of team members quitting, we found solace in humor and camaraderie. Together, we faced the pressure with grace and enthusiasm, inspiring us to press on.
​
The name "New Leaf" emerged as a nod to the fresh perspective they brought – like turning a new page. This aligns with our goal to assist customers in transforming their financial situations. And, a leaf's connection to paper, which in turn symbolizes money, sealed the deal.
FUN FACT
At this point, hopefully it's self-explanatory why green was selected as the main hue for the bank: both plants and the money of the United States are green. In addition to this, I wanted to also provide a brighter color that often resembles the growth of a new leaf.
​
* The bright green star in the wireframe below indicates the iteration design for the added instructional onboarding page.
PROTOTYPE
TRY OUT THE PROTOTYPE BELOW
If you hover over the frame below, you can select the arrows on the far upper right to test it out in full-screen!
LEARNINGS
What can I do better?
-
Develop a standalone branding scheme for the Budgeting tool
-
Pay better attention when reviewing the wording for User Testing tasks by simultaneously running through the actual test.
-
Learn more about the responsibilities of other positions and how we intertwine cross-functionally.