Overview
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
Timeline
Feb 13 2024 - Mar 13 2024
Feb 13 2024 - Mar 13 2024
Project
Project
Relevant Coursework
Relevant Coursework
Role
Role
UX & UI Designer
UX & UI Designer
Graphic Designer
Graphic Designer
Tool
Tool
Figma
Figma
Photoshop
Photoshop
Illustrator
Illustrator
Skills
Skills
UX Research
UX Research
Visual Design
Visual Design
Wireframe
Wireframe
Prototype
Prototype
Interaction Design
Interaction Design
User Testing
User Testing
Introduction
Introduction
Introducing Cash Nook
Introducing Cash Nook
Cash Nook is 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.
Cash Nook is 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.
Problems
Problems
It’s challenging to find good recipes among the millions available on the internet.
There’s no all-in-one place to answer all your food-related questions.
Food recommendations often come with lengthy comments that are time-consuming to read through.
There is a lack of summarization for food-related content, making it difficult to quickly grasp the content.
It’s challenging to find good recipes among the millions available on the internet.
There’s no all-in-one place to answer all your food-related questions.
Food recommendations often come with lengthy comments that are time-consuming to read through.
There is a lack of summarization for food-related content, making it difficult to quickly grasp the content.
Solution
Solution
Utilize AI to sort recipes and identify the most visited sites.
Create an AI chat model that can answer all your food-related questions.
Summarize online restaurant ratings and comments so users can efficiently skim through the summaries.
Utilize AI to sort recipes and identify the most visited sites.
Create an AI chat model that can answer all your food-related questions.
Summarize online restaurant ratings and comments so users can efficiently skim through the summaries.
Research
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.
Quantitative Research
Quantitative 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.
User personas
User personas
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.
Define
Define
Target Audience
Target Audience
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
Ideation
low-fidelity Mockup
low-fidelity Mockup
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.
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.
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.
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.
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.
Design
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.
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.
Deliver
Deliver
Introducing Cash Nook
Introducing Cash Nook
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.
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.
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.
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.
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!
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.
Photo mode
Photo mode
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.
Reflection
things to improve~
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.
Reflections
Next Project
MyTripster
Your go-to platform for trip planning and finding the best deal, your all-in-one travel solution!