Конфигуратор расчёта стоимости автокредита для RN-Банка

Разработать максимально разумную, разбитую на компоненты UI-систему и реализовать функционал быстрого скоринга для обработки заявок на автокредитование.

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

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

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

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

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

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

Это зафиксировало единое понимание того, как должен работать скоринг-инструмент, и дало основу для последующих этапов — дизайна и разработки.

Реализовали дизайн-систему и компонентный UI-kit, а затем на их основе дизайн интерфейса. Фокус был на том, чтобы элементы переиспользовались и покрывали разные состояния анкеты и скоринга без постоянного создания новых уникальных решений.

Разработка дизайн-системы заняла 4 недели. В результате получилась компонентная база, которая подходит для расширения функционала и поддержания единого визуального языка продукта.

Реализацию фронтенда выполнили на Vue.js с опорой на компонентный UI-kit. Это позволило собрать интерфейс из повторно используемых элементов и поддерживать единые правила поведения экранов и состояний.

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

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

По результатам проверок внесли правки и довели сценарии до корректной работы.

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

Дополнительно мы заложили фундамент для развития продукта: дизайн-система и компонентный UI-kit делают дальнейшее расширение функционала проще и быстрее, а фронтенд на Vue.js с адаптивной версткой обеспечивает стабильную работу интерфейса на разных устройствах.