Алексей Новичков Финолог — сервис управленческого учета

Финолог — сервис управленческого учета

finolog.ru — сервис управленческого учета в малом и среднем бизнесе. Сводит все потоки в одном месте, автоматически загружает операции из банков и понимает банковские выписки. Прогнозирует денежный поток и предупреждает о кассовых разрывах. Дает инструменты автоматизации учета и базовые отчеты управленческого учета: Cashflow, P&L, анализ расходов, баланс.

Время работы: 2016–2020 г.

Моя роль: дизайн интерфейса, фронтенд-разработка на ранних этапах. С 2019 г. руководство дизайнером, разработка онбординга пользователей.

Также в роли дизайнера интерфейса с 2019 г. — Денис Седов.

Учет денег

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

Главный экран с денежным потоком · 1 / 4

График прогнозирует денежный поток на основе плановых и повторяющихся операций. И показывает кассовый разрыв:

Редактирование и добавление операций идет через таблицу операций. Элементы в таблице специально сделаны двухстрочными, чтобы уместить больше информации, и при этом сгруппировать ее:

Таблица с транзакциями · 1 / 2
Транзакция, которая повторяется каждую неделю

Одним из важных кейсов стало разбиение операций. Часто один перевод приходит от клиента сразу за несколько заказов. Или один расход оплачивает несколько категорий расходов. Эта операция загружается из банка в Финолог и ее нужно разнести по нескольким статьям. Для этого мы придумали разбиение суммы транзакции на части, c присвоение каждой из них нужных атрибутов:

Разбиение операции

Когда часть разбитой операции попадает в фильтр, проект или отчет, то эта часть операции подсвечивается, а остальное выводится серым цветом. Например, к проекту привязаны 200 000 ₽ от перевода на 250 000 ₽:

Разбитая операция, одна часть которой привязана к проекту

Подключение банков

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

Подключение банковского аккаунта
Ваш браузер не поддерживает встроенные видео.
Если хотите, скачайте видео и посмотрите видеплеером на ваш выбор.

Отчеты

Отчет о движении денежных средств · 1 / 3

Заказы

Заказы в Финологе служат не только для выставления счетов, но и для детального учета обязательств. Вот скринкаст по работе с заказами:

Форма заказов для сайта

Это готовое решение для приема заказов и оплаты через сайт. Клиент Финолога создает, настраивает форму, и вставляет её на сайт.

Так форму видит клиент, когда делает через неё заказ

Решили, что форма появляется в правой части экрана. Вот процесс покупки конечного клиента:

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

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

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

Онбординг

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

Контекстные пояснения и ссылки на обучающие материалы:

Исследования

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

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

Результаты интервью · 1 / 4

Туры в интерфейсе

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

Для создания туров решили использовать конструктор «Product tours» от Intecom. Каждый туду запускает тур:

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

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

Уведомление о завершении шага в инструкции

Продолжение следует ⏳