Цифровая экосистема для AI-управления финансами для компании «Нескучные финансы»

Цифровая экосистема для AI-управления финансами для компании «Нескучные финансы»

B2B-сервис
UX-проектирование
Highload-сервис
UX-исследование
Автоматизация процесса
Цифровизация бизнеса
Дизайн-система
Примечание

Наша команда работала над частью IT-платформы: контур «Подбор финансового директора под запрос клиента» и часть контура «Финансовый директор для малого и среднего бизнеса».

Содержание кейса

Главное о кейсе

#1

Спроектировали UX для IT-платформы Нескучных финансов, который подстраивается под паттерны поведения пользователей. Интерфейсы учитывают UX других сервисов, в которых работают финансовые директора (Google Sheets, Финтабло), и содержат похожие решения.

#2

Разработали дизайн-систему сервиса (больше 685 компонентов и 120 стилей). Решили проблему с отставанием дизайна от разработки за счёт управления ресурсами. Дизайн стал опережать разработку на один крупный релиз вперёд.

#3

Снизили трудозатраты инхаус-команды разработки на реализацию сценариев за счёт:

  • дизайн-системы, интегрированной с фронтом;
  • подбора готовых компонентов дизайн-системы из библиотек, совместимых с React;
  • тестирования динамических прототипов на пользователях до передачи дизайна в разработку (юзабилити-тестирования);
  • проектирования интерфейсов по JTBD (подход, при котором на первое место ставится «работа» пользователя).

#4

Сократили time to market (TTM) продукта за счёт предварительного тестирования прототипов сервиса. Разработчикам уходили проверенные решения, которые закрывают «работу» пользователей (JTBD).

Награды

⭐️ Tagline Awards 2023 — бронза в номинации «Лучший дизайн интранета», шорт-лист номинации «Лучшее юзабилити». Кейс на сайте премии.

⭐️Workspace Digital Awards 2024 — 1 место в номинации «Сайты / Финансы, страхование и инвестиции». Кейс на сайте премии.

А теперь обо всём по порядку.

О клиенте

Нескучные финансы (НФ) представляет собой тренд западного финтеха — Virtual CFO (финансовый директор на аутсорсе).

logo-lanta

На 2023 год в компании:

  • 1000+ клиентов из более 20 стран: России, Чехии, Беларуси, Казахстана, ОЭА и др.
  • 500+ финансовых директоров, которые выстраивают управленческий учёт в компаниях клиентов. Они также живут в разных частях России, Швейцарии, Беларуси, Казахстана и в других странах.

Своим клиентам НФ помогает сделать бизнес управляемым, не попадать в кассовые разрывы и долги, наладить финансовое планирование и найти точки роста прибыли. Как результат, компании клиентов растут и получают финансовую стабильность, сотрудники получают стабильные выплаты, а также открываются новые вакансии.

Финансовым директорам НФ предоставляет свою технологию управленческого учёта, инфраструктуру для предоставления услуг, профессиональное обучение, наставников и менторов, обеспечивает клиентами.

О проекте

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

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

Собственная цифровая экосистема автоматизирует процесс ведения финансового учёта компаний-клиентов, обеспечивая:

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

Платформа разрабатывается на основе технологий Big Data и машинного обучения. Это позволяет автоматизировать процессы принятия решений и анализа данных, такие как прогнозирование финансовых показателей и определение оптимальной стратегии управления финансами компаний-клиентов.

Задача

У клиента были ограниченные сроки на разработку дизайна: он нужен был «ещё вчера». На момент обращения к нам команда НФ уже настраивала среду разработки и прорабатывала архитектуру продукта, а дизайна и дизайнеров в команде не было.

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

Ещё одним требованием по части дизайна была узнаваемость IT-платформы и соответствие брендбуку компании.

В итоге нам предстояло:

  • спроектировать UX IT-платформы для двух контуров;
  • создать дизайн-систему сервиса, подготовить дизайн-макеты;
  • выйти на уровень, когда дизайн опережает разработку на один крупный релиз.

Примечание

Стадия дискавери была выполнена Дарьей Ямной — Head of Product компании НФ. Результаты исследования стали основой для проектирования и дизайна контуров, сфокусировали работу и функционал интерфейса на достижении целевых метрик.

Предпроектная аналитика

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

case-page01
Роли
case-page01
Сценарии

Для сложных сценариев разрабатывали и проговаривали с бизнес-аналитиком клиента User flow. Это помогало найти «тонкие» моменты в нашем понимании процессов и избежать проблем при релизе.

Отдельно прописывали:

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

case-page01
Пример User flow

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

case-page01
Информационная архитектура сценария

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

Чтобы соблюдать связность элементов, начали писать редполитику — правила коммуникации с пользователем. Например, описали правила названия форм. Документ помог соблюсти консистентность в текстах на всей платформе.

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

Проектирование

В работе над проектом придерживались подхода CRUDL (Create — Read — Update — Delete — List, или Создание — Чтение — Редактирование — Удаление — Список). 

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

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

Юзабилити-тестирование

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

Выборка

Для тестирования выбрали раздел «Структура». В нём будет работать 3 типа аудитории: финансовый директор, его руководитель (или наставник) и HR. У сотрудников существуют как пересекающиеся задачи, так и специфические.

Пример общей задачи: «Смотреть структуру компании, кто в какой группе работает, кто руководитель».

Пример специфической задачи: «Открыть вакансию» или «Назначить на роль наставника».

Так как существуют пересекающиеся задачи и мы находились в условиях ограниченных сроков, то в качестве респондентов привлекли по 3 сотрудника на 1 тип аудитории.

Примечание

3 респондента — это минимальное количество респондентов, которое позволяет получить репрезентативные данные в качественном исследовании.

