Яндекс.Метрика
Услуги Портфолио Контакты БлогНовости +7 (800) 511‑32‑27 Обсудить проект
Финтех · Личный кабинет · Web + адаптив

Личный кабинет финтех-сервиса: кейс

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

Единый личный кабинет для всех типов клиентов4 типа профилей: физлицо, юрлицо, самозанятые, ИПСтатистика по договорам: статусы, сроки и суммыЗагрузка чеков и график выплат с расчётом НДФЛАдаптивная вёрстка для мобильных устройствПоэтапная сдача по Scrum-спринтам
Личный кабинет для финтех-сервиса — обложка кейса
Личный кабинет для финтех-сервисаФинтех / финансовые услуги
Клиент
Финансовая компания (по соглашению не раскрывается)
Отрасль
Финтех / финансовые услуги
Платформы
Web + адаптив
Методология
Scrum, поэтапная сдача

О продукте

Коротко — что это за продукт и для кого мы его делали.

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

Мы спроектировали и разработали веб-кабинет с разграничением профилей пользователей: каждый тип аккаунта получает свой набор данных и действий. В кабинете собраны договоры со статусами, сроками и суммами, разделы с документами и чеками, график выплат с расчётом НДФЛ. Интерфейс адаптируется под мобильные устройства.

Задача

Создать веб-кабинет с разграничением профилей пользователей, статистикой по договорам и адаптивной вёрсткой.

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

Особенности проекта

Разработка по методологии Scrum — работа шла спринтами с поэтапной передачей результата заказчику: каждый этап включал разработку и тестирование.

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

Решение и подход

Как мы собрали продукт — от архитектуры до процесса.

Мы построили кабинет на связке Laravel и React: серверная часть на Laravel отвечает за бизнес-логику, разграничение профилей и API, а интерфейс на React обеспечивает быструю и отзывчивую работу с договорами, документами и выплатами.

Работу вели по Scrum — короткими спринтами с поэтапной передачей заказчику, что позволяло показывать результат по частям и корректировать приоритеты. Параллельно решили инфраструктурный вопрос — доступ в защищённую сеть клиента, — чтобы разработка и тестирование шли в реальном контуре компании.

Технологический стек

Инструменты подобраны под задачу продукта.

Почему веб-кабинет, а не раздельные системы

Единый веб-интерфейс объединяет все типы профилей в одном канале: клиенту не нужно использовать отдельные приложения для разных функций. Laravel обеспечивает надёжный бэкенд с разграничением прав доступа по ролям, React — отзывчивый интерфейс без перезагрузок страницы. Альтернатива в виде раздельных систем потребовала бы двойных затрат на поддержку и усложнила бы авторизацию для конечных пользователей.

Функции продукта

Ключевые возможности, которые закрыли задачу бизнеса.

1

Авторизация и регистрация

Вход и создание аккаунта для пользователей кабинета

2

Типы аккаунтов

Физическое лицо, юридическое лицо, самозанятые и ИП — свой набор данных для каждого

3

Статистика по договорам

Статусы, сроки и суммы по каждому договору в одном месте

4

Документы и чеки

Хранение документов договора и загрузка чеков со ссылкой на них

5

График выплат

Расчёт выплат с параметрами, притоками/оттоками и НДФЛ, выгрузка графика

6

Адаптивная версия

Корректная работа кабинета на мобильных устройствах

Как это работает

Ключевые экраны продукта — по шагам.

Кабинет и раздел «Договоры»

Кабинет и раздел «Договоры»

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

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

Этапы работы над продуктом

Этапы работы над продуктом

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

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

Загрузка чека и график выплат

Загрузка чека и график выплат

Экран работы с чеками и выплатами: во всплывающем окне «Загрузка чека» клиент прикрепляет файл (12cdcd.jpeg) или вставляет ссылку на него и отправляет. В основной части раскрыт блок «Чеки» с переключателями Параметры расчёта / Притоки-оттоки / Выплаты.

Во вкладке «Выплаты» показана таблица с датой погашения, типом выплаты, суммой, ставкой и фактическим НДФЛ и признаком оплаты, а внизу — ссылка «Скачать график». Так клиент контролирует движение средств по договору и выгружает график выплат.

Единый продукт: десктоп и мобильные экраны

Единый продукт: десктоп и мобильные экраны

Итоговая раскладка кабинета: крупный десктопный экран с уведомлениями и списками соседствует с несколькими телефонными мокапами — формы заявок, уведомления, списки договоров и справки в мобильном виде.

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

Работа в закрытом контуре заказчика

Проект вели по методологии Scrum: работа шла спринтами, каждый этап включал разработку и тестирование с поэтапной передачей результата заказчику.

Отдельной задачей стало обеспечение доступа в защищённую сеть компании — её решили приобретением модема и настройкой доступов, после чего команда работала непосредственно в закрытом контуре клиента.

В цифрах

4
типа профилей: физлицо, юрлицо, самозанятые, ИП
1
единый интерфейс для всех типов клиентов
2
технологии в основе: Laravel и React
Scrum
поэтапная сдача по спринтам
  • Веб-ЛК на Laravel и React — единый интерфейс для клиентов компании.
  • Регистрация и авторизация: e-mail и пароль, восстановление доступа.
  • Типы профилей: физическое лицо, юридическое лицо, самозанятый, ИП.
  • Статистика по договорам: статусы, суммы, сроки в личном кабинете.
  • Адаптивная вёрстка: кабинет корректно работает на мобильных устройствах.
  • Поэтапная сдача функционала по Scrum-спринтам — без единого монолитного релиза.

Архитектура и персональные данные

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

Соответствие: 152-ФЗ, оператор ПДн в реестре РКН, ИСО 27001 (внедрение), локализация персональных данных. Требования опираются на 152-ФЗ; статус оператора проверяется в реестре операторов ПДн РКН.

Часто задаваемые вопросы

Что такое личный кабинет финтех-сервиса?
Веб-интерфейс, где клиент регистрируется, видит статистику по своим договорам и управляет профилем; кабинет собран на Laravel и React.
Сколько занимает разработка личного кабинета?
Зависит от объёма интеграций; кабинет разрабатывался поэтапно по Scrum и был полностью принят заказчиком в сжатые сроки.
Как обеспечивается безопасность финансовых данных?
Доступ организован в защищённую сеть заказчика, данные обрабатываются по требованиям 152-ФЗ с локализацией персональных данных.
Поддерживает ли кабинет разные типы клиентов?
Да, профиль адаптируется под физическое лицо, юридическое лицо, самозанятого и ИП.
Есть ли мобильная версия?
Кабинет имеет адаптивную вёрстку и корректно работает на мобильных устройствах.

Наши клиенты

Компании из ритейла, медтеха, логистики и электронной коммерции, которым мы помогли с цифровыми продуктами.

SuperStep
Юнилаб
Plonq
Галамарт
Гром
move2Armenia
Мосокна
Вилка Ложка
Конга
xRouten
AIS

Услуги веб-студии 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‑продвижение

Соцсети и таргет — узнаваемость бренда, комьюнити и заявки.

Подробнее →

Обсудим ваш проект?

Расскажите задачу — за 1–2 дня вернёмся с оценкой сроков, бюджета и составом команды.

Телефон
Звонок бесплатный
Бесплатный аудит и оценка проекта — вернёмся с планом за 1–2 дня.

* При условии заключения договора на разработку. Услуга технический SEO аудит сайта предоставляется с отчетом и списком рекомендаций.

Хотите похожий проект — обсудим

Расскажите задачу — за 1–2 дня вернёмся с оценкой сроков, бюджета и составом команды.