Flomni 2.0. Редизайн, который разгрузил поддержку и научил клиентов пользоваться продуктом
Flomni – зрелая платформа с масштабной клиентской базой и устоявшимися процессами, а не стартап на заре своего существования. Поэтому здесь нельзя было просто «все переделать». Нужно было навести порядок и уложить все так, чтобы не сломать привычки старых пользователей – и при этом сделать продукт понятным для новых клиентов.
Привет! Это Александр Жирнов из ZHIRNOV Studio
Делаем продуктовую разработку и любим сложные системы: платформы, сервисы, финансы, AI – там, где много логики, данных и сценариев.
Умеем превращать запутанные продукты в понятные интерфейсы и снижать порог входа для пользователей. Работаем и с крупными компаниями, и со стартапами: Тинькофф, Райффайзен, Ростелеком и пр.
Часто начинаем с MVP, а дальше помогаем продукту расти. А сегодня расскажем о платформе Flomni и о том, как помогли им обновиться.
Flomni – B2B-платформа для общения бизнеса с клиентами
Она помогает компаниям вести диалоги сразу в нескольких каналах – на сайте, в мессенджерах и соцсетях – из одного окна.
Под капотом платформы мощный функционал: омниканальные диалоги, чат-боты, рассылки, CRM-логика, аналитика, AI-ассистенты и гибкие сценарии, SDK, веб-хуки. И все это можно настраивать под конкретную компанию.
Одному бизнесу нужны только диалоги, другому – сложная система автоматизаций и воронок. Flomni все это позволяет настроить.
Платформа выросла быстрее, чем интерфейс. Что делать?
Со временем функций на платформе появилось много, но пользоваться ими стало сложно. Клиенты редко заходили в личный кабинет и почти все настраивали через аккаунт-менеджеров Flomni.
Поэтому нас и позвали в проект. Задача была превратить Flomni из закрытой системы, где нужны проводники, в простой и понятный инструмент. Чтобы клиенты могли легко пользоваться им сами.
Диагностика: распутываем клубок из функций, названий и неочевидных структур
Прежде чем что-то менять, мы разобрали продукт на уровне логики и смыслов. А еще поговорили с аккаунт-менеджерами продукта – людьми, которые знают боли клиента лучше кого бы то ни было.
Увидели, что интерфейс был перегружен, и почти все в нем называлось внутренним языком команды. Пользователь приходил, например, сделать рассылку, – а находил ее в разделе «Задания». Хотел подключить и настроить AI, но не понимал как.
Так мы определили задачи проекта:
1. Первая – навести порядок в логике. Мы разобрали продукт на уровне структуры: что за что отвечает, где функции дублируются, а где одинаковые смыслы разбросаны по разным разделам.
2. Вторая – переупаковать продукт под реальные сценарии пользователя. Мы отталкивались не от архитектуры системы, а от того, как человек приходит решать свою задачу. Об этом чуть позже.
3. И третья – внедрить все изменения без боли. Подробнее об этом – ниже.
Эволюция без боли
У Flomni много разных клиентов. Кто-то давно работает в платформе и привык к своим флоу и названиям, а кто-то только заходит и хочет сразу понятный продукт. Поэтому делать один резкий апдейт для всех было нельзя.
Мы решили это через управление функциональностью.
Отдельные фичи можно включать и выключать для конкретных клиентов – этим занимаются аккаунт-менеджеры, а не сами пользователи, чтобы никто случайно ничего не сломал.
В итоге платформа начала жить сразу в двух версиях, а у разных клиентов параллельно существуют старые и новые разделы: «Транспорт сообщений» и «Рассылки», «Диалоги 2.0» и «Диалоги 3.0», «Мегамозг» и AI. Об этом еще расскажем подробнее.
Кого-то мы переводим на новую версию через пересборку флоу и обучение, кого-то оставляем в привычной логике. А для тех, кто давно не заходил в продукт, обновленный интерфейс часто становится поводом вернуться и посмотреть на Flomni по-новому.
Похожая практика, кстати, была у LinguaLeo. Когда они убрали «Джунгли», часть пользователей тяжело это приняла, и по запросу в техподдержку им временно включали старый интерфейс обратно.
Ну а теперь полетели дальше, расскажу о том, как мы переосмыслили навигацию и разделы.
Такая же логика – давать гибкость, не ломая привычки – легла в основу работы с меню
Меню во Flomni и раньше можно было выдвигать и сворачивать. Мы сохранили эту механику, но сделали ее удобнее для повседневной работы.
Теперь меню можно закрепить в нужном состоянии. Если пользователю важно видеть весь список функций, он фиксирует меню в открытом виде. Если нужно больше рабочего пространства – сворачивает его.
В открытом состоянии пункты меню отображаются с иконками и названиями, поэтому ориентироваться проще. В закрытом – остается компактным, не растягивается на весь экран и не отвлекает от работы.
Дашборд: быстрый срез состояния диалогов
Дашборд остается первым экраном, с которого начинается работа. Мы упростили и освежили его визуально: сделали светлее, компактнее и спокойнее, чтобы ключевые метрики считывались сразу. Здесь видно, как идут диалоги, сколько времени уходит на ответы и что происходит с целями.
Заодно навели порядок с цветами. В старой версии негативные показатели подсвечивались синим и фиолетовым, и это путало. Мы привели цвета к привычным паттернам: красный – когда есть проблема, зеленый – когда все в порядке.
Чат-боты: от «веток и релизов» к сценариям и версиям
Конструктор чат-ботов – одна из самых сильных частей Flomni. Но раньше этот функционал был сложным в использовании из-за языка и структуры.
Пользователь, который хотел создать бота для ответов на вопросы, сталкивался с интерфейсом, где нужно было работать с «ветками», делать «релизы» и следить за «тредами». Это был инструмент для разработчиков, а не для маркетологов или менеджеров.
Поэтому мы переименовали все непонятное. Вместо абстрактной «ветки» теперь есть конкретный «сценарий» общения. «Сценарий оформления заказа», «Сценарий подписки на рассылку». Так говорит бизнес, так теперь говорит и интерфейс.
То же самое с релизами. Вместо технического термина появилась история версий. В разделе видно, где черновик, где тестовая версия и что уже опубликовано. Видно, что менялось, и всегда можно откатиться назад.
Мы упростили и сам конструктор. Вместо сложной схемы появился визуальный редактор с блоками – шагами диалога. Их можно перетаскивать, настраивать и тестировать в отдельном окне – или сразу запускать, если бот готов.
Все сценарии собраны в одном списке, и прямо оттуда бота можно запустить. Пользователь нажимает «Опубликовать», выбирает режим – тестовый или продакшен, – а если в настройках есть ошибки, система сразу подсказывает, что нужно исправить, прежде чем выкатывать сценарий.
В старой версии было два верхних таббара, и из-за этого легко было потеряться: вкладки внутри вкладок, непонятно, где ты сейчас и куда нажимать дальше. Мы разложили их в одну линию и убрали второй уровень вложенности.
Как из раздела «Задания» родилось несколько сущностей
По смыслу «задания» позволяли настраивать автоматизированные действия: связать чат-ботов, рассылки и CRM-логику между собой.
Например:
1. Клиент нажал кнопку в чат-боте – в системе создается сделка или событие;
2. В CRM наступает событие – клиенту автоматически уходит сообщение.
Важно, что пользователи не приходили «делать задания» – они приходили вести клиентов, отправлять рассылки, настраивать автоматизацию. Поэтому мы разделили один большой комбайн на понятные сущности.
CRM: отдельный продукт внутри платформы
На базе логики «Заданий» мы выделили полноценную CRM. Взяли за основу табличную модель и переосмыслили ее как самостоятельный продукт.
CRM начинается с разводящей страницы и трех базовых списков:
1. Сделки
2. Обращения
3. Контакты
Отдельно ниже – универсальный блок для всех остальных сценариев, где можно собрать свою структуру под конкретную задачу.
Внутри CRM теперь можно:
1. Работать в таблице или в канбане;
2. Двигать сделки по статусам;
3. Назначать ответственных;
4. Фильтровать, сортировать, создавать записи;
5. Настраивать карточки под себя – добавлять любые поля (сроки, подрядчики, комментарии и т.д.)
И да, важный момент: команда Flomni сама перешла на эту CRM внутри своего продукта. Когда компания пользуется собственным продуктом – это очень круто. И это лучший показатель, что он стал рабочим.
Большая часть того, что раньше называлось «Заданиями», на самом деле была про рассылки
Это стало ясно из разговоров с аккаунт-менеджерами продукта. Поэтому мы просто назвали вещи своими именами и вынесли все в отдельный раздел – «Рассылки».
Вот составляющие раздела:
– Шаблоны – здесь создаются тексты сообщений;
– Каскады – логика отправки по шагам (например: написал в WhatsApp, не ответили – через несколько дней ушли в другой канал);
– Черный список – контакты, которым не отправляем сообщения, чтобы не тратить бюджет;
– Списки для рассылок – по сути, база контактов.
Каналы связи настраиваются в личном кабинете заранее, но если нужного канала нет, его можно добавить прямо из редактора каскадов.
По своей логике рассылки похожи на CRM, но сфокусированы именно на коммуникациях, а не на ведении клиентов.
Сообщения и легаси
Исторически во Flomni был еще раздел «Сообщения». Он остался для старых клиентов и по сути объединял логику прежних «Заданий» и рассылок. Мы привели его к общей визуальной стилистике, но не стали резко убирать, чтобы не ломать привычное.
В новой версии продукта «Задания» и «Сообщения» как отдельные сущности больше не используются – их логика разложена по разделам CRM и Рассылки.
Превращаем «Мегамозг» в AI-суфлера и объединяем личный кабинет с другим сервисом
AI во Flomni появился еще до хайпа вокруг LLM и ChatGPT. Тогда он назывался «Мегамозг» и помогал операторам быстрее отвечать клиентам в чатах с помощью интеллектуальных подсказок.
Сами быстрые ответы были доступны только в сервисе «Диалоги». Там оператор общался с клиентом, нажимал кнопку «применить быстрый ответ» и получал подсказку для ответа.
Но дальше начиналась проблема.
Чтобы эти быстрые ответы работали нормально, AI нужно было настраивать и дообучать: добавлять примеры, управлять логикой, работать с моделями. И все это находилось в другом месте – в личном кабинете Flomni, в отдельном разделе под названием «Мегамозг».
В итоге получалась рваная цепочка:
– Используешь AI в одном сервисе – в диалогах,
– А настраиваешь его в другом – в личном кабинете.
… при этом между ними нет прямой и очевидной связи.
Пользователю нужно было самому догадаться, что «быстрые ответы» в диалогах и «Мегамозг» в ЛК – это одно и то же. Где именно менять поведение AI, как это повлияет на ответы в чате и зачем вообще туда идти, было неочевидно. Из-за этого AI-функционал недоиспользовали.
Так мы сформулировали принцип – настройка и использование AI должны быть связаны и находиться максимально близко друг к другу.
Сначала мы встроили диалоги прямо в личный кабинет и собрали все в одну платформу. Затем отказались от абстрактного «Мегамозга»: вместо него появился AI-ассистент для настройки и обучения, а в чате оператора – AI-суфлер.
Кстати
Внутри раздела с AI есть:
– Готовые шаблоны и ситуативные скрипты (например, под найм);
– Возможность брать их как есть или дообучать под свои сценарии;
– База знаний – по сути, инструкции «как все это собрать и использовать» в продукте;
– Возможность настроить интеграцию с внешними AI-сервисами.
Отдельно внутри AI-ассистента есть дашборд со статистикой – видно, как часто используется AI-суфлер, где он реально помогает, а где нет.
Кстати, AI Flomni знает о клиенте все (или почти все)
Из CRM можно открыть профиль клиента и увидеть всю историю его обращений: чаты, статусы, действия и события по нему.
В этой же карточке доступна AI-сводка: короткое резюме всей переписки и предыдущих обращений. AI собирает главное – о чем говорили, что клиент хотел и на каком этапе сейчас диалог. Это помогает быстро войти в контекст, даже если с клиентом общались разные сотрудники или переписка тянется давно.
Дашборд с аналитикой тоже собран на базе AI
А принцип в разделе такой: сначала ты настраиваешь, что именно хочешь увидеть, и только потом создаешь отчет..
Фильтры можно собрать под себя (например, отчет по загрузке операторов), сохранить – и дальше пользоваться как отдельным отчетом. Избранные отчеты закрепляются, у каждого есть пояснение, что именно он показывает. Их даже можно комментировать – для своего удобства или для сотрудников.
Cобрать виджет за 30 секунд
Кастомные виджеты для сайта теперь собираются прямо из личного кабинета. По сути, это небольшой дизайн-конструктор с иконками, кнопками, цветами, стилями.
Настроить все можно за пару кликов – без дизайнеров и… аккаунт-менеджеров Flomni.
Делаем платформу кастомной
В настройках платформы можно подключать каналы связи, работать с метаданными и CRM-полями; настраивать теги чатов, а если нужного функционала «в коробке» нет – использовать вебхуки.
Если хочется большего…
Flomni дружит с внешними сервисами и CRM через API. А для мобильных приложений есть SDK, чтобы встроить все прямо в ваше приложение.
Flomni HR: отдельный продукт для рекрутинга
Этот раздел заслуживает того, чтобы сделать из него отдельный материал, но пока расскажу о нем. Продукт вырос из эксперимента – в какой-то момент стало понятно, что это уже не фича внутри продукта, а отдельная платформа со своей логикой.
В центре продукта – вакансии, кандидаты и скоринг. Ты создаешь вакансию (в том числе с AI-автозаполнением), задаешь требования и вопросы, а дальше система сама собирает данные и формирует профиль кандидата.
Есть два сценария работы:
1. Через отклики (входящий поток кандидатов),
2. Через активный поиск (сам находишь и оцениваешь).
Вместо десятков резюме – сразу понятная сводка: кто подходит, на сколько процентов и почему. Плюс единый экран, где видно все: кандидаты, этапы, оценки и статусы.
Автономия продукта благодаря дизайн-системе
Мы исключили человеческий фактор на фронтенде: ребята не могут случайно сломать верстку или нарушить стили. Добавление новых фич и продуктов не потребует нашего участия – команда заказчика сделает это сама и без ошибок, а продукт продолжит развиваться силами штатной команды – на базе того, что мы заложили в дизайн-системе.
А что там в планах?
Продукт уже живет и развивается, но нам предстоит еще много чего сделать.
К примеру, глобальный поиск по всему личному кабинету, чтобы нужную функцию или настройку можно было найти из одного поля.
А еще мы заложили основу для мультиаккаунтов. В ближайшее время появится возможность удобно работать с несколькими аккаунтами в одной сессии – переключаться между ними без постоянных входов-выходов.
Вместо итогов
Мы не совершили революцию, а сделали эволюцию без крови. А еще вернули пользователю контроль над работой с платформой – и, надеемся, спокойствие.
А вот что думает об обновлениях сам клиент:
Мы работаем с дизайн-студией ZHIRNOV уже более трёх лет. Александр пришёл к нам по рекомендации — и сразу стало ясно, что это не просто дизайнер, а специалист с продуктовым мышлением и философией self-service: «делаем сложное простым».
За это время мы полностью переработали сайты, личный кабинет, создали собственную дизайн-систему, выстроили процесс работы с макетами и наладили синхронизацию между дизайном и разработкой.
В самом начале Александр сказал: «Если мы начнём работать — ты забудешь о дизайне как о проблеме». Так и вышло. Сегодня студия — это не только Саша, но и дизайнеры, которые разделяют его философию. Текущие задачи выполняют сотрудники агентства, а Александр подключается лично в ключевых вопросах, выполняя роль Art Director. Мы доверяем ему как одному из ключевых людей в компании.
Рекомендую дизайн-студию ZHIRNOV тем, кто хочет не просто красивый дизайн, а партнёра, который думает о продукте.
– Алексей Сивошенко, Flomni
Кстати, продолжить знакомство с нами можно в Dprofile, на нашем сайте или в телеграм-канале. А мы не прощаемся и уже скоро увидимся в новом материале!
