29 сентября 2026

Новый интерфейс «Спутника»: как мы пересобрали админ-панель для кредитного бизнеса

IT и разработка

Клиенты, заявки, займы, графики платежей, коллекшен, выгрузки в БКИ и управление доступами — теперь в одной системе с единой логикой экранов. Рассказываем, что изменилось и почему.

Рис. 1. Экран входа в обновлённый «Спутник» — **Рис. 1.** *Экран входа в обновлённый «Спутник»*

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

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

Визуальный язык и дизайн-система

Мы начали с фундамента — единого набора компонентов и правил, на которых построены все экраны:

Тёмная навигация и светлая рабочая область. Сайдбар и шапка сделаны в глубоком тёмном цвете, а данные — таблицы, карточки, формы — живут на светлом фоне. Контент визуально отделён от «обвязки», и глаз сразу находит главное.
Один акцентный цвет. Фиолетовый отмечает всё, что можно нажать или что выбрано сейчас: основные кнопки, активный пункт меню, текущую вкладку, выбранную страницу пагинации, отмеченные чекбоксы.
Компоненты со всеми состояниями. Чекбоксы, переключатели, кнопки и поля ввода описаны в состояниях «по умолчанию», «наведение», «фокус», «активно» и «недоступно» — поэтому интерфейс ведёт себя предсказуемо в любом разделе.
Статусы-бейджи. Состояние заявки, займа или пользователя показано цветной меткой рядом с заголовком или в строке таблицы: «Успешный скоринг», «Создан», «Выдан», «Активно», «Архив», «Заблокирован».
Единая система отступов. Размеры элементов и расстояния между ними заданы общими правилами, поэтому таблицы, карточки и модальные окна выглядят как части одной системы.

Левое меню разделено на две смысловые группы. В «Клиентах» — ежедневная операционная работа: клиенты, займы, заявки и коллекшен. В «Настройках» — справочники и администрирование: кредитные продукты, выгрузки в БКИ и пользователи. Меню можно свернуть, чтобы освободить место под широкие таблицы.

Внизу сайдбара — карточка текущего сотрудника со статусом «На рабочем месте» и кнопка выхода. Это мелочь, но она помогает супервизору понимать, кто сейчас в работе, а самому сотруднику — не искать выход по меню.

Клиенты

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

Рис. 2. Список клиентов с раскрытой панелью фильтров — **Рис. 2.** *Список клиентов с раскрытой панелью фильтров*

В таблице — ключевые данные для идентификации: ID, GUID, ФИО, дата рождения, пол, гражданство и телефон. Внизу — пагинация с быстрым переходом на нужную страницу и выбором количества строк. Этот паттерн повторяется во всех табличных разделах системы.

Карточка клиента

Карточка клиента устроена по вкладкам: «Персональные данные», «Займы», «Заявки» и «Файлы». На первой вкладке информация разложена по смысловым блокам — основное, контакты, адреса и документы. У каждого блока есть кнопка редактирования, а у списков (контакты, адреса, документы) — кнопка «+», чтобы добавить новую запись прямо на месте.

Добавление и редактирование происходит в компактных модальных окнах. Форма подстраивается под выбранный тип: для телефона или email — одно поле, для паспорта — серия, номер, кем выдан, код подразделения и дата выдачи с календарём.

Рис. 4. Модальные окна добавления контакта и документа — **Рис. 4.** *Модальные окна добавления контакта и документа*

Заявки

В карточке заявки номер и статус вынесены в шапку — например, «Заявка № 406 · Успешный скоринг». Справа находится выпадающее меню «Действия», куда собраны все операции над заявкой. Основная информация — ID, внешний ID, ФИО, телефон, email, кредитный продукт, сумма и GUID клиента — собрана в одном блоке.

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

Рис. 7. Комментарии к заявке в формате чата — **Рис. 7.** *Комментарии к заявке в формате чата*

Займы

Список займов построен по тому же принципу, что и список клиентов: поиск, расширенные фильтры (номер, внешний номер, номер заявки, статус, диапазон дат, данные клиента) и таблица со статусами. Главные изменения — внутри карточки займа.

Рис. 8. Список займов — **Рис. 8.** *Список займов*

Сводка по займу

Вкладка «Информация» отвечает на главный вопрос сотрудника: «Что сейчас с этим займом?». Помимо параметров договора (продукт, даты начала и окончания), здесь есть наглядный блок «Состояние займа» на текущую дату:

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

