Case studyOwn productUI/UXPWAFull-stackFamily budget

AFINA.

An app for tracking personal and family finances. It installs on a phone straight from the browser, with no App Store or Google Play, and works like a regular app. I came up with it, designed it and built it myself, from the idea and design to the server and database.

ProductBuilt in-house by DoART
GoalMoney tracking a family actually uses every day
RoleIdea, UX/UI, front end, back end
StackPHP, MySQL, JavaScript, PWA
A marble head of Athena veined with gold, the app's splash screen
AFINA

A family budget that's always in your pocket, no app store required

Installs from the browserShared family budget6 currenciesRU / EN
0app stores: AFINA installs on a phone from a link
3taps to log a spend: category, amount, button
1shared budget for the whole family: everyone sees who spent what
6currencies, 2 languages and a light or dark theme
Goal

Money tracking people don't give up after a week

Almost everyone has tried budgeting, and almost everyone has given up. Not out of laziness: the tools are awkward exactly where money gets spent, on a phone and on the go.

×Spreadsheets are a pain to fill in on a phone, and by the time you're home you've forgotten what you bought
×A banking app only sees its own card, so cash and a second card get lost
×The family budget lives in chat: “how much did you spend?” and “where's the money gone?”
Solution

One app for yourself and the whole family

1Quick entrya spend is logged in three taps while you're still at the till
2Statisticsbalance, income, expenses and where the money goes
3Familya shared balance and every member's transaction feed
4Debts and savings potsseparate category types with their own progress
5PWAhome-screen icon, full screen, push notifications
6Your waycurrency, language, theme, pennies, custom categories
01Brand

Why Athena

Athena is the Greek goddess of wisdom and good judgement. The name sets the tone: money likes calm and a cool head. The first thing users see is a splash screen with a marble Athena veined with gold.

AFINA splash screen: a marble head of Athena with golden cracks Launch splash screen
AFINA
Starting your finance assistant…
PALETTE
Violet#7C6AFF · accent
Lilac#C084FC · gradient
Familyfamily card
Income#34D399 · income
Expense#F87171 · expenses
Night#0A0A0F · dark theme
TYPOGRAPHY · UNBOUNDED + MANROPE
50 435.10 ₴
Wide Unbounded for amounts and headings, so the numbers read from a distance. Calm Manrope for the interface, so small labels stay crisp even on a small screen.
Amounts 700 · headings 800 · interface 500–800
Colour = meaning

Green is always income, red is always spending, purple is your money, teal is the family's. No need to read the labels.

The key number, big

The balance is the biggest number on screen. Everything else is detail you open when you need it.

Two themes

Light for daytime, dark for evening. The palette is tuned so both themes feel like one product.

02Home screen

“How much money do I have?” answered in a second

Open the app and you immediately see your balance, the month's income and spending, the biggest expense categories and recent transactions. No menus, reports or extra taps.

1Balance card

Balance, income and expenses on one card. A swipe switches between personal and family accounts.

2Where the money goes

The biggest spending categories with their share of the total. “All” opens a chart where you can toggle categories on and off.

9:41
StatisticsD
MY BALANCE12 480.50₴
INCOME32 000.00 ₴
EXPENSES19 519.50 ₴
Where the money goes All ›
Rent₴11 00056% of spending
Groceries₴5 24027% of spending
Debts
Credit card₴8 200of ₴15 000
Holiday₴18 400goal ₴40 000
My transactions
AllIncomeExpensesDebts
GroceriesSupermarket
−1 240 ₴
SalarySeptember
+32 000 ₴
STATSSHOPPINGTRANSACTIONSACHIEVEMENTSSETTINGS
3Debts and savings pots

Who you owe, who owes you and how far you are from your goal. With progress, not just a number.

4Transaction feed

One-tap filters for Income, Expenses and Debts. Mistakes can be fixed right from the feed.

5Bottom menu

Five sections under your thumb. Everything you need every day, one-handed.

03Adding a transaction

Three taps while you're still at the till

People give up tracking when logging a spend takes longer than making it. So the app's main flow is stripped to the bare minimum: no forms, calendars or required fields.

Tap the steps: the screen shows what the user sees

9:41
Transactions+
Choose a category
Salary
Leisure
Groceries
Transport
Rent
Pets
Gifts
Savings pot
Credit card
Utilities
₴
Note (optional)
− Expense+ Income
✓Expense added · −1 240 ₴
STATSSHOPPINGTRANSACTIONSACHIEVEMENTSSETTINGS
04Family group

A shared budget without “where's the money gone?”

Members join a group and see the shared balance, shared debts and everyone's transaction feed. Personal accounts stay personal: one swipe on the card switches between them.

