КейсСвой продуктUI/UXPWAFull-stackСемейный бюджет

AFINA.

Приложение для учёта личных и семейных финансов. Ставится на телефон прямо из браузера, без App Store и Google Play, и работает как обычное приложение. Придумал, спроектировал и написал сам: от идеи и дизайна до сервера и базы данных.

ПродуктСобственная разработка DoART
ЗадачаУчёт денег, которым семья пользуется каждый день
РольИдея, UX/UI, фронтенд, бэкенд
СтекPHP, MySQL, JavaScript, PWA
Мраморная голова Афины с золотыми прожилками — заставка приложения
AFINA

Семейный бюджет, который всегда в кармане и не требует магазина приложений

Ставится из браузераОбщий бюджет семьи6 валютRU / EN
0магазинов приложений: AFINA ставится на телефон по ссылке
3касания, чтобы записать трату: категория, сумма, кнопка
1общий бюджет на всю семью: каждый видит, кто и на что потратил
6валют, 2 языка и светлая или тёмная тема на выбор
Задача

Учёт денег, который не бросают через неделю

Почти все пробовали вести бюджет, и почти все бросили. Не из-за лени: инструменты неудобны там, где тратятся деньги, то есть в телефоне и на ходу.

×Таблицы неудобно заполнять с телефона, а дома уже не помнишь, что купил
×Банковское приложение видит только свою карту, а наличные и вторая карта теряются
×Семейный бюджет живёт в переписке: «сколько ты потратил?» и «а где деньги?»
Решение

Одно приложение для себя и для всей семьи

1Быстрый вводтрата записывается за три касания, пока стоишь у кассы
2Статистикабаланс, доходы, расходы и куда уходят деньги
3Семьяобщий баланс и лента операций всех участников
4Долги и копилкиотдельные типы категорий со своим прогрессом
5PWAиконка на экране, полный экран, пуш-уведомления
6Под себявалюта, язык, тема, копейки, свои категории
01Бренд

Почему Афина

Афина — греческая богиня мудрости и расчёта. Название задаёт тон: деньги любят спокойствие и холодную голову. Первое, что видит пользователь, — заставка с мраморной Афиной, по которой проходят золотые прожилки.

Заставка AFINA: мраморная голова Афины с золотыми трещинами Заставка при запуске
AFINA
Инициализация финансового помощника…
ПАЛИТРА
Violet#7C6AFF · акцент
Lilac#C084FC · градиент
Familyкарточка семьи
Income#34D399 · доходы
Expense#F87171 · расходы
Night#0A0A0F · тёмная тема
ТИПОГРАФИКА · UNBOUNDED + MANROPE
50 435.10 ₴
Широкий Unbounded для сумм и заголовков: цифры читаются издалека. Спокойный Manrope для интерфейса: мелкие подписи остаются чёткими даже на маленьком экране.
Суммы 700 · заголовки 800 · интерфейс 500–800
Цвет = смысл

Зелёный всегда доход, красный всегда расход, фиолетовый — твои деньги, бирюзовый — семейные. Не нужно читать подписи.

Главное крупно

Баланс — самая большая цифра на экране. Всё остальное — детали, которые открываются по запросу.

Две темы

Светлая для дня, тёмная для вечера. Палитра подобрана так, что обе темы выглядят как один продукт.

02Главный экран

Ответ на вопрос «сколько у меня денег» за секунду

Открываешь приложение — и сразу видишь баланс, доходы и расходы за месяц, самые крупные статьи трат и последние операции. Без меню, отчётов и лишних переходов.

1Карточка баланса

Баланс, доходы и расходы на одной карточке. Свайп переключает личный и семейный счёт.

2Куда уходят деньги

Крупнейшие категории трат с долей от всех расходов. По «Все» открывается диаграмма, где категории можно включать и выключать.

9:41
СтатистикаД
ЛИЧНЫЙ БАЛАНС12 480.50₴
ДОХОДЫ32 000.00 ₴
РАСХОДЫ19 519.50 ₴
Куда уходят деньги Все ›
Аренда₴11 00056% трат
Продукты₴5 24027% трат
Долги
Кредитка₴8 200из ₴15 000
Отпуск₴18 400цель ₴40 000
Мои операции
ВсеДоходыРасходыДолги
ПродуктыСупермаркет
−1 240 ₴
ЗарплатаСентябрь
+32 000 ₴
СТАТИСТИКАПОКУПКИОПЕРАЦИИДОСТИЖЕНИЯНАСТРОЙКИ
3Долги и копилки

Кому должен ты, кто должен тебе и сколько осталось до цели. С прогрессом, а не просто суммой.

4Лента операций

Фильтры «Доходы», «Расходы», «Долги» в одно касание. Ошибку можно поправить прямо из ленты.

5Нижнее меню

Пять разделов под большим пальцем. Всё, что нужно каждый день, в одной руке.

03Ввод операции

Три касания, пока стоишь у кассы

Учёт бросают, когда записать трату дольше, чем её совершить. Поэтому главный сценарий приложения вылизан до минимума: никаких форм, календарей и обязательных полей.

Нажимайте на шаги: экран показывает, что видит пользователь

9:41
Операции+
Выберите категорию
Зарплата
Отдых
Продукты
Транспорт
Аренда
Питомцы
Подарки
Копилка
Кредитка
Коммуналка
₴
Заметка (необязательно)
− Расход+ Доход
✓Расход добавлен · −1 240 ₴
СТАТИСТИКАПОКУПКИОПЕРАЦИИДОСТИЖЕНИЯНАСТРОЙКИ
04Семейная группа

Общий бюджет без вопроса «а где деньги?»

Участники объединяются в группу и видят общий баланс, общие долги и ленту операций каждого. Личный счёт при этом остаётся личным: переключение одним свайпом по карточке.

