top of page

RETURN TO GRAPHIC DESIGN

Fudget App Research, Analysis and Redesign

This collaborative piece looked to analyze the budgeting app, Fudget, and a redesign of the interface, including new features like accessibility changes and currency exchanges.

Overview

Roles

Madison - Flow, UI Design (Collaborated)
Irene - Personas, UI Design (Collaborated)
Elisabeth - Flow and Persona Review, UI Design (Collaborated)

Background Knowledge

What is Fudget?

Fudget is an app for personal finance, which we looked at through the lens of underclassmen at American University. The app seeks to help users budget in a fast and accessible way. 

  • Basic Version = Simple list of income and expenses, one tap adding and editing

  • Pro Version = Dropbox compatibility with saving and restoring, change themes, calculator, export options, ad removal

Overview of American University

American University is located in Washington, DC. It is in the Tenleytown/Spring Valley Area which is approximately 1 mile from the Maryland border.

  • 8,123 Undergraduate Students

  • 61% of students will study abroad at some point

  • 39% of students are international

  • #7 ranked for Study Abroad in United States Colleges and Universities​

  • #10 ranked for School of International Service

UX/UI Process

Research

  • User Interviews

  • Reviewing Fudget and Competitors

Empathize

  • User Personas

  • Pain Points

Create

  • Flow Map

  • Design for Personas

  • Update and Implement Features

Evaluate

  • User Tests

  • Redesigning

User Interviews

We conducted multiple interviews with underclassmen at American University. 

  • 100% did not like the orange color - found it to be annoying

  • 67% had little to no budgeting experience

  • 67% enjoyed the simplicity of Fudget

  • 33% found the idea of budgeting to be overwhelming

  • 33% found some of the current language on Fudget to be confusing

Personas

Capture.PNG

Emily Lopez

Year: Freshman

Capture4 - Copy.PNG

Reanna Wade

Year: Sophomore​

Capture2.PNG

Danyal Mullins

Year: Sophomore​

Big spender that has never budgeted before

Has budgeted before with Google sheets and her roommates.

Used to budget on Good Budget when his bank account looks low.

From Argentina and her parents income is in Argentine Pesos.

From California and is now studying abroad in Germany.

From Idaho and is adjusting to the D.C. cost of living.

Wants to calculate how much money she is spending in her home country's currency.

Wants an easy way to budget abroad and keep track of how much she is spending.

Wants an easy way to budget that is also accessible to his colorblindness (deuteranopia).

Cannot budget in US dollars.

Cannot budget in US dollars.

Cannot budget comfortably.

Similarities and Differences Amongst Personas

  • Reanna and Emily both need the currency exchange feature as they are both abroad; Danyal does not.

  • Danyal and Reanna both have budgeting experience; Emily does not.

  • Danyal requires the app be accessible to his Deuteranopia; Emily and Reanna have no accessibility issues.

  • All require an app that is easily learned and fits a students' needs.

Analysis of Competition

Fudget (Overview)

  • Simple + Intuitive

  • Customizable Categories

  • Good Affordance

  • Brief Onboarding Experience

Good Budget

  • Automatically adds leftover money to savings

  • Free data and income vs. spending reports

  • Reminds you to keep on track of your budget

Mint

  • Able to sync other accounts on the free version

  • Displays credit score

  • Auto-logs your income and expenses

  • Can add credit + debit cards

  • Tracks your investments, properties, cash, etc.

Easy to Use
Accessible
Intuitive

Easy to Use
Accessible
Intuitive

Easy to Use
Accessible
Intuitive

CaptureScreen.PNG
small_apple_iphone_13_pro_max_2021_1b54b42564.png
CaptureScreen2.PNG
small_apple_iphone_13_pro_max_2021_1b54b42564.png
CaptureScreen3 - Copy.PNG
small_apple_iphone_13_pro_max_2021_1b54b42564.png

Current Problematic Features

  1. Fudget's interface feels rudimentary

  2. Requires personal effort to self-catalog every expense

  3. Difficult to move specific payments to different budgets

    • Ex. If you accidentally type something in the wrong category, you need to delete and retype it

  4. The bright color is unappealing to all interviewed

  5. Red and green color makes income and expenses hard to read

  6. Currency conversions are non-existent

Hypothesis

Currency Exchange

With the currency exchange changing daily, it should be reflected in the feature for those students...​

  • Whose families' incomes are in different currencies.

  • Studying in a country with a different currency.

CaptureColor.PNG

Color Blindness

Currently, the orange turns to green for those with deuteranopia. This can get confusing with the connotation of green as positive and red as negative. Switching to something with more clear symbols may help the consumer.

