top of page

Money Saving App

PennyWise

Control your personal budget and manage your expenses.

Budgeting App

UX/ UI Case study

Budgrting app

About

Pennywise, an innovative money-saving app, makes people's lives easier by enabling them to effortlessly track and manage their expenses while saving towards their future goals.

Project Overview

Time Line

4 Weeks

My Role

UX /UI Designer

Screens

+ 40

Problem

Solution

Users struggle to track expenses and save effectively, often leading to financial stress and missed goals.

PennyWise provides real-time expense tracking, goal-setting tools, and personalized insights to simplify financial management.

Design Process

Empathize

User Research

Survey | 12 Questions | 23 Participants

Income and Expense Tracking Preference

About 37.5% of users track expenses monthly, 25% track them weekly,

interview result
User Confidence in Budgeting
Graphic depiction
Employment Status Breakdown
Biggest Challenges

More than half of the users state that they are confident in their ability to create and stick to a budget.

43.8 % of users are full time employed, followed by 31.3% students

Tracking expenses, saving money &

budgeting are the biggest challenges.

Nearly 90% of users indicated that charts and graphs help their understanding.

Target Audience

The money budgeting app primarily targets individuals aged 18-45 who have a steady income and seek to effectively manage and secure their budget.

The Little Things UI Design.png

Interview Process

Interviewed users of budgeting apps to understand pain points.  

I asked them several questions :

  1. Where do you record your income and expenses?

  2. How do You currently manage your finances?

  3. If using an app, what challenges did you encounter?

  4. What specific feature or functionality do you wanna see in the app?

interview.jpg

Interview Insights

Customizable expense categories emerged as a key requirement for 4 out of 5 users

01

Integrated goal-setting features were requested by 3 of the  users

03

4 out of 5 users  mentioned that charts and graphs helps them understand their finances

02

Full spending reports by time/category were highly requested by 3 of the users.

04

Competitors

competitor
  • Mint was identified as the best app for tracking, analysis, and insight.

  • All competitors offered expense tracking and categorization.

  • Only two out of the six competitors (Mint and Monarch) provided an overview of financial accounts and bill tracking with reminders.

Define

Affinity Diagram

Affinity diagram

Result

Based on the result of the affinity diagram, the necessary features are:

Simplified reconciliation, automatic expense categorization, all-in-one financial management capabilities, customizable spending limits and budget categories.

Persona

Image by ian dooley

Brian Thomson  |  28

Bio

Brian struggles with overspending and needs a simple way to manage his finances, track expenses, and avoid financial stress.

Goals
  • Stick to a budget

  • Avoid overspending

  • Track bill due dates

Challenges
  • Limited time for manual tracking

  • Difficulty managing multiple accounts

Motivation
  • Saving for future goals

  • Achieving financial stability

  • Understanding spending habits

Preferred Features
  • Automatic expense categorization

  • Multiple accounts integration

  • Customizable budgeting tools

User Journey

User Journey

User Story

20.jpg

1- Brian struggles with budgeting. He decides to find an app to improve his money management.

22.jpg

2- He discovers Pennywise Finance app and downloads it.

23.jpg

3- He creates his account. Then goes through a tutorial to understand the features.

24.jpg

4- He sets up a reasonable budget limits for different categories

Image by Jonas Leupe

4- He sets up a reasonable budget limits for different categories.

26.jpg

6-He need to manage his bills more efficiently, exploring the bill management feature.

27.jpg

7- Brian discovers the goal-setting feature in the app and sets a savings goal.

Image by Steve Ding

8- Over time, Brian becomes more confident in managing his finances. 

Develop

Sitemap

ARCHITECTURE

Task Flow

Task 1: Reviewing Reports

User opens the Penny Wise app and logs in.

User selects the "Reports"

Chooses a specific time to view an overall summary.

User reviews the chart of their financial activities.

Selects months &  see expenses of a specific card.

User see income and expenses of all cards.

Task 2: Checking and Adding Budget

User opens the Penny Wise app and logs in.

User goes to the "Budget" section.

User see overview of all categories selects an expense category.

User checks the current spending against the budget.

User selects edit budget for adding /updating expenses.

User add a new budget for another category. 

Task 3: Checking and Adding Goals

User opens the Penny Wise app and logs in.

User navigates to the "Goals" section.

User views the existing goals and their progress.

User selects the "Add Goal" button.

User enters the details, such as name, target amount, and timeline.


User saves the new goal, and added it to the list.

User Flow

User flow

Sketches

sketch
sketch
sketch
sketch

Wireframe

wireframe
Style Guide

Style Guide

The app interface design started with the creation of UI assets and components for developing the app screens.

4 Test

Final Test Result

Unmoderated usability testing with participants who had prior experience of using a similar app. For more detailed report , click HERE.

Methodology

Unmoderated usability test 

No. Participants

5 participants

No. Tasks

5 Tasks

Software

Google docs, sheets, notes

 

Iteration

Home Page

Homepage

5 Design

Final Prototype

budgeting app

Interactive Mobile Prototype

Navigate through PennyWise mobile prototype

Screen_Recording_2023-07-12_at_3_27_49_PM_AdobeExpress (1).gif
onboarding

Welcome & Onboarding

Sign up and link bank accounts for new users.

Setting Up Account

Sign up and link bank accounts for new users.

login [MConverter.eu].webp
homepage webp.webp

App Homepage

Overview of user expenses based on category

Homepage

Report Page

Report page offers valuable financial insights for informed decision-making and optimized savings strategies.

ezgif-3-f898057be8.webp
report

Budget Page

Pennywise's budget page helps users set and track budgets, providing a clear overview of spending patterns to achieve financial goals.

Budget

Goal Page

Goal page allows users to define and track their financial objectives, by providing a clear roadmap towards achieving their goals.

goal
insights

Insights Page

Insights provides personalized financial analysis and recommendations for informed decision-making and improved financial well-being.

In Summary 
Task

Developing a mobile money-saving app called Penny Wise for effortless expense tracking and management towards financial goals.

Approach

Conducting user research for mobile users, guiding design decisions for a seamless and intuitive experience.

Product 

Penny Wise is a feature-rich app that tracks expenses, offers insights, and generates reports, helping users in achieving their financial objectives.

pennywise
PennyWise money saving app Recap
bottom of page