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

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

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

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

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

Сократили TTM продукта за счет предварительного тестирования прототипов сервиса. Тем самым разработчикам уходили проверенные решения, которые закрывают работу пользователей (jtbd).
_______________________

We designed the UX for the Neskuchny Finance IT platform (the "Selecting CFO to client's request" outline, part of the "CFO for small and medium businesses" outline). UX adjusts itself to user behavior patterns. CFOs work in different programs throughout the day: Google Sheets, Fintablo, etc. The IT platform interfaces take into account the UX of these services and contain similar solutions.

We developed the design system for the service (more than 685 components and 120 styles). Solved by means of resource management the problem of design lagging behind development. Now design is ahead of development by one major release.

We reduced the development team's inhouse labor costs to implement scripts by:
— introducing design system integrated with front-end;
— selecting off-the-shelf components of the design system from React-compatible libraries;
— testing dynamic prototypes on users before forwarding the design to the development team (corridor tests);
— designing interfaces according to JTBD.

We reduced the TTM of the product by pre-testing service prototypes. Thereby, developers were left with proven solutions that comply with the user experience (jtbd).

Как проект изменил жизнь пользователей

На стадии дисковери Head of Product компании «Нескучные финансы» (НФ) Дарья Ямная провела ряд качественных и количественных исследований с целью выявления точек влияния на ключевые метрики продукта.

На базе проведенного исследования был спроектирован процесс «Подбора финдиров под запрос клиентов». Это дало следующее:
1. Рост показателя «Норма управляемости». Высвободили 25 часов времени в месяц участников процесса: кураторов, администраторов, наставников и других специалистов.
2. Годовой рост показателя Retention финансовых директоров на 10%. Теперь каждый партнер гибко управляет своей нагрузкой, а следовательно, доходом. Сокращено время ожидания клиента, в фокусе внимания — потребности финдиректоров.
3. Годовой рост показателя Retention клиентов от 6 до 30% в зависимости от отрасли бизнеса. Достигается за счет более точного подбора финдира под клиента, сокращения времени на подключение специалиста.

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

At the discovery stage, NF Head of Product Daria Yamnaya conducted a number of qualitative and quantitative studies to identify points of influence on key product metrics.

Based on the research conducted, the process of "Selecting CFOs to Customer Request" was designed. This resulted in:
1. An increase in the "Manageability Rate" metric. Freed up to 25 working hours per month of the process participants: supervisors, administrators, mentors and other specialists.
2. A 10% year-over-year increase in the CFO Retention rate. Each partner now has the flexibility to manage their workload, and therefore their income. Client waiting times have been reduced and the focus is on the needs of the CFOs.
3. Annualized growth in Client Retention from 6 to 30% depending on the business sector. It was achieved due to a more accurate selection of a CFO for the client, and due to reduced time needed to have a specialist involved.

At a minimum, the economic effect for the current number of partners is 9 million net profit per year. The bigger the number of partners, the higher this effect will be.

Бизнес-задача и ее решение

О компании

«Нескучные финансы» предоставляет Virtual CFO (тренд западного финтеха) — финансового директора на аутсорсе. Сейчас на сопровождении более 1000 компаний из более чем 20 стран: России, Чехии, Беларуси, Казахстана, ОЭА, Африки и др. И более 500 финансовых директоров, которые живут в разных частях России, Швейцарии, Белоруссии, Казахстана и т. д. и выстраивают управленческий учет в компаниях клиентов.

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

О проекте

Экспертная цифровая экосистема «Нескучные финансы» позволяет автоматизировать процесс ведения финансового учета компаний-клиентов.

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

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

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

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

Проблематика разработки

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

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

IT-платформа должна быть узнаваемой и соответствовать брендбуку компании НФ.

Задача

Спроектировать UX двух контуров ИТ-продукта компании: «Подбор финансового директора под запрос клиента», «Панель администрирования». Создать дизайн-систему сервиса, подготовить дизайн-макеты. Выйти на уровень, когда дизайн опережает разработку на один крупный релиз.

Цель контура «Подбор финдира под запрос клиента» — соединить максимально быстро и эффективно свободного финдира с клиентом, обеспечив рост ключевых метрик продукта: норма управляемости (время участников процесса), рост Retention финдиров и Retention клиентов.

Цель «Панели администрирования» — сокращение трудозатрат на сопровождение продукта после публичного запуска за счет предоставления пользователям возможности гибкого управления правами доступа и справочниками.

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

Решение

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

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

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

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

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

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

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