Если просрочки нет, блок меняет вид и прямо сообщает: «Просроченная задолженность отсутствует». Сотруднику не нужно пересчитывать цифры, чтобы понять состояние клиента.

Рис. 9. Карточка займа: есть просроченная задолженность — **Рис. 9.** *Карточка займа: есть просроченная задолженность*

Рис. 10. Та же карточка, когда просрочки нет — **Рис. 10.** *Та же карточка, когда просрочки нет*

Графики платежей и их история

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

Рис. 11. График платежей: план, факт и итоги — **Рис. 11.** *График платежей: план, факт и итоги*

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

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

Рис. 13. Диалог пересчёта процентов — **Рис. 13.** *Диалог пересчёта процентов*

Платежи, начисления и события

Остальные вкладки займа дают полную финансовую картину:

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

Рис. 14. История платежей по займу — **Рис. 14.** *История платежей по займу*

Рис. 15. Форма ручного платежа — **Рис. 15.** *Форма ручного платежа*

Рис. 16. Начисления по займу — **Рис. 16.** *Начисления по займу*

Рис. 17. Досрочные погашения — **Рис. 17.** *Досрочные погашения*

Критичные операции — например, смена статуса кредита на «Выдан», «Отменён» или «Оплачен» — всегда требуют подтверждения в отдельном окне.

Рис. 18. Подтверждение смены статуса кредита — **Рис. 18.** *Подтверждение смены статуса кредита*

Коллекшен: новый модуль

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

Рабочее место коллектора

Коллектор видит свою очередь должников: состояние дела, ФИО, местное время клиента (чтобы не звонить ночью), сумму долга, текущую задолженность и количество дней просрочки. Над таблицей — поиск и фильтры, а при выборе нескольких строк появляется панель массовых действий: «Написать E-mail» и «Написать SMS».

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

Рис. 20. Фиксация результата обзвона — **Рис. 20.** *Фиксация результата обзвона*

Супервизор, реестр и сегменты

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

Рис. 21. Экран супервизора: распределение дел — **Рис. 21.** *Экран супервизора: распределение дел*

«Реестр» хранит историю передачи дел внешним коллекторам, а «Сегменты» задают правила, по которым дела автоматически распределяются по стадиям — например, Pre-collection или Soft — в зависимости от количества дней просрочки и оценки коллекшена.

Рис. 22. Настройка сегментов по дням просрочки — **Рис. 22.** *Настройка сегментов по дням просрочки*

Карточка дела

Карточка дела собирает на одном экране всё, что нужно для разговора с клиентом: общие данные, паспорт, адреса, параметры займа и задолженности, историю заявки и заметки. Отдельные вкладки показывают контакты (с оператором, регионом, актуальностью и источником), автоматические письма и SMS со статусами доставки, платежи и комментарии. Особые признаки, например «Банкрот», вынесены бейджем в шапку.

Рис. 24. Контакты должника с источником и актуальностью — **Рис. 24.** *Контакты должника с источником и актуальностью*

Настройки

Кредитные продукты

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

Рис. 26. Форма изменения кредитного продукта — **Рис. 26.** *Форма изменения кредитного продукта*

Выгрузки в БКИ

На экране выгрузок сразу видны подключённый провайдер БКИ и версия формата. Каждая выгрузка — строка с ID, датой создания, статусом и периодом. Фильтры позволяют отобрать выгрузки по типу операции, диапазону дат, заявкам, займам и событиям.

Рис. 27. Выгрузки в бюро кредитных историй — **Рис. 27.** *Выгрузки в бюро кредитных историй*

Пользователи и доступы

Управление пользователями построено на двух уровнях: роль (сотрудник или клиент) и набор доступов — «Администратор», «Колл-центр», «Документы», «Платежи», «Карты», «Коллектор». Доступы комбинируются, поэтому права каждого сотрудника можно настроить точно под его задачи. Статусы учётных записей — «Активный», «На модерации», «Заблокирован», «Удалён» — видны прямо в таблице.

Рис. 28. Управление пользователями — **Рис. 28.** *Управление пользователями*

Рис. 29. Редактирование пользователя: роль и доступы — **Рис. 29.** *Редактирование пользователя: роль и доступы*

Единые паттерны по всей системе

Помимо отдельных экранов, мы унифицировали то, с чем сотрудник сталкивается постоянно:

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

Поделитесь: