PiggyBank
Click here to view slide deck:
TL;DR
The Childhood Bank Returning to Help Save Money. PiggyBank is a budgeting and expense tracking app designed to promote and develop healthy financial skills in college students. PiggyBank will guide students towards a stable financial lifestyle and beat the “broke college student” reputation.
The Challenge
Negative perceptions on anything related to finances
In college, students rely on limited income and balance demanding academic schedules.
How might we make financial planning an efficient and easy experience for students who lack the time to track their spendings?
The Solution
Digestible Mobile Data Visualizations
An app for students that utilizes different data visualization types to display their financial progress. Upon setting a monthly budget, users will be able to track their expenses while also being provided guidance through tips and reminders.
Design Process
Why did I even initiate this project?
As a college student who was tired of manually calculating her expenses and didn't know how to manage her limited income, I wanted to design an app that could efficiently visualize my spendings and help me start budgeting.
Target Audience
College students (primary)
Ages 18 to 26 (a period when people traditionally become financially independent)
Discovery Phase
Research Goals
Establishing research objectives guided me in focusing on the user's perspectives during the research process.
Explore college students' perspectives and experiences regarding money management to gain insights into their attitudes and beliefs towards personal finance
Identify the key factors that hinder college students from engaging in financial planning
Investigate the current money management practices used by college students to understand their preferred methods, tools, and strategies
User Research
1. Competitive Analysis
To make design decisions best fit for the target audience, I explored existing budgeting and expense tracking resources to learn how they appealed to the user and potential areas that could enhance user experience.
a. Mint: An all-in-one personalized money management app (free)
Learnings:
Language: Use of financial jargon can confuse users new to money management
Notifications: Customized notifications when over budget, for big transactions, ATM fees, etc.
Automation: expenses can accidentally be placed in incorrect categories
Aggregation: provides overview of financial accounts, including bank accounts, cards, loans, and investments
Influences on my Decision-Making:
Ensure vocabulary can be easily understood
Implement a notification system for user retention
Use an automated system that can be manually edited to account for errors
Apply an aggregated visual system
b. Goodbudget: Envelope budgeting for individuals and households to manage their money (with in-app purchases)
Learnings:
Customizations: ability to customize envelopes to match the budget categories & financial goals
Manual: users have to manually categorize their spendings and are not able to link bank account
Learning Curve: the envelope budgeting system could be confusing for some users
Influences on my Decision-Making:
Add customizable features for personalized experience
Implement automated processes (cards, bank accounts, and categorizations
Exclude using any complex budgeting methods that require outside financial knowledge
Quantitative Surveys
I created a Google form to conduct the user surveys. Using the research goals to define my survey questions, I quantified the frequency and importance of specific user needs and pain points. 20 participants made up of college students completed the survey. The data ultimately helped me prioritize features and design elements to maximize the user experience.
I started off by asking questions that would reveal the emotional connections and experiences students have with money management.
I then transitioned into asking questions regarding participants' perspectives on using resources that help with money management and financial planning.
Research Takeaways
Insight for Goal 1:
Students have negative thoughts and emotions connected to money management.
Many participants felt like their limited financial knowledge hinders them from getting started with financial planning.
Insight for Goal 2:
The unbalanced lifestyle college students face affect if they manage their money.
The top three factors that discouraged students from financial planning were that they were uncertain about where to start, lacked enough free time, and had an irregular flow of income.
Insight for Goal 3:
Constantly checking the bank history and calculating spendings is time-consuming.
The preconceived notion that budgeting is time-consuming since most students manually calculate their spendings leads them to avoid financial planning entirely.
Concluding my research insights, I set my design goals.
Analysis Phase
Affinity Mapping
Organizing my data and pain points helped generate "How might I" questions, resulting in design ideations.
User Personas
Applying the data from my research, I created two user personas that holistically convey the pain points and wants of my target audience.
I ensured my personas had different backgrounds and college experiences to analyze how that would directly affect their outlook on financial planning.
Ideation Phase
Information Architecture & User Flows
Considering both personas, efficiency is key. I created user flows and an IA to identify the amount of steps users would go through and potential bottlenecks.
I started by creating onboarding and app entrance user flows specifically that would lay out how users would first interact with the app. Establishing how users would first use the app, I was able to expand into establishing the overall structure of the app by creating an information architecture. Ultimately, I wanted to ensure that users utilize their mental models using the app and prevent confusion.
Low-Fidelity Wireframes
Purely focusing on the layout of my ideas, I was able to navigate if they would align with user needs and behaviors.
I first made digital sketches to get my ideas down. I wanted clear visual references for the intended layout and functionality. I then made low-fidelity wireframes to refine and clarify my sketches.
Onboarding Flow:
Pages of the app:
Iterations + Testing phase
Iterative Progression Through High-Fidelity Wireframes
Home Page
Visualizing Monthly Spendings
Setting Financial Goals & Reading Reminders and Tips
Design Solutions
Design System
Implementing a design systems helped promote consistency across all of my designs.
Onboarding Process
The first part of the onboarding process uses custom illustrations to introduce users to essential functionalities and leads them to the sign-up process.
Then PiggyBank gets to know the users reasons for using the app and asks for information that'll customize the app such as…
Financial goals for the month
Their budget for the current month
Bank account or card options
Push notifications and security (Face ID or passcode) options
Home Page
Tracking Expenses Based on Category
PiggyBank will send notifications reminding users to track their expenses regularly. The home page focuses on showing spendings split into categories.
If the user hover over an individual color on the chart, it'll display the total amount spent. Users can also view the legend below the chart. For an overall summary of spendings, users can swipe to view another chart of total spendings.
To identify what kind of expenses fall under which category, users can click on the "view more" button above the legend and be brought to a page that lists them.
Edit and View the Budget and Transactions
Based on fluctuations in the total amount of money a user has, it is important that they can edit their budget. Users can click on "Edit" next to the large money amount on the left corner and edit and view their set budget.
Users can view all of their transactions since getting the app, which are automatically loaded from their bank account/card. However, the automated process leaves room for error. Users can edit any transactions that are incorrectly categorized.
Calendar Page
Visualizing Overall Monthly Spendings
Creating a personalized experience is important when retaining users. Providing users with options of different monthly visualizations, users can visualize their spendings in many ways based on their preference.
Having an overall calendar, users are able to go into an individual day in the month to see how much they spent that day and what those expenses were from.
Financial Goals Page
Creating Goals for the Month
To add a more personalized feeling to the app, the Financial Goals page allows users to add, categorize, and edit goals they have for the month. This way users are able to keep track of the goals they're working towards.
Developing Financial Planning Skills
Jumping right into financial planning can be confusing for new users. With financial advice available users can refer any of their questions to this section. To make searching for a specific answer faster, students can quickly type a keyword in the search bar to find a piece of advice.
Settings
Managing Profile and Linked Bank Associations
In settings users can manage their PiggyBank account. Users can find all of these functionalities here, including managing their bank account and cards, profile information, account security, and the type of notifications they receive.
Reflections
Next Steps
If I were to continue developing PiggyBank, I would do the following.
Enhance the Reminders & Tips section by integrating Artificial Intelligence (AI) to auto-generate personalized financial advice
Broaden the user testing demographic to gain insights into potential accessibility barriers
Bring in other people such as developers and more designers to validate the user flows
Add a customizability feature that allows users to change the categorized colors so users can better associate their spendings
Project Takeaways
Convenience
Implemented a range of visualizations that offer users the option to analyze their expenses, reducing the time and stress typically associated with expense tracking.
Inclusivity
Included a financial advice section that explains concepts without using technical jargon and clarifies frequently used financial terms. Included a financial goals section to make expense tracking a personalized experience.
Accessibility
Utilized a carefully curated color palette that adheres to the WGAC color contrast guidelines, ensuring clear readability when paired with text.
I learned the following about designing for the user.
Bring in new perspectives:
Going solo on my first design case study, there were moments where my design decisions could have been benefitted if I brought in fresh perspectives. I learned that being receptive to new ideas and opportunities, and embracing the possibility of making mistakes, is crucial.
Keeping the user at the forefront:
During the design process, I occasionally noticed instances where I gave higher priority to visual aesthetics rather than considering the user's needs. However, during the iteration phase, I identified areas that failed to address users' pain points and lacked accessibility which led me to constantly be thinking about the user when designing.
Emphasis on user research:
All my design decisions were based on the data gathered during user research. I came to realize that researching the target audience is essential for effective user-centered design. For this project, I primarily relied on quantitative data, but I intend to incorporate qualitative research methods to gain a more comprehensive perspective in future projects.