За основу взяли брендбук клиента: цвета, шрифты, tone of voice бренда, иллюстрации фирменного гуся и на основе заранее согласованного мудборда разработали дизайн-концепцию на примере самого нагруженного экрана. Показали, как могут использоваться фирменные цвета (красный оставляем в лого и важных маркерах, синий используем для кнопок, белый — для фона, черный — для текста). Гуся добавляем в уведомления как связь с дружелюбным характером бренда.
_______________________

About the company

Neskuchny Financy (NF) provides Virtual CFO (a trend in Western fintech), i.e. an outsourced CFO. Now more than 1000 companies from more than 20 countries: Russia, Czech Republic, Belarus, Kazakhstan, Kazakhstan, OEA, African countries and so on use this service. And more than 500 CFOs who live in different parts of Russia, Switzerland, Belarus, Kazakhstan, etc. work for the service and manage financial accounting in client companies.

The company helps to make clients' business manageable, to avoid cash gaps and debts, to establish financial planning and to find points for profit growth. As a result, client companies grow and gain financial stability, employees receive stable paychecks, and new jobs open up.
NF provides CFOs with its management accounting technology, infrastructure for service delivery, professional training, mentors and coaches, and provides clients to CFOs.

About the project

Expert digital ecosystem "Neskuchny Financy" allows to automate the process of financial accounting of client companies.

The service provides:
— high quality of services regardless of the qualifications of the leading project specialists (CFOs);
— transparency of accounting and control over the work of the financier;
— quick receipt of statistics on the financial condition of the client company without interrupting the current work.

Issues to be resolved

Before the company started developing its own product it had an information system built on a set of interconnected google tables. Over time, this infrastructure began to fail due to the large amount of data and numerous participants (more than 1000 users at a time). Also, over time, a number of bottlenecks were identified in the tables that were preventing exponential growth. Therefore, the company entered into a Digital Transformation process to scale to 250,000 clients retaining high quality of service.

The solution was to develop a proprietary IT platform to scale to the required number of clients, with a step-by-step elimination of the bottlenecks of the current model. The platform is being developed on the basis of Big Data and machine learning technologies, which will automate decision-making processes and data analysis, such as forecasting financial indicators and determining the optimal strategy for managing the finances of client companies.

Development challenges

The timeframe for design development was limited: we needed it "yesterday". At the moment of contacting us, the client was already customizing the development environment and working out the product architecture, but there were no designers in the team.

Front-end development had to be done according to the design system using ready-made React-compatible components to reduce development costs and simultaneously build product modules in a unified style. But there was no design system, it had to be developed.

The IT platform needed to be recognizable and in line with the NF company brandbook.

Task
To design the UX of two contours of the company's IT product: "Financial Director Selection for Client's Request", "Administration Panel". To create the design system of the service, prepare design layouts. To reach a level where design is ahead of development by one major release.

The goal of the "Selecting CFOs to Customer Request" outline is to connect as quickly and efficiently as possible an availablr financier with the client, ensuring growth of key product metrics: manageability rate (time spent by process participants), growth of CFOs Retention and Clients’ Retention.

The goal of the Admin Panel is to reduce the labor costs of maintaining the product after the public launch by providing users with the ability to flexibly manage access rights and directories.

The Discovery stage was performed by NF's Head of Product, the results of the stage formed the basis for the design of these outlines. This allowed the UX of the interface to be focused on achieving the product's target metrics.

Solution

The first release contained two main sections: partners and customers. The functionality in them was intended to influence the growth of key metrics and to decrease the CFOs' workload. Let's look at the key features of the service below.

1. Structure of partner groups (CFOs)
The polar star metric for Neskuchny Financy is the dynamics of net profit growth of the clients' company, which directly depends on the CFO's experience and skills. Therefore, each partner (CFO) is assigned supervisors, tutors, mentors, personal managers and other specialists who accompany the CFO and the client at all stages of their interaction.
All CFOs are connected in partner groups. Thanks to this arrangement, a client having connected to the NF receives the expertise of several highly qualified CFOs and the accumulated experience of solved cases of all NF clients as a whole (knowledge base).

The section in the system acts as a repository of up-to-date information on all CFOs and includes such data as: regions and time zones, qualification level, specific skills, experience with different clients and products, current workload, personal career track, progress in NF internal training.

2. Clients and Client Distribution Panel
The CFO’s process with his clients is similar to a driver in Ya.Taxi. As soon as one passenger has left (the client has disconnected), the driver (CFO) gets a new one. For this purpose, the system has a database of clients and the Client Distribution Panel, which gives an understanding of the current load of CFOs, and it also helps to plan load. A CFO specifies the desired number of clients and products that they want to manage simultaneously.

