Кейс. Мобильное приложение для учёта персональных финансов

Разработал дизайн-систему, брендинг, сценарии использования и дизайн мультиплатформенного мобильного приложения и веб-версии.

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

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

Палитра

Цвета парные, у каждого цвета есть аналог для темной темы.

Темная и светлая тема

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

Кнопки

Используется несколько вариантов кнопок, каждый прорисован во всех необходимых состояниях и «упакован» в компонент с вариантами.

Иконки банков

Я отрисовал иконки популярных банков России, Украины, США, Англии, Германии, Беларуси, Канады, Италии. Это те страны, куда мы хотели заходить на старте. Сейчас приложение доступно только для РФ региона.

Карточки сущностей

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

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

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

Отдельно разработал дизайн и сверстал адаптивную веб-версию приложения. Весь функционал приложения доступен с браузера.

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

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

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

Операции

Экран для совершения операций. Операцию можно добавить перетаскиванием одной иконки на другую либо провалившись внутрь счета / категории расхода.

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

Открытый счет

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

Статистика

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

Спасибо за внимание, буду рад обратной связи: )

Посмотреть другие кейсы можно на Behance –