The Problem and Overall Goals

Everyone is not at the same financial literacy level. The project stemmed from my personal struggles growing up as a person of color in an environment where family members and close friends in my community knew little about financial. I adopted bad money managing habits that later in college negatively affected me. I purposed the concept of a financial management system to help increase financial health in users to three of my colleagues. We agreed to create an application designed to assist users with their financial goals by leveraging human factors knowledge about finances and money, incorporating emerging technologies and specific e-learning resources geared towards financial literacy.

Our Project Goals

So now we had our problem and how we wanted to benefit our users. We established project goals to help keep us stay focus. by establishing them, they helped us to determine what features we would need to prioritize if we were going to develop this application. Our project goals were:

  • 1. Have the user feel that the system is secure, credible, and visually appealing.
  • 2. Identify which features will help users accomplish their goals (short-long term) and determine whether they were successful or unsuccessful.
  • 3. Determine 2-3 effective strategies for improving the user’s financial behaviors.

Our Process

We began the development of our system by doing a competitive analysis of existing financial digital-based applications. Then performed a literature review to learn more about psychological and human factors strategies that impact financial behaviors. Conducted an internal open card sort to help build the framework for our system’s navigation. Next, we performed a Treejack test with 13 participants recruited through our personal networks. This test helped refine and strengthen our navigation and understand successful optimal paths for specific tasks related to managing personal finances. Using our research and navigational testing, we created prototypes and performed a usability test on our first low-fidelity prototype with eight participants. We then created an updated, high-fidelity prototype with feedback from participants and conducted a second round of usability testing with eight new participants. Finally, we conducted a SUPR-Q evaluation on our second prototype. 11 participants completed this evaluation, which helped us understand both quantitatively and qualitatively if our participants perceived our system as secure, credible, and trustworthy.

And The Results

Competitive Analysis

In order to determine key features for MoneyJar, a competitive analysis was conducted on the following banking related products:

  • Truebills (App)
  • Microsoft Excelt (Software)
  • Mint (App)
  • Credit Karma (App)
  • Chase (App)
  • Trim (App)
  • SubscriptMe (App)
  • Bobby (App)
  • Qapital (App)
  • Empower (App)

The results of the competitive analysis indicated that there were opportunities to test and drive value in areas of goal setting, personal finance, and bank level security within a third party application.

Literature Review

A literature review was conducted to reinforce the scope of the application. A total of five articles were analyzed. Each article were studies forcing on spending that involved: impulsive overspending, compulsive buying related to anxiety and obsessive behavior, mobile payment technology, retirement saving, financial literacy, and long- and short-term financial behavior.

It was decided that MoneyJar was not going to be a good fit for individuals suffering from compulsive overspending, which can be tied very strongly to mental health and may require intervention from a licensed professional.

Interviews with Questionnaires

A total of eight participants were interviewed and afterwards were given a questionnaire to understand the underlying attitudes that participants have towards their personal finances.

The results from our interviews and questionnaires revealed various types of insights such as: behaviors and attitudes towards personal finance, wants in a financial tool, and pain points with tools currently used or used in the past.

Card Sort

The manual processing and analysis of the card sort produced the following navigation structure (Figure 1), which we included in the Treejack tests. The main navigational categories included Bills, Budgets, Help and Accounts. The submenu items were organized by the team to fit into appropriate categories. The submenu items represent the cards that appeared with some level of frequency across each of individual team member’s card sort. Frequently occurring submenu items were then resolved as standard cards. Then the team voted on any unique cards that were not standard but would still apply to key tasks in the navigation.

After determining what the standard cards were, the team grouped the cards and then paired them with a category that was already determined or due to frequency of occurrence. Alternatively, groupings of cards would drive the creation of a re-conceptualized category that the team agreed would best fit the activities represented in the submenu.

Treejack Test

Treejack testing results indicated that participants’ mental models had some alignment with the team’s own mental models as displayed in the initial navigation scheme. 13 participants completed the Treejack test; completion times ranged between 00:01:07 and 00:46:50 at maximum (46 minutes was an outlier; most completion times fell under 10 minutes).

Overall, participants experienced successful completion over 85% percent of the time for task 2 (“Where would you go to seek counseling on personal finance?”), 3 (“Where would you go to view your latest transactions?”), and 5 (“Where would you go to give yourself a weekly allowance on restaurant spending?”).

Based on the results from our Treejack test, we edited our initial navigation scheme to what is shown below in Figure 4:

Usability Testing Round 1

