Личный кабинет финтех-сервиса: кейс
Веб-приложение для финансовой компании с разграничением профилей и статистикой по договорам. Реализовано на Laravel и React.

О продукте
Коротко — что это за продукт и для кого мы его делали.
Заказчик — финансовая компания, развивающая новое направление онлайн-сервисов. Ей нужен был личный кабинет, в котором клиент любого типа — физическое лицо, юридическое лицо, самозанятый или ИП — видит свои договоры, статистику по ним и работает с документами в едином интерфейсе.
Мы спроектировали и разработали веб-кабинет с разграничением профилей пользователей: каждый тип аккаунта получает свой набор данных и действий. В кабинете собраны договоры со статусами, сроками и суммами, разделы с документами и чеками, график выплат с расчётом НДФЛ. Интерфейс адаптируется под мобильные устройства.
Задача
Создать веб-кабинет с разграничением профилей пользователей, статистикой по договорам и адаптивной вёрсткой.
Продукт объединяет разные типы клиентов — физлиц, юрлиц, самозанятых и ИП — в одном интерфейсе, поэтому логику доступа и отображения данных нужно было выстроить так, чтобы каждый профиль видел релевантные ему договоры, документы и выплаты, а сам кабинет одинаково удобно работал на десктопе и на смартфоне.
Особенности проекта
Разработка по методологии Scrum — работа шла спринтами с поэтапной передачей результата заказчику: каждый этап включал разработку и тестирование.
Отдельной сложностью стало обеспечение доступа в защищённую сеть заказчика — вопрос решили приобретением модема и настройкой доступов, после чего команда смогла работать с закрытым контуром компании.
Решение и подход
Как мы собрали продукт — от архитектуры до процесса.
Мы построили кабинет на связке Laravel и React: серверная часть на Laravel отвечает за бизнес-логику, разграничение профилей и API, а интерфейс на React обеспечивает быструю и отзывчивую работу с договорами, документами и выплатами.
Работу вели по Scrum — короткими спринтами с поэтапной передачей заказчику, что позволяло показывать результат по частям и корректировать приоритеты. Параллельно решили инфраструктурный вопрос — доступ в защищённую сеть клиента, — чтобы разработка и тестирование шли в реальном контуре компании.
Технологический стек
Инструменты подобраны под задачу продукта.
Почему веб-кабинет, а не раздельные системы
Единый веб-интерфейс объединяет все типы профилей в одном канале: клиенту не нужно использовать отдельные приложения для разных функций. Laravel обеспечивает надёжный бэкенд с разграничением прав доступа по ролям, React — отзывчивый интерфейс без перезагрузок страницы. Альтернатива в виде раздельных систем потребовала бы двойных затрат на поддержку и усложнила бы авторизацию для конечных пользователей.
Функции продукта
Ключевые возможности, которые закрыли задачу бизнеса.
Авторизация и регистрация
Вход и создание аккаунта для пользователей кабинета
Типы аккаунтов
Физическое лицо, юридическое лицо, самозанятые и ИП — свой набор данных для каждого
Статистика по договорам
Статусы, сроки и суммы по каждому договору в одном месте
Документы и чеки
Хранение документов договора и загрузка чеков со ссылкой на них
График выплат
Расчёт выплат с параметрами, притоками/оттоками и НДФЛ, выгрузка графика
Адаптивная версия
Корректная работа кабинета на мобильных устройствах
Как это работает
Ключевые экраны продукта — по шагам.

Кабинет и раздел «Договоры»
Главный экран личного кабинета: слева — навигация с профилем пользователя (Здравствуйте, Иван · Ваш ID) и пунктами Профиль, Договоры, Заявки, Справки, Уведомления со счётчиком (15) и Выход. По центру раскрыта карточка договора №15236485625 с датами открытия, закрытия и окончания, организацией, суммой инвестирования и типом лица.
Внутри карточки — сворачиваемые блоки «Документы» и «Чеки»: клиент видит номер договора, доп. соглашение и загруженные чеки с датами. Слева на скриншоте показан мобильный вид того же меню — кабинет адаптируется под смартфон без потери структуры.

Этапы работы над продуктом
Схема процесса разработки из шести шагов: Бизнес-анализ, Discovery, Аналитика и дизайн, Разработка, Тестирование, Поддержка. Верхний ряд подготовительных этапов показан приглушённо, нижний ряд — активными акцентными кругами.
Визуализация отражает поэтапный подход по Scrum: продукт двигался от анализа и проектирования к разработке, тестированию и поддержке спринтами, с передачей результата заказчику на каждом этапе.

Загрузка чека и график выплат
Экран работы с чеками и выплатами: во всплывающем окне «Загрузка чека» клиент прикрепляет файл (12cdcd.jpeg) или вставляет ссылку на него и отправляет. В основной части раскрыт блок «Чеки» с переключателями Параметры расчёта / Притоки-оттоки / Выплаты.
Во вкладке «Выплаты» показана таблица с датой погашения, типом выплаты, суммой, ставкой и фактическим НДФЛ и признаком оплаты, а внизу — ссылка «Скачать график». Так клиент контролирует движение средств по договору и выгружает график выплат.

