Catesave App

Categorized savings to help young people reach financial goals

Master Studies Banking App 4 Months
Catesave is designed to support young people track their spending and save smarter, making financial management easier and more intuitive.
Challenge icon
Challenge

Young individuals' challenges around managing a tight budget and reaching financial goals.

Goal icon
Goal

Provide a personalized banking feature that adapts to fluctuating monthly budgets.

Discover

On-site Interviews

Executed individual interviews with people near bank branches on-site. As a result, I collected valuable feedback and contributions from participants, which are summarized in four main points as follows:

💰 Limited earnings and income
Low budget, credit score
🏦 Tedious banking options
Confusing account setups
📈 Managing investments
Low financial literacy rate
😩 Overwhelming processes
Confusing saving options
Decision Point 1 / 4
Insights & Problematic Areas
Literature Review

Analyzed recent banking, financial struggles, and facilitate opportunities for enhancement.

Financial literacy icon Financial literacy Facing challenges, particularly as they gain financial independence, is common.
Peer influence icon Peer influence Discussions with friends can influence saving habits and behaviors.
Self-control icon Self-control Poor self-control hinders effective saving and financial management.
Parental guidance icon Parental guidance Parents can act as role models, guiding financial management and habits.
Benchmark

I then focused on monitoring the three most commonly used banking applications in Norway. This allowed me to synthesize their solutions and features, helping me prioritize key decisions during the ideation and prototyping stages to enhance the user experience.

Sparebank Logo App Screenshot 1
Supportive illustrations for every page.
Fewer steps are required to access features.
🛑 Confusing, text-heavy action pages.
DNB Logo App Screenshot 2
Smart use of call-to-action buttons.
More detailed saving features and accounts.
🛑 Inconsistent page layout design causes confusion.
Sbanken Logo App Screenshot 3
Consistent layout design enhance usability.
Personalized labels for different types of savings.
🛑 Fewer saving methods or account options.
Decision Point 2 / 4
Insights & Conclusions

Empathize

Persona

After thoroughly investigating the problem and considering earlier findings, a draft journey map was created to outline the user steps.

Camilla persona
Camilla
"I have tried various ways, but I couldn’t manage to stick to any saving habit. There must be some other option to motivate myself."
😕 Frustrations
  • Confusing methods of saving up on mobile applications.
  • Difficult configurations for any savings account.
🎯 Goals
  • An emergency budget for contingent situations.
  • Saving up for monetary goals such as needs and hobbies.
| Passionate
| Independent
| Goal oriented
User Journey Map

After thoroughly investigating the problem and considering earlier findings, a draft journey map was created to outline the user steps.

pre-use
use
post-use
Desiring stability
Finding options
Trying an option
Losing grasp
Giving up
Searching the ways to reach financial stability
Finding the most suitable one available
Starting the saving journey
Not promising enough to continue saving
Spending the budget rather than saving
+ Financial stability
- Limited budget
+ Various options
- No incentive
+ Fresh journey
- No attachment
+ Planned saving
- Losing interest
+ New possibilities
- Lost potential
😩
😐
😊
😐
😩
Personal
Banking app
Banking app
Personal
Banking app & Personal
Financial literacy, supporting awareness of available means.
Unique and informative options to attract people toward saving.
Feeling a sense of identity, a personalized saving journey.
Transparency with the user, consistent, and viable reasons.
Constantly notifying users about how the journey is progressing.
Decision Point 3 / 4
Potential Areas

Ideate

Wireframing

Dense variety of wireframes sketched out to map essential steps of the potential savings options in an understandable way. This helped me comprehend how a user follow steps and execute the task effortlessly. Below are five organized steps to activate the novel categorized saving feature.

Wireframe 1
A decluttered homepage design that highlights essential user financials at a glance, reflecting the influence of Norwegian cultural values.
Wireframe 2
A dedicated savings or financial management page that provides access to all accounts, one step beyond the homepage.
Wireframe 3
Viewing all spendings including uncategorized ones before setting up a customizable new saving feature.
Wireframe 4
A summary of all customizations and selections for the saving feature to provide a comprehensive overview.
Wireframe 5
The saving feature is set up to display the necessary information about what will happen in the background.
Information Architecture

Information architecture helped me to create a consistent structure for the banking app to effectively position the feature.

🏠 Home
Search
Last searched
Example search
Profile
Help
Accounts
Documents
Inbox
Notifications
Appearance
Log out
Accounts
Savings
Checking Deposit
Catesave
Others
Personalize Organize Categories Suggested Amounts Account Selection Approve Method
💵 Pay
Scan invoice
Recipient (New / Usual)
Details
Amount
Due
Note
Repeat
International
Qr code
Approve (Summary / Send)
Due
Payments
Authorized
Subscriptions
Create new
Notifications
Frequency
Prioritized
🗄️ More
General
Cards
Financing
E-invoices
Payment settings
Customer service
Flow Diagram

Flow maps were made to make and prioritize tasks around the feature, visually structuring its steps in a user-centered approach.

Flow Diagram of Opening an Account

Prototype

High-fidelity mockups