After the post-task question, we then wrapped up the interviews by asking all ​participant​s the same questions about the system and the tasks overall. We asked ​participant​s how easy was it to use the application on a scale of 1 to 5 (1-very easy, 5-very difficult), which averaged to 1.6. We asked, overall, how ​participants​ would rate their experience while using the application on a 1 to 5 scale (1-Dissatisfactory, 5-Satisfactory), which averaged to 3.9. We then asked how likely ​participants were​ to use this application in their life on a 1 to 5 scale (1-Very Unlikely, 5-Very Likely) and that average to 3.3.

Lastly, we asked ​participants​ to tell us what they found problematic about the application and what they enjoyed about it.

According to our data, the most enjoyed aspects of the application was the minimalist interface (did not overload ​participant​s), being able to see account information, and setting budgets and goals. The most problematic aspects of our application were buttons location, lacked “hand holding” prompts (i.e tooltips), and some of the language used. Participants​ also commented on the fact the prototype was in fact a prototype and had a hard time connecting with it as an actual application. In relation, one ​participant​ said, "Again, it's the prototype, can't see logos and colors, it's hard to imagine it".

Usability Testing Round 2

For the overall results of this test, we found some improvements of the ratings for the follow up questions compared to the first round of testing. For the overall ease-of-use rating, the average rating was improved from 1.64 to 1.25 on a 1 to 5 scale (1-very easy, 5-very hard). For the overall experience, the average rating improved from 3.93 to 4.75 on a 1 to 5 scale (1-dissatisfactory, 5-satisfactory). Finally, when asked if ​participant​s would use this application in their lives, the rating improved from 3.29 to 4.625 on a 1 to 5 scale (1-very unlikely, 5-very likely).

SUPR-Q Evaluation

Our system was mostly successful in terms of the ratings it received across each of the SUPR-Q questions, which are ranked from 1 (strongly agree) to 7 (strongly disagree).

    Most ​participant​s agreed that our system was:
  • - Easy to use (mean rating:​ 1.91​ - strongly agree/agree)
  • - Easy to navigate (mean rating: ​1.55​ - strongly agree/agree)
  • - Safe to store bank information (mean rating: ​2.36 ​- agree)
  • - Credible in its display of information (mean rating: ​2.45 ​- agree)
  • - Trustworthy in its display of information (mean rating: ​2.36​ - agree)
  • - An application they would recommend to friends/colleagues (mean rating: 2.36 ​- agree)
  • - An attractive application (mean rating: ​2.73​; agree/somewhat agree)
  • - An application with clean and simple appearance (mean rating: ​2.09​; agree)

Participant​s responded well to updated information architecture framework and labeling, which resonated with their mental models. They enjoyed the ease of task completion and liked the design layout due to the flow logic, which ​participant​s expressed an appreciation for.

The Solutions - UI Patterns

Below are a few UI patterns I'd like to show you based on usability testing and my learnings.

The Sign Up Process

In order to determine the users financial needs/health, there needs to be an assessment. The "Sign Up Process" was designed to assess the user while also rewarding the user by adding coins to the "jar" with each question answered. A row of circles services as an indication of how many questions are left to answer and the shade circle indicates their progress. Users can move between questions using the arrows to edit answers. Users are also not forced to complete the assessment, they can skip at anytime.

The Dashboard

The most useful feature that participants (75%) identified was a personalized dashboard within a financial management system. Additionally, 63% of participants found future financial planning and goal setting useful. To personalize the dashboard quick tips were included. The tips are generated depending on the results from the assessment user take during the sign up process. The quick tips also services as an instant resource for users. Also included on the dashboard is a quick overall for recent transactions, budgets, and goals.

The Accounts Page

100% of participants found spending management to be an important aspect of financial management. 88% of participants identified savings as an important aspect. The accounts page displays another overview of recent transaction and pie graph of purchases per account. The accounts are organized by the type of financial account a person can have. This page is also customizable so users can edit (remove or add) the type of accounts they have.


To assure users that MoneyJar is safe to use a few features and design tactics were implemented. When adding a bank account, users are first prompted with a pop-up that explains the type of bank security the application uses and how it is secure and private. The user is given the option to proceed or cancel. If the user proceeds, they are shown the "Add New Bank" page. On this page a FDIC (Federal Deposit Insurance Corporation) logo is displayed to ensure the user their money is insured in the event of bank failures. Users have the option to either manually input their banking information or can choose to link through a bank application they currently use.

Long and Short Term Goals

63% of participants believed that budgeting and long-term goals were also an important aspect of financial management. To keep users mindful of these goals the "Planning" page was created. The planning pages offers two ways to achieve long and short term goals. The budget option is for setting short term goals by establishing a budget to better manage money. The goals option is for long term goals that require saving money.

Financial Awareness

Much like the "Quick Tips" section on the dashboard, when a user is over their budget a personalized prompt appears stating the issue and also providing a link to an article that can be found on the "Help" page. When a goal is close to it's due date, the notification changes from a full date display to a 10 day countdown when relevant.