Единый продукт: десктоп и мобильные экраны
Итоговая раскладка кабинета: крупный десктопный экран с уведомлениями и списками соседствует с несколькими телефонными мокапами — формы заявок, уведомления, списки договоров и справки в мобильном виде.
Композиция показывает, что один и тот же кабинет одинаково целостно работает на большом экране и на смартфоне: адаптивная вёрстка сохраняет навигацию и данные при переходе на мобильные устройства.
Работа в закрытом контуре заказчика
Проект вели по методологии Scrum: работа шла спринтами, каждый этап включал разработку и тестирование с поэтапной передачей результата заказчику.
Отдельной задачей стало обеспечение доступа в защищённую сеть компании — её решили приобретением модема и настройкой доступов, после чего команда работала непосредственно в закрытом контуре клиента.
В цифрах
- Веб-ЛК на Laravel и React — единый интерфейс для клиентов компании.
- Регистрация и авторизация: e-mail и пароль, восстановление доступа.
- Типы профилей: физическое лицо, юридическое лицо, самозанятый, ИП.
- Статистика по договорам: статусы, суммы, сроки в личном кабинете.
- Адаптивная вёрстка: кабинет корректно работает на мобильных устройствах.
- Поэтапная сдача функционала по Scrum-спринтам — без единого монолитного релиза.
Архитектура и персональные данные
Кабинет обрабатывает персональные данные клиентов финансовой компании. Доступ к системе организован через защищённое соединение; данные хранятся в контуре заказчика с соблюдением требований локализации.
Соответствие: 152-ФЗ, оператор ПДн в реестре РКН, ИСО 27001 (внедрение), локализация персональных данных. Требования опираются на 152-ФЗ; статус оператора проверяется в реестре операторов ПДн РКН.
Часто задаваемые вопросы
Что такое личный кабинет финтех-сервиса?
Сколько занимает разработка личного кабинета?
Как обеспечивается безопасность финансовых данных?
Поддерживает ли кабинет разные типы клиентов?
Есть ли мобильная версия?
Наши клиенты
Компании из ритейла, медтеха, логистики и электронной коммерции, которым мы помогли с цифровыми продуктами.
Услуги веб-студии YuSMP Group
Полный спектр разработки — от нативных мобильных приложений до веб-платформ, дизайна и IT-аудита. Выберите направление или закажите проект под ключ.
Мобильная разработка
Нативные и кросс-платформенные приложения для iOS и Android под задачу и бюджет.
Подробнее →Разработка мобильных приложений под iOS
Нативные приложения для iPhone и iPad на Swift и SwiftUI.
Подробнее →Разработка мобильных приложений под Android
Приложения для Android на Kotlin и Jetpack Compose.
Подробнее →Кроссплатформенный подход
Одно приложение сразу на iOS и Android на Flutter.
Подробнее →Веб - разработка
SPA, порталы и веб-платформы на React / Next.js и Node.
Подробнее →Backend-разработка
Серверная часть, API, базы данных и интеграции на Node.js, PHP и Python.
Подробнее →Разработка под ключ
Продукт под ключ: аналитика, дизайн, разработка и запуск.
Подробнее →MVP
Быстрый запуск ядра продукта, чтобы проверить гипотезу без лишних затрат.
Подробнее →Тестирование
Ручное и автоматизированное тестирование — стабильный релиз на всех устройствах.
Подробнее →UI/UX-дизайн
Исследование, прототип и дизайн-система — интерфейсы, которыми удобно пользоваться.
Подробнее →Прототипирование
Кликабельный прототип для проверки идеи до разработки.
Подробнее →Создание сайтов
Корпоративные сайты, лендинги и интернет-магазины под ключ.
Подробнее →IT - аудит
Аудит ИТ-инфраструктуры, кода и безопасности.
Подробнее →SEO‑продвижение
Вывод сайта в топ Яндекса и Google — трафик и заявки из поиска.
Подробнее →Контекстная реклама
Яндекс Директ — заявки с первого дня и контроль цены лида.
Подробнее →SMM‑продвижение
Соцсети и таргет — узнаваемость бренда, комьюнити и заявки.
Подробнее →Наши кейсы
Ещё продукты, которые мы спроектировали и запустили.

LiMP
Мобильный VPN для iOS и Android: WireGuard‑стек, no‑logs и сплит‑туннелирование.

Юнилаб
Приложение для сети медлабораторий: онлайн‑запись, результаты анализов, каталог услуг.

SignatoryPro
Удалённое подписание документов с юридической силой, цифровой архив и CRM.
Блог наших экспертов
Разбираем разработку и технологии простым языком.
Обсудим ваш проект?
Расскажите задачу — за 1–2 дня вернёмся с оценкой сроков, бюджета и составом команды.
Хотите похожий проект — обсудим
Расскажите задачу — за 1–2 дня вернёмся с оценкой сроков, бюджета и составом команды.