9:41
СтатистикаД
ЛИЧНЫЙ БАЛАНС12 480.50₴
ДОХОДЫ32 000.00 ₴
РАСХОДЫ19 519.50 ₴
НАША СЕМЬЯ50 435.10₴
ДОХОДЫ116 000.00 ₴
РАСХОДЫ51 667.14 ₴
Мои операции
ВсеДоходыРасходыДолги
ПродуктыСупермаркет
−1 240 ₴
ЗарплатаСентябрь
+32 000 ₴
ТранспортТакси
−180 ₴
ОтдыхКино
−420 ₴
Куда уходят деньги семьи Все ›
Подарки₴25 10049% трат
Аренда₴11 00021% трат
Операции семьи
ВсеМоиДоходыРасходы
ПитомцыАня · корм для кота
−150 ₴
ПродуктыДима
−705.52 ₴
СТАТИСТИКАПОКУПКИОПЕРАЦИИДОСТИЖЕНИЯНАСТРОЙКИ

Каждый ведёт свои траты, а итог видят все

Общий балансДоходы и расходы всех участников складываются в одну карточку семьи
Кто и на чтоУ каждой операции подписан автор: «Аня · корм для кота»
До 10 участниковСоздатель приглашает семью, у каждого виден его вклад в общий бюджет
Пуш-уведомленияКогда кто-то из семьи добавил операцию, остальные узнают сразу
05PWA

Приложение на телефоне без App Store

AFINA сделана как PWA (прогрессивное веб-приложение). Пользователь открывает ссылку, добавляет приложение на экран «Домой», и дальше оно запускается с иконки, во весь экран и с уведомлениями, как обычное.

doart.uk · AFINA
ШАГ 1Открыть ссылку

Из сообщения, QR-кода или с сайта. Ничего не нужно искать в магазине.

Копировать
На экран «Домой»
Поделиться
ШАГ 2«На экран Домой»

Одно действие в меню браузера на iPhone или Android.

A
ШАГ 3Готово

Иконка AFINA на рабочем столе, запуск со своей заставкой и без адресной строки.

Нативное приложениеPWA, как AFINA
ПлатформыДве отдельные разработки: iOS и AndroidОдин код для iPhone, Android и компьютера
ПубликацияАккаунты разработчика, модерация, комиссии магазиновСсылка или QR-код, без модерации
ОбновленияЧерез магазин, пользователь должен обновить самМгновенно у всех при следующем запуске
Иконка, полный экран, пушиДаДа
06Настройки

Подстраивается под человека, а не наоборот

Валюта, язык, тема, копейки, количество категорий на экране и свои категории четырёх типов: расход, доход, долг и копилка. Переименовал категорию — изменение применится ко всем прошлым операциям. Попробуйте переключить настройки.

Валюта
Оформление
Оформление карточки семьи
КлассикаАврораЗакатПолночь

Со временем новые скины будут открываться за достижения.

9:41
Настройки
Валюта
$ USD€ EUR£ GBP₴ UAH₸ KZT₽ RUB
Язык
RU — РусскийEN — English
Категории в операциях
Количество на экране−12+
Оформление
Светлая тема
Показывать копейки
Уведомления
Пуш-уведомления · операции и группа
Выйти из аккаунта
СТАТИСТИКАПОКУПКИОПЕРАЦИИДОСТИЖЕНИЯНАСТРОЙКИ
07Разработка

Под капотом: без фреймворков и подписок

Весь стек написан вручную и работает на обычном хостинге. Нет ежемесячной платы за сторонние сервисы, а интерфейс открывается быстро даже на слабом телефоне и мобильном интернете.

КЛИЕНТИнтерфейс

Одностраничное приложение на чистом JavaScript: переходы между разделами без перезагрузки.

  • Vanilla JS
  • CSS
  • 2 темы
PWAКак приложение

Манифест и service worker: иконка, заставка, полноэкранный режим и пуш-уведомления.

  • Manifest
  • Service Worker
  • Web Push
СЕРВЕРAPI на PHP

Авторизация, операции, категории, семейные группы и пересчёт балансов.

  • PHP
  • JSON API
  • Авторизация
ДАННЫЕMySQL

Пользователи, семейные группы, операции, категории и настройки каждого участника.

  • MySQL
  • Группы
  • Категории
08Развитие

Живой продукт, который растёт

AFINA развивается версиями. Сейчас работает версия 3.1, и следующие разделы уже заложены в навигацию.

Работает · v3.1Учёт, семья, PWA

Статистика, быстрый ввод, долги и копилки, семейная группа, уведомления, валюты и темы.

В разработкеПокупки

Общий список покупок для семьи: добавил дома, купил в магазине, сумма сразу ушла в расходы.

В разработкеДостижения

Награды за привычки вроде «30 дней без перерасхода» и новые скины карточки за них.

09Для вашего бизнеса

Тот же подход работает для вашего проекта

AFINA показывает, как я делаю веб-приложения от идеи до запуска. Тем же способом можно собрать инструмент для вашего бизнеса, который сотрудники и клиенты поставят на телефон за минуту.

Кабинет клиента

Записи, оплаты, документы и статусы заказов в приложении на телефоне клиента.

Панель владельца

Продажи, расходы и заявки в одном экране вместо пяти таблиц.

Инструмент для команды

Учёт, чек-листы и отчёты сотрудников с телефона, с уведомлениями.

Без лишних расходов

Один код вместо двух приложений, без комиссий магазинов и ежемесячных подписок.

10Живой проект

Откройте AFINA на телефоне

Приложение работает. Откройте его, добавьте на экран «Домой» и запишите первую трату.

Нужно своё приложение для бизнеса?Расчёт стоимости за 30 секунд · без звонков · ответ сегодняРассчитать