Счётчик

От идеи до релиза собственного PWA-приложения без команды разработчиков
Моя роль: Product Designer, UX/UI Designer, Product Owner, AI Development Lead

Период работы: около двух месяцев

Релиз MVP: 25 июня 2026 года

Предпосылки

За годы работы я неоднократно сталкивался с одной и той же бытовой проблемой. Люди занимают деньги друг другу, получают оплату за работу частями, откладывают оплату счетов «на потом», а записи оказываются разбросаны между заметками, таблицами и переписками.

Существующие приложения либо ориентированы на полноценный домашний бюджет, либо требуют сложной настройки. Мне хотелось сделать максимально простой сервис, который решает одну задачу — помогает помнить о финансовых обязательствах.

Так появилась идея «Счётчика».
Задача
Создать минималистичное приложение, позволяющее учитывать:
  • деньги, которые должны пользователю;
  • деньги, которые пользователь должен другим;
  • сроки погашения;
  • частичные выплаты;
  • напоминания о приближении даты платежа.

Главной целью было не количество функций, а понятный пользовательский сценарий, который не требует обучения.

Исследование и проектирование

До начала разработки я сформировал структуру будущего продукта.

Были определены:
  • целевая аудитория;
  • пользовательские сценарии;
  • MVP первой версии;
  • информационная архитектура;
  • структура базы данных;
  • логика расчёта итоговых сумм;
  • правила формирования статусов долгов;
  • система уведомлений;
  • дизайн-система проекта.

Все интерфейсы сначала были спроектированы в Figma.

После этого я собрал интерактивный прототип в Tilda через zero-блоки, чтобы проверить сценарии использования ещё до начала программирования.

Почему первый прототип был сделан в Tilda

Как UX/UI-дизайнер я хотел как можно быстрее проверить пользовательские сценарии. Поэтому вместо статичных макетов собрал интерактивный прототип в Tilda с переходами между экранами. Это позволило оценить навигацию ещё до начала разработки.

Позже этот прототип стал референсом для реализации интерфейса в Next.js.

Дизайн-система

После завершения проектирования интерфейсов я разработал собственную дизайн-систему на основе токенов.

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

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

Итеративная разработка

Я не являюсь разработчиком. Для реализации проекта использовался Cursor с AI-агентом.

После анализа требований и документации агент предложил стек:
  • TypeScript
  • Next.js
  • PostgreSQL
  • Prisma
  • Docker

Я согласился с этим решением и далее выступал в роли постановщика задач. Процесс выглядел следующим образом:
  • описание новой функции;
  • обсуждение архитектуры;
  • реализация кода AI;
  • тестирование;
  • корректировка логики;
  • повторная реализация при необходимости.

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

Отдельной задачей стала настройка среды разработки и деплоя. Совместно с AI была настроена локальная разработка в Docker с автоматическим обновлением изменений без постоянной пересборки контейнеров.

Архитектура проекта

Сегодня проект включает:
  • промо-сайт;
  • PWA-приложение;
  • пользовательскую часть;
  • административную панель;
  • собственную систему авторизации;
  • систему уведомлений.

Используется следующая схема разработки:
Локальная разработка → GitHub → автоматический деплой на VPS.

Изменения структуры базы данных сопровождаются отдельными миграциями Prisma.
Реализованные возможности MVP
Первая версия включает:
  • регистрацию пользователя;
  • подтверждение электронной почты;
  • восстановление пароля;
  • собственную систему авторизации;
  • разделение долгов на Debit и Credit;
  • четыре статуса долгов;
  • учёт частичных погашений;
  • ввод имени и телефона через список контактов;
  • расчёт остатка задолженности;
  • агрегированные показатели по каждому разделу;
  • уведомления о приближении срока оплаты;
  • объединение уведомлений в одно письмо в сутки;
  • выбор валюты пользователя;
  • установку приложения как PWA.

Что оказалось самым интересным

За время проекта впервые получил практический опыт:
  • разработки дизайн-системы на основе токенов;
  • проектирования структуры БД;
  • подготовки технической документации для разработки;
  • управления разработкой с использованием AI-агента;
  • проектирования PWA;
  • настройки среды разработки на Docker;
  • организации процесса деплоя через GitHub;
  • сопровождения продукта после релиза.

Это позволило получить практический опыт не только UX/UI-дизайна, но и полного управления процессом разработки.

После релиза

Релиз MVP состоялся 25 июня 2026 года.

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

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