9:41
StatisticsD
MY BALANCE12 480.50₴
INCOME32 000.00 ₴
EXPENSES19 519.50 ₴
OUR FAMILY50 435.10₴
INCOME116 000.00 ₴
EXPENSES51 667.14 ₴
My transactions
AllIncomeExpensesDebts
GroceriesSupermarket
−1 240 ₴
SalarySeptember
+32 000 ₴
TransportTaxi
−180 ₴
LeisureCinema
−420 ₴
Where the family's money goes All ›
Gifts₴25 10049% of spending
Rent₴11 00021% of spending
Family transactions
AllMineIncomeExpenses
PetsAnya · cat food
−150 ₴
GroceriesDima
−705.52 ₴
STATSSHOPPINGTRANSACTIONSACHIEVEMENTSSETTINGS

Everyone logs their own spending, and everyone sees the total

Shared balanceAll members' income and spending add up in one family card
Who spent whatEvery transaction shows who made it: “Anya · cat food”
Up to 10 membersThe owner invites the family, and each person's contribution to the shared budget is visible
Push notificationsWhen someone in the family adds a transaction, the others know straight away
05PWA

An app on your phone without the App Store

AFINA is built as a PWA (progressive web app). Users open a link, add the app to their home screen, and from then on it launches from an icon, full screen and with notifications, like any other app.

doart.uk · AFINA
STEP 1Open the link

From a message, a QR code or a website. No searching an app store.

Copy
Add to Home Screen
Share
STEP 2“Add to Home Screen”

One action in the browser menu on iPhone or Android.

A
STEP 3Done

The AFINA icon on the home screen, launching with its own splash screen and no address bar.

Native appPWA, like AFINA
PlatformsTwo separate builds: iOS and AndroidOne codebase for iPhone, Android and desktop
PublishingDeveloper accounts, app review, store feesA link or QR code, no review
UpdatesThrough the store; users have to update it themselvesInstantly for everyone on next launch
Icon, full screen, pushYesYes
06Settings

Adapts to the person, not the other way round

Currency, language, theme, pennies, how many categories appear on screen, and custom categories of four types: expense, income, debt and savings pot. Rename a category and the change applies to all past transactions. Try switching the settings.

Currency
Appearance
Family card style
ClassicAuroraSunsetMidnight

New skins will unlock with achievements over time.

9:41
Settings
Currency
$ USD€ EUR£ GBP₴ UAH₸ KZT₽ RUB
Language
EN — EnglishEN — English
Categories in transactions
Number on screen−12+
Appearance
Light theme
Show pennies
Notifications
Push notifications · transactions and group
Log out
STATSSHOPPINGTRANSACTIONSACHIEVEMENTSSETTINGS
07Development

Under the hood: no frameworks, no subscriptions

The whole stack is hand-written and runs on ordinary hosting. No monthly fees for third-party services, and the interface opens fast even on a budget phone and mobile data.

CLIENTInterface

A single-page app in plain JavaScript: switching sections without reloading.

  • Vanilla JS
  • CSS
  • 2 themes
PWALike an app

Manifest and service worker: icon, splash screen, full-screen mode and push notifications.

  • Manifest
  • Service Worker
  • Web Push
SERVERPHP API

Authentication, transactions, categories, family groups and balance calculations.

  • PHP
  • JSON API
  • Auth
DATAMySQL

Users, family groups, transactions, categories and each member's settings.

  • MySQL
  • Groups
  • Categories
08Roadmap

A living product that keeps growing

AFINA evolves in versions. Version 3.1 is live now, and the next sections are already built into the navigation.

Live · v3.1Tracking, family, PWA

Stats, quick entry, debts and savings pots, family group, notifications, currencies and themes.

In developmentShopping

A shared family shopping list: add it at home, buy it in the shop, and the amount goes straight into expenses.

In developmentAchievements

Rewards for habits like “30 days without overspending”, unlocking new card skins.

09For your business

The same approach works for your project

AFINA shows how I build web apps from idea to launch. The same way, I can build a tool for your business that staff and customers install on their phones in a minute.

Client portal

Bookings, payments, documents and order status in an app on the customer's phone.

Owner dashboard

Sales, costs and leads on one screen instead of five spreadsheets.

A tool for your team

Tracking, checklists and staff reports from a phone, with notifications.

No unnecessary costs

One codebase instead of two apps, with no store fees or monthly subscriptions.

10Live project

Open AFINA on your phone

The app is live. Open it, add it to your home screen and log your first spend.

Need your own app for your business?A quote in 30 seconds · no calls · reply todayGet a quote