Money Tree

Project Overview

My capstone project for the bootcamp I went to demonstrates my research and ideation skills in which I came up with a product that best showcases my innovation and design process. The product I came up with, Money Tree, is intended to make budgeting less stressful by adding the gaming component from simulation games. It is geared towards young adults and those fresh out of college who need to take that independent step towards adulthood.

Problem

Many adults face the reality of financial struggle - from student loans, rent/mortgage, car payments, etc. – and nobody wants life to feel more disorganized and stressful than it should be! Money can be difficult to keep track of and without a way to make it more engaging, people often find themselves struggling to overcome it on their own. For this project, I wanted to turn this around and create a new budgeting application where people can actively take control of their financial goals while staying engaged in a playful manner.

Solution

I wanted to design a solution that would revolutionize the way budgeting applications incentivize people. Users are able to create an avatar upon signing up with Money Tree and earn coins throughout their budgeting journey which can then be used to buy items for their avatar. The gaming aspect is meant to encourage a positive, fun experience while focusing on everything else a budget application provides.

User Survey

I started off my research with a user survey in order to understand what financial struggles, if any, users go through. I wanted to know the extent to which people use budget applications and what kind of debt they may have. Based on my findings, I hoped to gather how I can make my idea beneficial and fitting for people’s needs.

User Survey Highlights

*results based on 25 participants

Competitive Analysis

You may have heard of Mint and Credit Karma - two companies that dominate the budgeting market. Coincidentally, they are the two products that participants from the user survey have had experience with. Here are some features they both have:

Allow users to connect their bank accounts
Track cash flow
Receive personalized insights in order to help users budget efficiently
Receive free credit reports and credit monitoring

Mint's website

Credit Karma's website

However, due to poor information architecture, it takes a bit longer to process information on their website. Mint also requires users to add a bank account upon signing up for an account which can deter a lot of people from moving forward. People often do not feel comfortable putting their private information on a public platform, thus creating a lack of security with the product.

Target Audience

I wanted to target adults and their behaviors. So the survey was mostly filled out by these 3 groups:

Young adults
Students
Independent adults

Using the results from the user survey, I created 2 personas that exemplify our target audience.

Empathy Map

Below is an empathy map based upon the personas.

Journey Map

The journey map below also helps us understand how a user would use said application.

User Stories & User Flows

I wanted this application to be able to achieve different goals. So I came up with 5 user stories that would help me focus on building the MVP.

As a user, I want to make a goal so I can save money
As a user, I want to create a budget plan to start saving money
As a user, I want to see my spending habits so I can visually analyze where my money goes
As a user, I want to link my bank account so I can track my money flow
As a user, I want to create an account and input my financial expenses so I can start a budget plan

Sketches

I started sketching some ideas on paper, focusing on what would make a desktop application easy to use compared to the competitors. However, I remembered from the user survey that many people rely heavily on mobile apps these days, so I sketched wireframes for mobile as well. This would become a large project but good practice for cross-platform designing.

Site map

Since there were so many screens to design and many pathways to consider, I built a site map to guide me as I move forward with digital wireframing.

Wireframes (Desktop)

Branding

"Money Tree" seemed like a perfect name since I wanted to associate the MVP with the idea of growing the money in your pocket. I may not be an expert at logo designing, but a simple flower pot shaped logo with “MT” in the middle seemed easy to remember. The color palette was fairly simple: green is associated with money and gold with coins. Pairing the colors that correlate with money would make it obvious that this is an application related to finance. Similar to Mint and Credit Karma, I kept the font legible. Lato is easy to read when glancing over numbers which is why I went with it.

User Testing

With the hi-fi prototype complete, I was ready to conduct a user test to see how simple and intuitive the application would be for first time users. I conducted this inperson as it would allow me to observe the users’ bodily reactions. I tested half of the users with the desktop prototype and the other half with the mobile prototype in order for me to gain feedback on both platforms. I gave each user 7 tasks that were meant to help me see if navigational errors arise:

Create an account and log out at the end
Create a goal in order to save money for a car
Start a budget for a trip to New York
Add a bank account
You want to check with month you have spent the most money
Where is your profile page located
Where is your avatar located and how many coins do you earn for completing your goals

During testing, I realized the following:

1) People were hesitant to sign up. Several users were not keen with the idea of adding a personal bank account despite it being optional. When this happened, I asked what they wished to see in order to feel more comfortable proceeding with the sign up. The consensus was to see something that provided a layer of security, especially since it is asking for personal information. This could be done by showing a short explanation on-screen before proceeding with sign-up.

2) Budget page was not comprehensible. Another common problem I noticed was when users were asked to make a budget plan. It seemed that users were confused by the presentation of information because they were 1) expecting to see something different, or 2) they did not understand the wording. So I asked what their expectations were and applied the feedback to eliminate confusion in the revised pages.

3) Password confirmation is helpful. When users first sign up for an account, they have to create a password. Users noticed that there was no field to re-enter their password to confirm that the password was entered correctly. This is a typical field found on several sign up pages that was left out, so I made sure to add it to the onboarding screen.

4) Sometimes pictures aren't worth a thousand words. Some users pointed out that they liked the visual representation on the Spending Activity screen but would prefer seeing more numerical data considering this is a finance application where numbers represent data. I noticed that adding data representation in different forms is beneficial to eliminate initial confusion, especially in an application like this. So, in the revised version, I added number values to the pie chart which also helped decrease the time it takes to analyze the screen.

Final Prototype

After hours of reiterating and improving the screens based on feedback I received, here are sample screens of the finalized product.

Desktop:

Mobile:

View desktop prototype View mobile prototype

Conclusion

This was a fun, extensive capstone project that took many weeks to complete and I discovered how to transform fears and struggles into opportunities for solutions. I think there is a lot more that can be done with this project in the future but I thoroughly enjoyed learning how to apply design principles to different platforms of the same product. The long hours may have been tedious but the reward was awesome!

Takeaways from this project

1) Gestalt's Principles are essential to a balanced design

I had to constantly remind myself of Gestalt's Principles when I was organizing how the buttons and text should align with everything else on each screen. Especially since I was designing for two different platforms, the way certain elements show up on one may not always work well for the other. It is easy to forget these principles but they matter a lot when it comes to designing a user-friendly product that makes it easy for users to find things on a screen.

2) Break things down

I think a common issue that designers face is realizing that we know more than the users and so it is essential that everything is broken down to the most simplest elements. That means being as descriptive as possible or not forgetting the goal of the MVP. There were many instances during my work where I had to think about how to phrase terms for someone who does not have my knowledge on the product. I think this comes with practice and is definitely important in my future projects.

Want to work together?