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

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

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

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

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

Учет денег

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

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

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

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

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

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

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

Отчеты

Заказы

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

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

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

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

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

Онбординг

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

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

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

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

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

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

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

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

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

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