Личный кабинет инвестора «А-Капитал»: весь портфель и больше 15 операций в одном окне

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

«А-Капитал» — управляющая компания: шесть открытых и три закрытых паевых фонда, доверительное управление, инвестиционное консультирование.

Задача.
Личный кабинет, в котором клиент видит все свои вложения и операции, узнаёт о продуктах компании и покупает их онлайн.

Решение.
Мы с нуля спроектировали и разрабатываем новый кабинет инвестора и административную панель для команды УК.

Один кабинет обслуживает пять типов продуктов и больше 15 видов операций: регистрация через Госуслуги, портфель на графиках, единый пошаговый помощник операций с подписанием кодом, оплата по СБП, чат с сотрудниками УК.

Кабинетом будут пользоваться тысячи клиентов.

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

Клиентам
— Весь портфель — на одном экране. Сумма, финансовый результат и доходность за период от месяца до всего времени. Графики стоимости чистых активов и доходности с отметками пополнений и выводов, круговая диаграмма по продуктам

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

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

— Регистрация без ручного ввода. Паспорт, адреса, ИНН и СНИЛС приходят из Госуслуг, клиенту остаётся задать логин и пароль. Если данные расходятся с карточкой клиента, кабинет показывает оба значения и просит выбрать

— Оплата не выходя из кабинета. СБП по QR-коду, на смартфоне — сразу в приложение банка. Реквизиты в формах заполняются по БИК

—Связь с УК рядом с портфелем. Чат с сотрудниками с темами и вложениями, уведомления, новости, FAQ, инструкции и опросы об оценке сервиса

— С любого устройства. Адаптивные версии для 1440, 1024, 768 и 320 px, светлая и тёмная тема


Сотрудникам УК
— Клиент виден целиком. Карточка клиента с операциями, историей действий и продуктами, чат с ним. Сотрудник с нужной ролью может войти в кабинет от имени клиента, чтобы помочь ему

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

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

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

Решение
Новый кабинет и административная панель к нему, построенные с нуля. Т-Студия отвечает за проектирование и дизайн, frontend, часть backend и управление проектом. Бизнес-логика операций остаётся в учётной системе заказчика на 1С: кабинет получает из неё портфель, операции и формы


Как кабинет работает на бизнес УК:
Канал продаж. Раздел «Что купить» показывает продукты, открытые для продажи в сегменте клиента, с доходностью, риск-профилем и инвестиционным горизонтом. Кнопка покупки ведёт сразу в операцию. По доверительному управлению можно заключить договор или оставить заявку на консультацию в чате

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

Актуальные данные клиентов. Если сведения о клиенте устарели, кабинет просит обновить их, прежде чем открыть операции. Так УК поддерживает данные в актуальном состоянии, как требует законодательство о ПОД/ФТ

Управление коммуникацией. Рассылки по выбранным клиентам, шаблоны уведомлений, чаты, карточки клиентов, реестр операций

Данные для решений. Число пользователей, входы и неудачные входы, незавершённые регистрации, устройства и география, самые частые операции, просмотры страниц оплаты по СБП. Разрезы — по возрасту, полу, остаткам, продуктам, риск-профилю, квалификации, сегменту, банку и каналу привлечения


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

Макеты всех страниц и четырёх адаптивов.
Вёрстка, frontend и backend, интеграции с системами заказчика и Госуслугами.
Административная панель на Strapi и доработка сервера авторизации.
Тестирование, развёртывание на сервере, проектная документация.
Дополнительные этапы: расширение операций, регистрация через Госуслуги с актуализацией данных, улучшение опросов.

Ожидаемый эффект. Встроенная статистика позволит измерять эффект с первого дня: какие 2–3 показателя заказчик считает главными — уточнить (например, доля операций, поданных онлайн, или число незавершённых регистраций)

Планы запуска и внедрения. Запуск для всех клиентов сразу или поэтапно, переход клиентов из старого кабинета, обучение сотрудников работе с панелью — уточнить. Развитие после запуска и участие Т-Студии в поддержке

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

Регистрация одним запросом. Данные из Госуслуг проходят через сервер авторизации и одним запросом уходят в учётную систему. Она заводит или находит карточку клиента и сообщает, нужны ли обязательные действия, например обновить устаревшие данные. Повторный вход дубликатов не создаёт. Пока обязательная операция не завершена, остальные разделы закрыты, а кнопки создания операций скрыты, а не отключены.

Безопасность и надёжность. Сервер авторизации — Keycloak, его страницы оформлены в дизайне кабинета через Keycloakify. Второй фактор на выбор — приложение-аутентификатор, SMS или email; при подписании операции код запрашивается повторно. В настройках видна история входов. Персональные данные хранит только учётная система заказчика, кабинет их не дублирует. Если учётная система недоступна, кабинет показывает это, а не пустой интерфейс. О технических работах предупреждает плашка — для всех или для выбранных групп.

Данные и интеграции. Госуслуги (ЕСИА), учётная система заказчика на 1С, справочник адресов ФИАС, оплата по СБП, автозаполнение реквизитов по БИК.

Административная панель на Strapi: роли и матрица доступов, карточки клиентов, блокировка, выгрузка в Excel, реестр операций, пошаговый помощник рассылок, шаблоны уведомлений, чаты, FAQ, статистика.

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

Стек. React и TypeScript, Node.js, Strapi, MySQL, Java, Keycloak и Keycloakify, ЕСИА

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

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

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

Требования регулятора — часть интерфейса. Финансовый кабинет обязан показывать раскрытие информации, меры защиты финансового рынка, ответы на вопросы Банка России, лицензии и дисклеймеры. Ссылки на них размещены на главной и в подвале, согласия клиента — на шаге подписания каждой операции.

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

Скриншоты