Рис. 1. Главный экран личного кабинета — «Мой заем»
Рис. 1. Главный экран личного кабинета — «Мой заем»

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

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

Визуальный язык

  • Светлый и спокойный интерфейс. Белые карточки на светло-голубом фоне, мягкие тени и скругления. Финансовые операции не должны вызывать тревогу — интерфейс работает на ощущение надёжности.
  • Один главный цвет действия. Синим выделено то, что клиенту нужно сделать сейчас: «Войти», «Продолжить», «Оплатить», «Оформить заём». Второстепенные действия — светлые кнопки.
  • Статусы простым языком. Цветные метки «Оплачен», «Ожидает оплаты», «Просрочен», «Одобрена», «На рассмотрении» считываются с первого взгляда.
  • Мультиязычность. Переключатель языка доступен и на экране входа, и внутри кабинета.

Вход и восстановление доступа

На экране входа клиент выбирает удобный способ — по логину или по номеру телефона. Рядом — ссылка «Забыли пароль?» и отдельная кнопка «Стать клиентом Sputnik» для тех, кто пришёл впервые. Внизу — ссылки на поддержку и политику конфиденциальности.

Рис. 2. Экран входа: логин или телефон
Рис. 2. Экран входа: логин или телефон

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

Рис. 3. Восстановление доступа с подсказкой об ошибке
Рис. 3. Восстановление доступа с подсказкой об ошибке

Анкета нового клиента

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

Шаг 1. Основные данные

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

Рис. 4. Шаг 1: основные, паспортные и контактные данные
Рис. 4. Шаг 1: основные, паспортные и контактные данные

Шаг 2. Документы и адреса

ИНН, СНИЛС и адрес регистрации. Блок фактического адреса появляется только если клиент отметил, что живёт не по месту регистрации, — так анкета не выглядит длиннее, чем нужно.

Рис. 5. Шаг 2: документы, адрес регистрации и фактического проживания
Рис. 5. Шаг 2: документы, адрес регистрации и фактического проживания

Шаг 3. Трудовая деятельность

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

Рис. 6. Шаг 3: занятость, доход и контакт третьего лица
Рис. 6. Шаг 3: занятость, доход и контакт третьего лица

Шаг 4. Параметры займа

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

Рис. 7. Шаг 4: сумма, срок, продукт и итоговые условия
Рис. 7. Шаг 4: сумма, срок, продукт и итоговые условия

Мой заем

Главный экран кабинета отвечает на вопросы, с которыми клиент приходит чаще всего: какой у займа статус, сколько уже погашено, сколько осталось и до какого числа. Здесь же — сумма досрочного погашения, ставка, номер заявки и даты выдачи. Две кнопки в шапке — «Пополнить счёт» и «Досрочное погашение» — ведут к самым частым действиям.

Если по займу есть просрочка, статус «Кредит просрочен» выделяется красным. Внизу экрана — баннер с новыми предложениями для тех, кому отказали.

График платежей

Вкладка «График платежей» начинается с наглядной сводки: прогресс-бар оплаченных платежей, остаток основного долга, проценты, штрафы и ежемесячный платёж. Ниже — таблица всех платежей с датами, суммами и статусами: «Оплачен», «Ожидает оплаты», «Просрочен», «Отклонён».

Рис. 8. График платежей: прогресс, сводка и статусы
Рис. 8. График платежей: прогресс, сводка и статусы

Погашение, досрочное погашение и продление

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

Рис. 9. Экран погашения займа
Рис. 9. Экран погашения займа

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

Рис. 10. Досрочное погашение в боковой панели
Рис. 10. Досрочное погашение в боковой панели

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

Рис. 11. Продление займа: выбор срока и договор на подписание
Рис. 11. Продление займа: выбор срока и договор на подписание

Повторный займ

Для действующих клиентов оформление нового займа — это три шага без повторного заполнения анкеты. Кнопка «Новый заем» всегда под рукой — в левом меню, рядом с балансом бонусов и счёта.

  • Шаг 1 — сумма, срок, продукт и итоговые условия, как в анкете нового клиента.
  • Шаг 2 — промокод и способ получения денег: карта, денежный перевод или наличные. Новую карту можно добавить, не уходя со страницы.
  • Шаг 3 — договор и согласия. Документ открыт прямо на странице, его можно скачать, а кнопка «Оформить заём» находится рядом с чекбоксами согласий.
Рис. 12. Новый займ, шаг 1: условия
Рис. 12. Новый займ, шаг 1: условия
Рис. 13. Новый займ, шаг 2: промокод и способ получения
Рис. 13. Новый займ, шаг 2: промокод и способ получения
Рис. 14. Добавление карты в боковой панели
Рис. 14. Добавление карты в боковой панели
Рис. 15. Новый займ, шаг 3: договор и согласия
Рис. 15. Новый займ, шаг 3: договор и согласия

Получение денег по СБП

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

Рис. 16. Экран заявки: выбор банка для перевода по СБП
Рис. 16. Экран заявки: выбор банка для перевода по СБП

История, документы и настройки

В «Истории заявок» собраны все обращения клиента с датами, суммами, сроками и статусами. «История займов» показывает все займы клиента, а если их пока нет — вместо пустой таблицы клиент видит понятное сообщение.

Рис. 17. История заявок
Рис. 17. История заявок
Рис. 18. Пустое состояние «Истории займов»
Рис. 18. Пустое состояние «Истории займов»

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

Рис. 19. Подписанные документы
Рис. 19. Подписанные документы

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

Рис. 20. Настройки: профиль, способы оплаты и пароль
Рис. 20. Настройки: профиль, способы оплаты и пароль

Единая система с интерфейсом сотрудников

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