Solution Plan and Process

CapturePic.PNG

Our Question

Solution

Process

How can we improve Fudget for the American University student audience?

  1. Created the flow chart

  2. Testing

  3. Correction of Findings

  4. Re-design of UI​

Redesign the UI for accessibility, and correct the currency data to hold an accurate currency exchange.

Site Map

CaptureFLow.PNG
CaptureFlow2.PNG

UX Analysis

#1 Redesigning the "Add Budget" Button

Fudget

  • "Add New Budget" button disappears once you add multiple items

 

Redesign

  • "Add New Budget" button is locked on the bottom​

  • Budgets are still scrollable

Why out Personas Care​

  • As they are using this app over time, if they can't find the budget button when it was previously there, it can lead to difficulty in usage.

Screen Shot 2023-01-02 at 10.51.30 AM.png
Screen Shot 2023-01-02 at 10.51.39 AM.png
Screen Shot 2023-01-02 at 10.52.38 AM.png

#2 Redesigning "Add Income/Expense" Button

Fudget

  • "Income/Expense" button disappears once you add multiple items

 

Redesign

  • "Created an "Add" button on top

  • Users can pick if it is an expense/deposit by choosing the + or - sign

Why out Personas Care​

  • The terminology we found in interviews to be confusing and the "Add" button will help clarify this

  • These symbols will also help with color blindness as they are more noticeable

Screen Shot 2023-01-02 at 10.51.02 AM.png
Screen Shot 2023-01-02 at 10.51.10 AM.png
Screen Shot 2023-01-02 at 10.51.19 AM.png

#3 Adding a Navigation Bar for Currencies

Fudget

  • Difficult to find setting to change the currency symbol

Redesign

  • Easier for users to find currency by adding it to a  bar which is seen on the main budgets page

  • More options with currency

Why our Personas Care​

  • Because some are abroad and will be able to travel across countries much easier, having a navigation bar will help them search what currencies are nearby and add as they travel.

Screen Shot 2023-01-02 at 10.52.19 AM.png
Screen Shot 2023-01-02 at 10.51.50 AM.png
Screen Shot 2023-01-02 at 10.52.45 AM.png

Fudget

  • Bright orange which consumers found to be "annoying"

 

Redesign

  • Uses a cooler blue-toned color scheme​

Why out Personas Care

  • It generally makes the app more appealing to look at, doesn't add to difficulty for the consumer

  • Also, is beneficial to those who suffer from color blindness

Screen Shot 2023-01-02 at 10.52.06 AM.png

#4 New Coloring

Primary

Screen Shot 2023-01-02 at 3.07.06 PM.png
Screen Shot 2023-01-02 at 3.07.06 PM.png

Secondary

Screen Shot 2023-01-02 at 3.07.06 PM.png
Screen Shot 2023-01-02 at 3.07.06 PM.png
Screen Shot 2023-01-02 at 3.07.06 PM.png
Screen Shot 2023-01-02 at 3.07.06 PM.png
Screen Shot 2023-01-02 at 3.07.06 PM.png

Before and After

Currency

Screen Shot 2023-01-02 at 10.52.27 AM.png

Actual data and currency exchange updated through Google Finance Data

The original version just changes the visual symbol, not the values.

Screen Shot 2023-01-02 at 3.07.45 PM.png
Screen Shot 2023-01-02 at 3.07.53 PM.png
Screen Shot 2023-01-02 at 3.08.03 PM.png

Deuteranopia

Screen Shot 2023-01-02 at 3.08.11 PM.png

Accessibility

Key Takeaways

UX Flow Takeaway

Redesign Takeaway

User Research Takeaway

  • Everything is connected with each other

    • Ex. Primary Currency Screen is accessible through multiple points​

  • Settings vs Options was complicated to differentiate​

  • Highlighting the key components in the walkthrough will make users aware

  • Currency will impact all values on your budgets, showing again that interconnected nature

  • Large symbols on prices will make it more accessible to colorblind users

  • Our users will have a use for converting currency for all of their budgets

  • They are relatively new to budgeting and having a more comprehensive tutorial will help them feel more comfortable

Deliverables

Download
Slides

Download App Screens

Download Walkthrough Screens

You May Also Like:

OpertaNoBG.png

Operta Brand Identity Guide

PRINT MEDIA

WebsiteCPU.png

It's Not 1984 Anymore.

Renck_Redesign of Greater Greater Washington Website1.png

Redesign of Greater Greater Washington Website

UX/UI DESIGN   -   RECIEVED HONORS

DATA VISUALIZATION

bottom of page