Overview
Cash Nook is a budgeting app designed for college students that helps them monitor their spendings, plan budgets, view financial insights, and earn points to build their dream in-game apartment.
Cash Nook is a budgeting app designed for college students that helps them monitor their spendings, plan budgets, view financial insights, and earn points to build their dream in-game apartment.
Timeline
Feb 13 2024 - Mar 13 2024
Feb 13 2024 - Mar 13 2024
Project Team
Relevant Coursework
Relevant Coursework
Role
UX & UI Designer
UX & UI Designer
Graphic Designer
Graphic Designer
Tool
Figma
Figma
Photoshop
Photoshop
Illustrator
Illustrator
Skills
UX Research
UX Research
Visual Design
Visual Design
Wireframe
Wireframe
Prototype
Prototype
Interaction Design
Interaction Design
User Testing
User Testing
What is this project about?
Introducing
Cash Nook
A budgeting app designed for college students that helps them record bills, plan budgets, view financial insights, and earn points to build their dream in-game apartment.
What is this project about?
Introducing
Cash Nook
A budgeting app designed for college students that helps them record bills, plan budgets, view financial insights, and earn points to build their dream in-game apartment.
Research
Quantitative Research
Quantitative Research
The goal of conducting the survey is to understand college students' financial habits, their familiarity with budgeting apps, and the features they would find most helpful in such apps.
The goal of conducting the survey is to understand college students' financial habits, their familiarity with budgeting apps, and the features they would find most helpful in such apps.
Research
Qualitative Research
Qualitative Research
With in-depth one-on-one interviews with college students aged 19 to 25, I can gain a deeper understanding of their personal financial situations and struggles. This feedback comes directly from our potential users and will help me better identify their pain points.
With in-depth one-on-one interviews with college students aged 19 to 25, I can gain a deeper understanding of their personal financial situations and struggles. This feedback comes directly from our potential users and will help me better identify their pain points.
Problem Statement
Problem
Problem
Don’t have the habit of tracking bills.
Lack motivation to see how much they’ve spent.
Difficulty tracking external payments outside of banking apps.
Sometimes overspend on unnecessary items.
Lack experience with budgeting and prioritizing spending.
Don’t have the habit of tracking bills.
Lack motivation to see how much they’ve spent.
Difficulty tracking external payments outside of banking apps.
Sometimes overspend on unnecessary items.
Lack experience with budgeting and prioritizing spending.
Problem Statement
Solution
Solution
Offer savings tips and help users prioritize spending categories.
Implement a rewarding and engaging achievement system to develop budgeting habits.
Provide various simple graphical ways to overview expenses.
Include categories and visualizations to help users understand their spending.
Develop a simple bill input system to track all types of expenses.
Offer savings tips and help users prioritize spending categories.
Implement a rewarding and engaging achievement system to develop budgeting habits.
Provide various simple graphical ways to overview expenses.
Include categories and visualizations to help users understand their spending.
Develop a simple bill input system to track all types of expenses.
Offer savings tips and help users prioritize spending categories.
Implement a rewarding and engaging achievement system to develop budgeting habits.
Provide various simple graphical ways to overview expenses.
Include categories and visualizations to help users understand their spending.
Develop a simple bill input system to track all types of expenses.
Research
Persona
Persona
After gathering all the information, I created two personas that best represent my interviewees.
After gathering all the information, I created two personas that best represent my interviewees.
Visual Design
Mood board
Mood board
I created a mood board that gives me some good examples of the hierarchy and layout of a financial app. It’s also a great opportunity to explore various styles that suit the theme of my app.
I created a mood board that gives me some good examples of the hierarchy and layout of a financial app. It’s also a great opportunity to explore various styles that suit the theme of my app.
I created a mood board that gives me some good examples of the hierarchy and layout of a financial app. It’s also a great opportunity to explore various styles that suit the theme of my app.
Visual Design
Visual Design
Style Guide
Style Guide
I wanted the app to have a cozy, casual, matcha-vibe, so I chose tea green as the primary color, paired with cute and playful illustrations.
I wanted the app to have a cozy, casual, matcha-vibe, so I chose tea green as the primary color, paired with cute and playful illustrations.
I wanted the app to have a cozy, casual, matcha-vibe, so I chose tea green as the primary color, paired with cute and playful illustrations.
Define
Project Direction
Project Direction
Although the app is designed for college students, their budgeting goals vary within that age group. Therefore, I focused on ages 18-22, who often have little to no experience with saving, making it crucial to help them develop healthy budgeting habits. I’ve listed some of the features I’d like to include in the app.
Although the app is designed for college students, their budgeting goals vary within that age group. Therefore, I focused on ages 18-22, who often have little to no experience with saving, making it crucial to help them develop healthy budgeting habits. I’ve listed some of the features I’d like to include in the app.
Although the app is designed for college students, their budgeting goals vary within that age group. Therefore, I focused on ages 18-22, who often have little to no experience with saving, making it crucial to help them develop healthy budgeting habits. I’ve listed some of the features I’d like to include in the app.
Ideation
low-fidelity Mockup
low-fidelity Mockup
I used the Crazy 8's method to quickly generate ideas. Some of these ideas included featuring a graph on the home screen, and implementing gamification where users can build a city on the home screen by logging in or entering bills, with the ability to upgrade city districts as they earn more points.
I used the Crazy 8's method to quickly generate ideas. Some of these ideas included featuring a graph on the home screen, and implementing gamification where users can build a city on the home screen by logging in or entering bills, with the ability to upgrade city districts as they earn more points.
I used the Crazy 8's method to quickly generate ideas. Some of these ideas included featuring a graph on the home screen, and implementing gamification where users can build a city on the home screen by logging in or entering bills, with the ability to upgrade city districts as they earn more points.
Ideation
mid-fidelity Mockup (Ver.1)
mid-fidelity Mockup (Ver.1)
My initial idea was to feature a city-building game system on the homepage, with icons indicating the categories where users spend the most. The second screen provides an overall graphical insight into their monthly expenses, while the last screen allows users to record bills and select the categories.
My initial idea was to feature a city-building game system on the homepage, with icons indicating the categories where users spend the most. The second screen provides an overall graphical insight into their monthly expenses, while the last screen allows users to record bills and select the categories.
My initial idea was to feature a city-building game system on the homepage, with icons indicating the categories where users spend the most. The second screen provides an overall graphical insight into their monthly expenses, while the last screen allows users to record bills and select the categories.
Ideation
mid-fidelity Mockup (Ver.2)
mid-fidelity Mockup (Ver.2)
The bill recording tab now functions like a cashier machine, with cool interactive and satisfying sound design. The insights tab features more graph options for visualizing data. Additionally, I plan to add a streak system that allows users to keep up a login in streak.
The bill recording tab now functions like a cashier machine, with cool interactive and satisfying sound design. The insights tab features more graph options for visualizing data. Additionally, I plan to add a streak system that allows users to keep up a login in streak.
The bill recording tab now functions like a cashier machine, with cool interactive and satisfying sound design. The insights tab features more graph options for visualizing data. Additionally, I plan to add a streak system that allows users to keep up a login in streak.
Ideation
mid-fidelity Mockup (Ver.3)
mid-fidelity Mockup (Ver.3)
Edit 1: The homepage has been completely redesigned. I abandoned the city builder gamification, now users can earn points and redeem furniture to decorate their own little apartment. The updated homepage is less distracting, and I believe this design change will make the gamification more personal and motivate users to keep checking for new items in the store page.
Edit 2: I added a Personal Financial Advisor tab where users can receive tips to save for their budget. Additionally, I added another tab for viewing the breakdown of each category.
Edit 1: The homepage has been completely redesigned. I abandoned the city builder gamification, now users can earn points and redeem furniture to decorate their own little apartment. The updated homepage is less distracting, and I believe this design change will make the gamification more personal and motivate users to keep checking for new items in the store page.
Edit 2: I added a Personal Financial Advisor tab where users can receive tips to save for their budget. Additionally, I added another tab for viewing the breakdown of each category.
Edit 1: The homepage has been completely redesigned. I abandoned the city builder gamification, now users can earn points and redeem furniture to decorate their own little apartment. The updated homepage is less distracting, and I believe this design change will make the gamification more personal and motivate users to keep checking for new items in the store page.
Edit 2: I added a Personal Financial Advisor tab where users can receive tips to save for their budget. Additionally, I added another tab for viewing the breakdown of each category.
Ideation
mid-fidelity Mockup (Ver.4)
mid-fidelity Mockup (Ver.4)
Edit 1: The Add Bill tab has been fully redesigned, making it much cleaner and less cluttered. The Report tab now features a new filter option, allowing users to view data for a specific period. Additionally, the new Advisor tab will now lets users edit the priority of their categories.
Edit 2: I explored new store features, including a customization tab and item preview options.
Edit 1: The Add Bill tab has been fully redesigned, making it much cleaner and less cluttered. The Report tab now features a new filter option, allowing users to view data for a specific period. Additionally, the new Advisor tab will now lets users edit the priority of their categories.
Edit 2: I explored new store features, including a customization tab and item preview options.
Edit 1: The Add Bill tab has been fully redesigned, making it much cleaner and less cluttered. The Report tab now features a new filter option, allowing users to view data for a specific period. Additionally, the new Advisor tab will now lets users edit the priority of their categories.
Edit 2: I explored new store features, including a customization tab and item preview options.
Final Design
Overview
Overview
Introducing Cash Nook!
Introducing Cash Nook!
Introducing Cash Nook!
Final Design
Final Design
Onboaridng
Onboaridng
In the onboarding process, an infinite carousel will appear, showing users all the features. The sign-in process is simple, with multiple options available, including linking their Google accounts.
In the onboarding process, an infinite carousel will appear, showing users all the features. The sign-in process is simple, with multiple options available, including linking their Google accounts.
In the onboarding process, an infinite carousel will appear, showing users all the features. The sign-in process is simple, with multiple options available, including linking their Google accounts.
Final Design
Final Design
Record your Bill
Record your Bill
By pulling up the slide, users can view today's spending summary. Tapping the New Record button allows them to add all the details and categorize the bill.
By pulling up the slide, users can view today's spending summary. Tapping the New Record button allows them to add all the details and categorize the bill.
By pulling up the slide, users can view today's spending summary. Tapping the New Record button allows them to add all the details and categorize the bill.
Final Design
Final Design
Financial REport
Financial REport
In the report tab, users can see a breakdown of their expenses by category, also they can switch between different graphical views, such as pie charts and bar charts. Both options offer a comprehensive view of their spending.
In the report tab, users can see a breakdown of their expenses by category, also they can switch between different graphical views, such as pie charts and bar charts. Both options offer a comprehensive view of their spending.
In the report tab, users can see a breakdown of their expenses by category, also they can switch between different graphical views, such as pie charts and bar charts. Both options offer a comprehensive view of their spending.
Final Design
Final Design
Timeframe
filter Feature
Timeframe
filter Feature
The top overview tab allows users to select a specific timeframe and displays a summary for that period.
The top overview tab allows users to select a specific timeframe and displays a summary for that period.
The top overview tab allows users to select a specific timeframe and displays a summary for that period.
Final Design
Final Design
Budget Planner
Budget Planner
The Budget Planner feature allows users to set a budget for a specific duration and assign the remaining amount to their desired categories. This helps users understand how much they have left to spend in each category, helping them in better managing their financial priorities.
The Budget Planner feature allows users to set a budget for a specific duration and assign the remaining amount to their desired categories. This helps users understand how much they have left to spend in each category, helping them in better managing their financial priorities.
The Budget Planner feature allows users to set a budget for a specific duration and assign the remaining amount to their desired categories. This helps users understand how much they have left to spend in each category, helping them in better managing their financial priorities.
Final Design
Final Design
Financial Advise
Financial Advise
For those who has no budgeting experience, this feature will be extremely useful. Cash Nook will highlight the largest transaction in each category for the current month compared to the previous one. This helps the users to see if they are meeting their budget goals or if they need to adjust spending on certain unnecessary items.
For those who has no budgeting experience, this feature will be extremely useful. Cash Nook will highlight the largest transaction in each category for the current month compared to the previous one. This helps the users to see if they are meeting their budget goals or if they need to adjust spending on certain unnecessary items.
For those who has no budgeting experience, this feature will be extremely useful. Cash Nook will highlight the largest transaction in each category for the current month compared to the previous one. This helps the users to see if they are meeting their budget goals or if they need to adjust spending on certain unnecessary items.
Final Design
Final Design
Calendar widget
Calendar widget
On the home page, you’ll find a calendar widget that lets you tap to flip between views. One side shows the total expenses for the month, while the other displays the remaining balance you have left to meet your current budgeting goal.
On the home page, you’ll find a calendar widget that lets you tap to flip between views. One side shows the total expenses for the month, while the other displays the remaining balance you have left to meet your current budgeting goal.
On the home page, you’ll find a calendar widget that lets you tap to flip between views. One side shows the total expenses for the month, while the other displays the remaining balance you have left to meet your current budgeting goal.
Final Design
Final Design
gamification - Apartment builder
gamification - Apartment builder
By simply logging in, recording bills, or meeting your budget goals, you can earn points. These points can be redeemed for furniture from the Cash Nook store. The central mysterious space will allow you to design your dream apartment with many customization options. Just let your creativity flow!
By simply logging in, recording bills, or meeting your budget goals, you can earn points. These points can be redeemed for furniture from the Cash Nook store. The central mysterious space will allow you to design your dream apartment with many customization options. Just let your creativity flow!
By simply logging in, recording bills, or meeting your budget goals, you can earn points. These points can be redeemed for furniture from the Cash Nook store. The central mysterious space will allow you to design your dream apartment with many customization options. Just let your creativity flow!
Final Design
Final Design
Built your DREAM APARTMENT
Built your DREAM APARTMENT
The floor and both left and right walls are formed by an 8 x 8 grid, giving users an illustration of a 3D space. All the furniture is just 2D flat clipart that users can move anywhere within the space. This design choice reduces the technological difficulties of developing this feature.
The floor and both left and right walls are formed by an 8 x 8 grid, giving users an illustration of a 3D space. All the furniture is just 2D flat clipart that users can move anywhere within the space. This design choice reduces the technological difficulties of developing this feature.
The floor and both left and right walls are formed by an 8 x 8 grid, giving users an illustration of a 3D space. All the furniture is just 2D flat clipart that users can move anywhere within the space. This design choice reduces the technological difficulties of developing this feature.
Final Design
Final Design
Photo mode
Photo mode
Photo
mode & community hub
Once users are satisfied with their design, they can tap the apartment to enter photo mode. It will zoom in and hide all UI elements, allowing them to take a screenshot and share their design with friends.
Once users are satisfied with their design, they can tap the apartment to enter photo mode. It will zoom in and hide all UI elements, allowing them to take a screenshot and share their design with friends.
Once users are satisfied with their design, they can tap the apartment to enter photo mode. It will zoom in and hide all UI elements, allowing them to take a screenshot and share their design with friends.
Prototype
interactive prototype
interactive prototype
If you'd like to try the prototype yourself, feel free to click the link below to test out Cash Nook.
If you'd like to try the prototype yourself, feel free to click the link below to test out Cash Nook.
Outcomes
Outcomes
Summary
Summary
Due to the short project timeframe, I wasn't able to conduct extensive user testing, but I invited around 10 people to test all the features during development. They agreed that the gamification element helps keep them engaged and motivated to maintain their streak. They also found that the report tab provides all the necessary information without overwhelming them with too much data.
Some aspects users want to improve include: the budgeting planning feature, with more options for setting up multiple budgeting goals. They also want the advice tab to offer life-saving tips, such as where to find cheaper groceries, etc. Additionally, the apartment customization system needs further development, including offering more decoration options and additional ways to earn points.
Due to the short project timeframe, I wasn't able to conduct extensive user testing, but I invited around 10 people to test all the features during development. They agreed that the gamification element helps keep them engaged and motivated to maintain their streak. They also found that the report tab provides all the necessary information without overwhelming them with too much data.
Some aspects users want to improve include: the budgeting planning feature, with more options for setting up multiple budgeting goals. They also want the advice tab to offer life-saving tips, such as where to find cheaper groceries, etc. Additionally, the apartment customization system needs further development, including offering more decoration options and additional ways to earn points.
Due to the short project timeframe, I wasn't able to conduct extensive user testing, but I invited around 10 people to test all the features during development. They agreed that the gamification element helps keep them engaged and motivated to maintain their streak. They also found that the report tab provides all the necessary information without overwhelming them with too much data.
Some aspects users want to improve include: the budgeting planning feature, with more options for setting up multiple budgeting goals. They also want the advice tab to offer life-saving tips, such as where to find cheaper groceries, etc. Additionally, the apartment customization system needs further development, including offering more decoration options and additional ways to earn points.
Thankyou for your time!
Thankyou for your time!
Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.
Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.
Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.