Finoria
A personal finance app for iOS:
budget, transactions and net worth in one place
budget, transactions and net worth in one place
Case contents
• About the product
• Process
• Home
• Budget
• Transactions
• Net worth
• Other screens
• Summary
About the project
Role: Product designer
Product: iOS app
Project type: B2C
Product link:
soon
Goal
Audit the interface and redesign the UX/UI before the App Store launch
About the product and the process
Finoria is about net worth, not just expenses. The user plans a monthly budget, sorts transactions from bank statements and tracks how their net worth changes: money in funds and property minus loans. The app is built for iPhone and is getting ready for the App Store
Screen Flow
Studied the technical documentation and product logic, mapped the full screen flow with every transition
Audit
Audited every feature and agreed on the problem areas directly with the product owner
Home
I went through the screen top to bottom: header, month card, transactions outside the budget, upcoming payments and the add button. Below are the five changes that reshaped the screen the most. Small fixes are left out of the case, for example the web analytics promo removed from Home
Payments
PROBLEM AREAS
SOLUTION
01
Month card
The screen didn’t tell whether the month was on track. The amount left to spend was a plain green number, and income and expenses showed only actuals, with no plan
Income and expenses as “actual / planned” with progress bars: you can see how much is still coming in and how much is left to spend. The amount left to spend sits in an accent card and reads first
02
Outside the budget
Transactions outside the budget sat in a red block with a red badge, like a system error, although sorting them is a routine task for the user
A neutral card with a “Sort” button: it shows how many transactions and how much money are waiting. On Home, red is now used only for overdue items
03
Upcoming payments
Payments came as identical rows: date, name and an unsigned amount. You couldn’t tell what to pay today, what was overdue, or which money was coming in and which was going out
Payments now have “Today”, “Tomorrow” and “Overdue” statuses, with overdue ones in a red frame. Income is green with a plus, expenses are dark with a minus, fund payments have a blue bar on the left. The full list opens via “All”
04
Header
A statement could only be imported from “Transactions”, although that is the main way to get transactions in. The “Finance” title said nothing to the user
Statement import is in the header of every section, next to tips and the profile. The generic title is replaced with a greeting by name
05
Add button
The bottom of the screen was taken by the “Add transaction” button and a beta banner, although the banner is needed only once
Adding moved to a floating “+” button that stays at hand while scrolling. The beta banner is gone
BEFORE
AFTER
Budget
A budget item is a monthly plan for one expense or income, such as “Mortgage”, “Groceries” or “Salary”. Items are split into the Expenses, Income and Fund tabs. The fund holds savings: money goes in and comes out. Transactions not yet linked to an item are collected in the “Outside the budget” block. I reworked the item list, the item screen and item creation. Below are the five main changes
Item list
PROBLEM AREAS
SOLUTION
01
Item cards
Overspending had to be found by comparing pairs of numbers: an item showed “0 ₽ of 888” and sometimes a payment date, with no progress, state or frequency
A progress bar with a state colour: green with a check when the plan is met, orange when it is almost used up, red with the overspent amount. Items without a plan say “no limit”, and the frequency and payment day sit under the name
02
Month summary
The bottom line got lost: planned income and expenses were large, while the amount still available to spend was a small line at the bottom. How it was calculated was unclear
The summary starts with the free money and how it is calculated: account balances minus planned spending. Plan and actuals for income and expenses open under “Details”
03
Empty budget
What an item is was explained four times: a banner, tips, the empty state text and a modal, and there were two create buttons. A newcomer couldn’t tell where to start
One action on the screen: “Create item”. Next to it a short text and a “How does it work?” link; tips open from an icon in the header
BEFORE
AFTER
Budget item
PROBLEM AREAS
SOLUTION
04
Item screen
Transactions in an item showed only as a count and a total: to see where the money went you had to open the list with a “View” button. The item itself opened as a stack of four cards
Transactions are visible right in the item, each with an “unlink” button, so a wrong link can be removed on the spot. Instead of a stack of cards, one screen: frequency, payment day, a progress ring, spent, planned and remaining
05
New item
The item type was chosen last, after the name, amount and payment day. The user filled in the details before deciding what kind of item it was
The type is chosen first and the form adapts to it: for a fund, a deposit or withdrawal choice appears
BEFORE
AFTER
Transactions
Until a transaction is linked to an item, it stays outside the budget and is not counted in the plan. Transfers are not counted in the budget, and fund deposits and withdrawals are tied to Net worth. I reworked the list, transaction details and adding. Below are the five main changes. Small things stayed behind the scenes: detailed and compact list modes, iOS sheets instead of Android dialogs, and a “Split” block for a future feature
Transaction list
PROBLEM AREAS
SOLUTION
01
Transaction card
The list blurred into a red wall: the type was shown three times, by a coloured bar, a tag and the amount colour. Expenses had a red tag and amount, and transactions without an item also had a red “!”
The type reads from the sign of the amount: expenses are dark with a minus, income is green with a plus, the tag is gone. Fund and transfers are labelled above the name and marked with a bar on the left, blue and grey. The red “!” is replaced with a calm “No budget item” label and a purple “link” button
02
Filters and period
Filters had to be opened one by one: the type was picked from a dropdown with only income and expense, the month in a separate sheet with a grid, and there was no bank filter
All filters in one sheet: type, now including fund and transfer, banks, manual transactions and the old “No item” filter. The button shows the transaction count up front, selected filters stay as chips, and the month switches with arrows or a picker
BEFORE
AFTER
OTHER SCREENS
Transaction details
PROBLEM AREAS
SOLUTION
03
Amount and type
The current type and changing it were separate elements: the type showed as an “EXPENSE” label, and separate chips below it offered to change it. The amount was edited in an Android-style popup dialog
The type became an “Expense / Transfer / To fund” switch: the current value and the options in one element. The amount is large and edited right in the sheet, with the date and bank below
04
Linking to an item
The item picker showed only the plan, e.g. “Plan: 155 ₽”, with no remainder. It was easy to put a transaction where the money had already run out
Each item shows the remaining plan, with the transaction amount under the title. You can see at once where the transaction fits, and it is easier to stay within the plan
05
Adding a transaction
The “Add” button led straight to manual entry, and a statement could only be imported via an icon in the “Transactions” header. In the form the amount was a small field, and the “Save transaction” button looked active with empty fields
“+” opens a menu with “Import statement” first and “Add transaction” second. In the form the amount is large under the type switch, and the button stays disabled until the form is filled in
BEFORE
AFTER
OTHER SCREENS
Net worth
The total sits at the top, with three tabs below: Fund for savings, Property for flats, cars and devices, Loans for debts. This is the largest section: summary, fund, property and loans. Below are nine changes; small things like tab icons and the archive of sold items with a counter are left out
Summary and fund
PROBLEM AREAS
SOLUTION
01
Net worth summary
The total didn’t read as a calculation: net worth, “what I own” and “what I owe” stood as three cards. Debt, normal for a mortgage holder, was always red
One card, “My net worth today”: the total is large, with assets minus liabilities below and the breakdown under “Details”. Debt became part of the formula, without the alarming red
02
Fund dynamics
You couldn’t tell whether savings were growing: the transaction list came right after the fund balance
Under the balance there is a monthly “Fund dynamics” chart, and the transaction history is collapsed into one row with a count
BEFORE
AFTER
Property
PROBLEM AREAS
SOLUTION
03
Property card
Debt was a red tag with no repayment progress, and a sold item showed only the sale price and date
The card depends on the state: a mortgaged item shows the amount paid and the remaining debt with a progress bar, a sold one shows the profit and an “Archive” button. The state is visible without opening the item
04
Property screen
Three buttons in three colours with equal weight: change value, sell and delete. The loan tied to the item wasn’t shown on the screen
One primary action, “Sell the flat”, editing in the header, deletion inside the settings. A linked loan block appeared, with the balance and the payment
05
Sold property
There was no sale price or amount left after paying off the debt: after a sale the screen barely changed, keeping the “Sold” label, the share, the value and an empty chart
The sale result is in the header: price minus the mortgage paid off. Below, the closed loan with its payoff date and the sale details with the net proceeds
05
Property settings
Only the value could be changed. The name, type and debt could not be edited after creation
A “Property settings” screen: type, name and value with a hint about the market price. Debt is enabled with a toggle and reveals its fields; address and floor area moved to an extra block
BEFORE
AFTER
OTHER SCREENS
Loans
PROBLEM AREAS
SOLUTION
03
Loan card
The rate, term and repayment had to be checked inside: the list showed only the name, type, balance and monthly payment
The key loan facts are visible in the list: balance, rate, payment, end date and a repayment bar with the next payment date
03
Loan screen
The collateral wasn’t shown on the loan screen, and budget items came as one list where the role was marked only by a tag, with no amounts or progress
A “Linked property” block with the collateral appeared. Items are split into the main payment and related costs such as insurance and taxes, each with its own progress
03
New loan
You had to keep the difference between types and your own items in your head: loan types were a list of bare names, and the collateral was picked from a dropdown of names
Types now have notes about collateral, collateral items are shown as a list with values, and the settings step shows the chosen type and item at the top
BEFORE
AFTER
OTHER SCREENS
Other screens
App Store screenshots, sign-in, onboarding
TASK
SOLUTION
Show the app’s value right in the store
Five screenshots: a short headline about the benefit and a screen that shows it, for example “Manage your net worth, not just your expenses”. People flip through store screenshots fast, so each one carries a single idea
TASK
SOLUTION
Sign in / sign up
One flow for new and returning users: email plus a code from the message, or sign in with Google. No password to invent or remember. Errors and code resend with a timer are designed too
TASK
SOLUTION
Onboarding
At the client’s request I designed the onboarding from scratch: light screens with 3D illustrations, a short headline and one line about the benefit. The idea reads at a glance, and the calm tone suits a product people trust with their money