Таким образом:

  • общие задачи были протестированы на 9 респондентах;
  • специфические задачи протестированы на 6 респондентах.

Тестирование

Перед нами стояли задачи:

  • понять, помогает ли интерфейс достигать целей;
  • собрать информацию, как улучшить интерфейс перед передачей его в дизайн.

В качестве формата мы выбрали удалённое модерируемое юзабилити-тестирование, так как сотрудники компании находятся в разных уголках страны, иногда даже за её пределами. Респондент открывал ссылку с интерактивным прототипом в Figma и выполнял задание.

Что было важно зафиксировать на тесте:

  • Результативность. Справился ли респондент с задачей.
  • Эффективность. Какие именно трудности встречались.
  • Особенности в поведении респондентов.
  • Какие эмоции и вопросы возникают.

Оценивали продукт с помощью метода «мысли вслух» и измеряя субъективную удовлетворенность при помощи SEQ (Single Ease Question). Пользователю предлагалось после каждого задания оценить его по шкале от 1 до 5, ответив на вопрос: «Насколько сложно было справиться с этим заданием?». Это помогло увидеть степень критичности ошибки для пользователя.

case-page01
Пример ответов респондентов на SEQ
Примечание

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

Тестирование длилось 3 дня. Каждый день по 3 интервью длительностью около 1 часа.

Перед тем как начать исследование, провели 2 пробных теста на своих коллегах, чтобы проверить работу динамических прототипов. Благодаря такой подготовке исправили все шероховатости и не отвлекали респондентов от выполнения заданий проблемами в работе прототипов.

Анализ

При анализе результатов теста поделили все ответы на 3 категории: плюсы, минусы, идеи — и записали их на стикерах. В сумме получилось 120 стикеров.

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

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

После внесения правок провели ещё одно тестирование с руководителем всего направления, чтобы понять, в правильном ли направлении двигаемся.

Оптимизация процесса работы

Для оптимизации времени на разработку прототипов и дизайн-системы подключили двух специалистов, которые работали практически параллельно. 

  • UX-проектировщик прорабатывал логику и функционал сервиса, проводил тестирования.
  • UI-дизайнер создавал и собирал дизайн-систему по согласованным макетам.

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

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

Дарья Ямная
Head of Product компании НФ

Дизайн платформы

Сначала изучили материалы, которые были у клиента на брендовой платформе: цвета, шрифты, tone of voice бренда, иллюстрации фирменного гуся.

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

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

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

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

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

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

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

Функционал платформы

Первый релиз цифровой платформы содержал два ключевых раздела: «Партнёры» (= финансовые директора) и «Клиенты». Задача функционала этих разделов — повлиять на рост ключевых метрик и разгрузить финансовых директоров. 

Ниже рассмотрим основные разделы сервиса.

#1. Структура (Сотрудники)

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

Все финдиры объединены в структуру групп. За счёт этого клиент, подключившись к НФ, получает экспертизу нескольких финансовых директоров высокой квалификации и накопленный опыт решённых кейсов всех клиентов НФ в целом (база знаний).

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

#2. Клиенты (Панель распределения клиентов)

Процесс работы у финансового директора с его клиентами похож на водителя в Я.Такси. Как только один пассажир вышел (клиент отключился), водитель (финансовый директор) получает нового. Для этого в системе предусмотрена база клиентов и Панель распределения клиентов, которая даёт понимание о текущей нагрузке финдиректоров, и в ней же есть функционал планируемой загрузки. В нём финансовый директор указывает желаемое количество клиентов и продуктов, которое он хочет вести одновременно.

#3. Вакансии

Количество мест в каждой группе финансовых директоров ограниченно. Поэтому по мере открытия новых групп и высвобождения мест в текущих группах открываются вакантные места. На эти места подключаются новые финансовые директора. Для подключения к НФ финдиры проходят серьёзный отбор по хард- и софт-скилам. Из 4000 откликов проходят около 40 человек. Раздел «Вакансии» спроектирован с целью управления подключениями новых финансовых директоров.

#4. Статистика

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

Результат

В итоге спроектированный процесс «Подбора финдиров под запрос клиентов» дал следующие результаты:

1. Рост показателя «Норма управляемости». Высвободили 25 часов времени в месяц участников процесса: кураторов, администраторов, наставников и других специалистов.

2. Годовой рост показателя «Retention финансовых директоров» на 10%. Теперь каждый финдир гибко управляет своей нагрузкой, а следовательно, доходом. Сокращено время ожидания клиента, в фокусе внимания — потребности финдиректоров.

3. Годовой рост показателя «Retention клиентов» от 6 до 30% в зависимости от отрасли бизнеса. Достигается за счёт более точного подбора финдира под клиента, сокращения времени на подключение специалиста.

Минимальный экономический эффект на текущем количестве финансовых директоров: 9 млн чистой прибыли в год. Чем больше количество финдиров, тем выше этот эффект.

Над проектом работали

icon
Евгения
Аккаунт-менеджер
icon
Аня
Руководитель проектов
icon
Ирина
UX Team-lead
icon
Катя
UX-аналитик
icon
Серёжа
UX-аналитик
icon
Стёпа
UX/UI-дизайнер
icon
Маша
UI-дизайнер
icon
Данила
UI-дизайнер

Другие кейсы

Корпоративный сайт для «Сибирской горно-металлургической компании»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1

Продуктовый листинг и товарный лендинг для «Ангстрема»

UX-проектирование
UI-дизайн
E-commerce
+ ещё 3

Лендинг к 10-летию Российского научного фонда

UI-дизайн
Спецпроект
Анимации
+ ещё 2

Корпоративный сайт для «Нового Втормета»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Сайт для новой государственной компании «Роскадастр»

Сайт для новой государственной компании «Роскадастр»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Обсудить проект