#vacancies
The number of seats in each CFO group is limited. Therefore, as new groups are formed and seats in current groups become available, new vacancies are created. New CFOs are connected to these vacancies. CFOs are heavily screened for hard and soft skills to join the NF. Out of 4000 applications about 40 people pass. The "Vacancies" section is designed to manage new partner connections.

#statistics
NF needs to maintain a balance between clients and CFOs. Therefore, the fulfillment of customer and partner connection plans is monitored in real time to make prompt decisions on adjustments. Neural networks are trained on data from this section in order to maintain the balance automatically.

System design

We took the client's brand book as a basis and used colors, fonts, tone of voice of the brand, illustrations of the corporate mascot (goose). On the basis of a pre-agreed moodboard we developed a design concept, taking the most loaded screen as an example. We showed how brand colors can be used (we retain the red color in the logo and important markers, use blue for buttons, white for background, black for text). We add the goose mascot to notifications to highlight the friendly character of the brand.

Крафт (мастерство), реализация, технические детали

# CRUDL-подход
В работе над проектом придерживались подхода CRUDL (Create — Read — Update — Delete — List — «Создание — Чтение — Редактирование — Удаление — Список»).
Например: спроектировали карточку профиля пользователя и делаем варианты, как она выглядит в списке, когда создается, просматривается, редактируется, удаляется. Даже таблица проходила цикл CRUDL. Каждая ячейка наполнялась информацией, просматривалась, редактировалась, удалялась, занимала свое место в общем списке. Все спроектированное тестировалось на финдиректорах. А в конце разрабатывался дизайн.

# Коридорные тестирования
В рамках работы над проектом проводили коридорные тестирования, чтобы проверить, насколько эффективны предложенные интерфейсные решения. Для каждого цикла исследований разрабатывали методику и задания. Проводили удаленные тестирования на респондентах и обрабатывали результаты. После обсуждали результаты с Head of Product компании НФ и совместно определяли, какие правки сразу вносим в макеты, а какие отправляем в бэклог развития проекта.

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

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

# CRUDL approach
While working on the project we followed the CRUDL (Create-Read-Update-Delete-List) approach.
For example: we designed a user profile card and made variants of how it looks in the list, when it is created, viewed, edited, deleted. Even the tables went through a CRUDL loop. Each cell was filled with information, viewed, edited, deleted, and then took its place in the overall list. Everything was tested on financial directors. And at the end, the design was developed.

# Corridor testing
We conducted corridor tests as part of the work on the project, to check how effective the proposed interface solutions were. For each cycle of research we developed a methodology and tasks. We conducted remote tests on respondents and processed the results. Afterwards we discussed the results with NF’s Head of Product and together decided which variants we would use immediately and which ones we would send to the backlog of the project development.

# Rules for tables
The project uses multifunctional tables with different types of cells. For each of them we have defined rules of behavior: what will happen to the cell by hover, by clicking, when editing, how errors will be handled.

# Design system
It consists of 685 components and 120 styles.
The design system collects and describes the appearance, states and behavior of all elements. Colors are the basis: we selected them and made a description in which case every color and every cell filling is used. It was important for developers to customize the elements correctly. Then we collected the typography. And then we developed such organisms as icons, buttons and cells. Unique elements that were not included in the design system were worked out separately.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Head of Product компании НФ Дарья Ямная положительно оценила такой подход: «Это крутое и нестандартное решение, которое показывает хороший результат и ускоряет разработку дизайна».

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

Проект был завязан на метрике TTM (Time to Market), т. е. времени от начала разработки идеи до конечного запуска решения и его выхода на рынок. Поэтому часть спроектированных макетов и разделов не ушли в работу или были переделаны на более простые альтернативы. Это позволяло быстро отдавать макеты в разработку и увеличивало скорость выпуска платформы.
_______________________

In order to optimize the time for the development of prototypes and the design system we involved two specialists who worked almost in parallel. The UX designer worked out the logic and functionality of the service and conducted corridor tests.
The UI-designer created and assembled the design system according to the agreed layouts.

NF's Head of Product Daria Yamnaya positively evaluated this approach:
"This is a cool and non-standard solution that shows a good result and speeds up design development".

Since the project deadlines were tight, we tried to approach each task sensibly. The design system was built not from scratch, but on the basis of our own template "Blanc". We closely cooperated with the developers on refinements, it gave us the opportunity to remove all that was unnecessary from the prototypes and adapt the design to speed up the release.

The project was tied to the TTM (Time to market) metric, i.e. the time from the beginning of idea development to the final launch of the solution and its release to the market. Therefore, some of the designed layouts and sections did not go to work or were redesigned to simpler alternatives. Thanks to that we could quickly forward the mockups to the development team and increased the speed of platform release.

Скриншоты