Hi-fi mockups showcase the solution in reaching financial goals. Iterated and user-tested to polish micro-interactions & visuals.

high-fidelity-1
The application homepage is organized to provide users with a clear overview at a glance.
high-fidelity-1-1
The expanded account section not only displays all the user’s accounts but also shows recent spendings at the bottom.
high-fidelity-1-2
By selecting the categorized view, the app displays categories organized by the enterprise or company where the transactions occurred.
high-fidelity-2
In case of a new account, all available options are presented as quick links for easy user access.
high-fidelity-3
In the savings section, the user can view the current state of their total savings and access additional available options.
high-fidelity-4
First, the user selects the account where the savings will be collected and stored in the desired amounts or rates.
high-fidelity-5
The app automatically determines optimal monthly or weekly saving amounts based on spending habits while displaying uncategorized spendings to allow the user to categorize them accordingly.
high-fidelity-6
By previewing uncategorized spendings, the user can decide whether to categorize them or simply reflect on these unconditional expenses to become more aware of their spending habits.
high-fidelity-7
After setting all the saving variables, a summary appears as the final step, allowing the user to review and confirm their choices.
high-fidelity-8
The final page confirms the setup of the savings, marking the start of the journey.
Usability Testing

I conducted a usability test with three participants from the same user group, using the wireframes to assess the effectiveness of the design and the overall user experience.

Positives
  • The organization of the elements feels clean on each page, which helps me understand the steps I need to follow.
  • It is easy to track the different tabs and features on every page, even during the process of creating a new account.
  • Categorizing each spending and turning it into a feature is a great idea. This also makes it easier to track my finances.
🟥 Negatives
  • The details of the icons and visuals on different pages distracted me from what I was planning.
  • The background shadow is quite distracting and gives the tabs and groups a less clean look.
  • While progressing on certain tasks, the changes are quite massive, which gives me a feeling of insecurity.
Style Guide

Catesave’s UI uses a modern, friendly palette with gradients, bold primary actions, and clean, geometric typography. Core elements are built with Plus Jakarta Sans and clear visual hierarchy for financial confidence.

Colors
Preview Token State WCAG AA WCAG AAA
#9E23D2
color.button Brand Identity PASS FAIL
#9E23D2, #D42B2B
color.tab Accent 1 PASS FAIL
#9E23D2, #FFFFFF
color.progress Accent 2 FAIL FAIL
#030303
color.text Neutral Text PASS PASS
#6F6F6F
color.text.secondary Neutral Text Secondary PASS FAIL
#AAAAAA
color.icon Neutral Icon FAIL FAIL
#F6F6F6
color.background Neutral Background FAIL FAIL
Typography
Preview Token Font weight Font size
Headline 1 font.heading.large 600 / Semibold 1.25rem / 20px
Headline 2 font.heading.medium 600 / Semibold 0.875rem / 14px
Body 1 font.body.large 400 / Regular 0.875rem / 14px
Body 2 font.body.medium 400 / Regular 0.75rem / 12px
Body 3 font.body.small 400 / Regular 0.625rem / 10px
Body 4 font.body.xsmall 400 / Regular 0.5rem / 8px
Buttons
Preview Token State / Description
button.primary.default Default
button.primary.selected Selected
button.primary.disabled Disabled
button.primary.loading Loading
button.secondary.default Default
button.secondary.selected Selected
button.secondary.disabled Disabled
button.secondary.loading Loading
button.tertiary.default Default
button.tertiary.selected Selected
button.tertiary.disabled Disabled
button.tertiary.loading Loading
button.variant.warning Warning
button.variant.danger Danger
button.variant.discovery Discovery
Decision Point 4 / 4
Design Decisions

Key Features of

Catesave

Reflection

What did I learn?

This project really showed me what it means to design for real people, especially young users navigating complicated financial lives. I realized you have to go much deeper than surface-level research. Gaining genuine insight only happens by actively listening, understanding everyday frustrations, and questioning my own assumptions throughout the process.

Building prototypes and running tests taught me that features matter only when they solve real problems in real situations. Watching users interact with early versions gave me a better sense of what actually makes a difference—things like clarity, simplicity, and encouraging feedback. I also discovered that a well-designed experience can turn uncertainty into motivation if you make the path clear and supportive.

The process also reminded me how important it is to stay flexible and open to change. Every round of testing opened up new perspectives, often pointing out things I had missed before. Setting up a consistent design system kept everything aligned but still left room for improvements as the product took shape.

Key Takeaways
  • Listening to real users and gathering direct feedback is essential because it always uncovers blind spots, no matter how well you plan.
  • Financial tools for young people need to be adaptive, visual, and easy to personalize. They should not just copy what works for adults.
  • Trust and engagement grow when users feel supported rather than judged as they manage their finances.
  • Design is never finished. Staying open to feedback and ready to iterate always leads to a better result.
Next Step

Looking ahead, I want to bring in stronger guidance and give users even more helpful financial insights. I plan to expand user testing to include a more diverse group, explore new ways to motivate positive saving habits, and make sure Catesave continues to evolve alongside real user needs.