LightLogo
Проект

Редизайн сервиса тендерных займов: удобство для 18 000 клиентов

Обновление интерфейса в системе финансового брокера TenderHelp
Дата
2024
Экспертизы
Аналитика
Проектирование
Редизайн
Интерфейс
Тип продукта
Интерфейсы и дашборды
Личный кабинет
Отрасль
Финансы
Business 2 Business

Клиент

TenderHelp — один из лидеров рынка в сфере банковских гарантий и тендерного финансирования. С 2015 года компания помогает участникам государственных, муниципальных и коммерческих закупок получать гарантии, кредиты и тендерные займы через собственную цифровую платформу.
TenderHelp входит в топ-5 брокеров в своей отрасли и сотрудничает с более чем 20 банками. Менеджеры обработали через сервис запросы свыше 18 000 клиентов и выдали 32 000 банковских гарантий.

Задача

Клиент обратился к нам за улучшением интерфейса собственной системы TenderHelp. 
IT-команда компании самостоятельно развивает сервис. За годы в нем постепенно появлялись новые роли, функции и сценарии. При этом пользовательский опыт не прорабатывался: экраны создавались и расширялись силами разработчиков без участия дизайнеров.
В результате сформировалась сложная структура кабинетов для разных ролей: агентов, менеджеров, аналитиков и операторов. Система стала перегруженной, возникли сложности с навигацией, единым стилем и логикой взаимодействия между пользователями.
Перед нами стояли две основные цели:
  • сделать интерфейс интуитивным и удобным для всех ролей;
  • подготовить масштабируемую систему, которую TenderHelp сможет развивать самостоятельно.
Задачи:
  • провести UX-исследование, чтобы подтвердить или опровергнуть гипотезы команды;
  • выявить барьеры и слабые места в работе с интерфейсом для разных ролей;
  • изучить конкурентов и найти удачные интерфейсные решения;
  • предложить архитектуру и интерфейс, который поможет сократить число обращений в поддержку и повысит самостоятельность пользователей;
  • создать прототипы ключевых разделов;
  • разработать UI kit и макеты, которые можно масштабировать без постоянного участия дизайнеров.

Решение

Наша команда провела полноценную аналитику, составила структуру платформы, подготовила прототипы и дизайн-макеты. 
Мы предложили заказчику модульный подход, при котором создание и масштабирование дизайн-макетов решается без необходимости полной отрисовки всей системы. Такой формат позволил команде TenderHelp развивать интерфейс самостоятельно.
Разделили проект на два ключевых этапа:
  • Аналитика и исследование пользовательского опыта для того, чтобы подтвердить гипотезы заказчика, выявить реальные проблемы и собрать требования к интерфейсу.
  • Проектирование и разработка дизайн-системы. Мы спроектировали универсальную структуру и подготовили стилеобразующий макет и UI kit.
Наш подход позволил: 
  • учесть все роли внутри системы и их особенности;
  • создать единую архитектуру интерфейса без избыточных элементов;
  • минимизировать количество уникальных экранов и сценариев;
  • сохранить визуальную целостность при доработке новых разделов силами клиента;
  • ускорить этап внедрения и снизить нагрузку на продуктовую команду заказчика;
  • использовать готовую базу для сборки новых разделов;
  • снизить затраты на дизайн без потери качества продукта.
Сравнение старого стиля и новой концепции
Что мы сделали:
  • Погрузились в бизнес-процессы. Изучили роли, сценарии и внутренние механики сервиса. Разобрали реальные ситуации, с которыми сталкиваются пользователи в процессе работы — от подачи заявки до взаимодействия с банком.
  • Разработали прототипы для типовых сценариев и экранов, опираясь на потребности ключевых ролей и выявленные боли.
  • Создали UI kit. Собрали библиотеку компонентов с описаниями, примерами использования и правилами масштабирования, чтобы команда клиента могла собирать новые разделы без участия дизайнеров.
  • Подготовили стилеобразующий макет. Разработали визуальную концепцию, на базе которой строится весь интерфейс — цветовая палитра, типографика, карточки, статусы и элементы управления.

Аналитика

На старте проекта мы провели комплексную UX-аналитику, чтобы оценить текущее состояние интерфейса и найти точки роста. Исследование включало интервью, анкетирование, UX-аудит и конкурентный анализ. Это позволило сформировать корректные сценарии использования системы и выработать рекомендации по редизайну.

Проведение глубинных интервью и опросов

Мы провели кастдев-сессии с ключевыми пользователями — аналитиками, менеджерами и агентами. По итогам интервью зафиксировали конкретные поведенческие паттерны и повседневные барьеры в работе. Например: 
  • Аналитики рассказали, что заявки часто «зависают» при отправке в банк. Интерфейс не дает визуальной обратной связи — это затрудняет контроль и требует постоянного ручного мониторинга. Также отсутствует приоритизация задач — пользователи не понимают, какие заявки требуют срочной реакции.
  • Менеджеры указали на то, что интерфейс перегружен повторяющимися элементами, из-за чего им сложно разобраться в статусах заявок. 
Провели анкетирование среди главной группы пользователей — агентов, которые выступают посредниками между банковскими организациями и компаниями. В опросе приняли участие более 40 респондентов.
Промежуточный сбор данных
По итогам опроса определили проблемы и недочеты интерфейса:
  • большинство агентов предпочитает общение в WhatsApp, но хочет получать новости о сервисе в личном кабинете и на почту;
  • отсутствует наглядная статистика по заявкам, банкам и заработку;
  • нужны уведомления по четырем ключевым событиям — изменение статуса, сообщение в чате, выдача продукта и обновления тарифов;
  • агенты не бросают отклоненные заявки, а продолжают работу с ними, потому что не видят изменений в интерфейсе;
  • необходим упрощенный доступ к актам, документам и тарифам.
Результаты исследования

Анализ конкурентов

Для формирования ориентиров по дизайну и функциональности мы провели бенчмаркинг: изучили сервисы конкурентов. Среди сильных сторон выделили:
  • Легкий визуальный стиль с минимальным количеством цветов.
  • Настраиваемые таблицы и фильтры.
  • Простой и логичный путь пользователя к целевому действию.
  • Наличие виджетов с аналитикой и актуальными новостями.
Это дало нам ориентир на лаконичный и удобный интерфейс.
Мудборд с идеями для работы с дизайном

UX-аудит платформы

Следующим шагом стал юзабилити-аудит личных кабинетов агентов, операторов и менеджеров. Изучили интерфейс на соответствие реальным задачам пользователей, проверили логику навигации, подачу информации и визуальную иерархию. В каждом разделе выявили проблемные зоны:
  • дублирующиеся элементы и действия, которые запутывают и замедляют работу;
  • перегруженные таблицы без поиска и сортировки; 
  • в форме заявки пользователь не видит общий прогресс и не понимает, сколько шагов осталось;
  • отсутствие валидации или разъяснений при возникновении ошибок в работе с анкетами, паспортными и бухгалтерскими данными.
Исследования показали, что интерфейс TenderHelp требует полной переоценки:
  • Сервис не адаптирован под цели конкретного пользователя — сценарии разных ролей пересекаются и даже дублируются.
  • Навигация не соответствует уровню сложности — чем больше данных, тем меньше структурированности.
  • Интерфейс не дает обратную связь на каждом этапе — от заполнения форм до статусов заявок.

Визуализация сценариев

На основе собранных данных мы спроектировали пользовательские сценарии по ролям и статусам заявки в системе.
Визуализация пользовательского пути на платформе
Собрали структуру личных кабинетов для менеджера, клиента, агента и оператора.
Структура личных кабинетов на платформе TenderHelp

Проектирование и дизайн

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

Прототипирование

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

Визуальный стиль и унификация

В работе с дизайном использовали принципы модульности — все элементы можно комбинировать между собой. Команда разработки TenderHelp развивает систему самостоятельно, а макеты и UI kit служат образцом для будущих разделов.
Компоненты UI kit подробно описаны и подготовлены к внедрению: цвета, интерактивные состояния кнопок, поля, чекбоксы, статусы, уведомления и система шрифтов и отступов.
Визуальный стиль стал легче и спокойнее. Акценты используются для обозначения приоритетов и статусов.
Обновленный визуальный стиль платформы
avatar
Ирина Жукова
Дизайнер в Атвинте
Цветовая гамма в старом интерфейсе визуально перегружала систему: элементы сливались друг с другом, статусы терялись, а внимание пользователей рассеивалось. Мы полностью обновили дизайн, убрали лишние оттенки и выстроили визуальную иерархию.

Функциональные изменения

Переработали карточку заявки, чтобы выделить ключевые данные. Шапка выполнена в виде отрывного билета, или «корешка». Добавили систему фильтрации по основным параметрам, чтобы специалисты могли оперативно находить информацию.
Оформление карточек клиентов и их заявок
avatar
Ирина Жукова
Дизайнер в Атвинте
В процессе работы с заявками пользователи путались — интерфейс воспринимался как сплошной список данных. Мы искали способ визуально упростить восприятие карточки и сделать интерфейс более легким. Так появилась идея стилизовать шапку заявки под билет с отрывной частью — это помогло отделить ее от общего фона и сделать узнаваемой.
Добавили разделы «Калькулятор» и «Статистика». Первый помогает агентам быстро рассчитать параметры заявки в зависимости от суммы и срока. Второй дает аналитикам и менеджерам возможность видеть количество заявок, процент отклонений и ошибки.
Разделы с калькулятором и статистикой
Вместо перегруженного интерфейса появилась структурированная система, в которой каждый элемент решает конкретную задачу.
  • Упростили процесс работы с заявкой. Каждый шаг визуально подсвечен и находится на виду. Это снижает количество ошибок и увеличивает скорость оформления.
  • Сократили нагрузку на менеджеров и поддержку. Пользователи справляются с задачами самостоятельно — интерфейс помогает им быстро найти нужный раздел.
  • Повысили вовлеченность пользователей. Благодаря улучшенной логике навигации больше заявок проходит полный путь — от черновика до выдачи.
  • Улучшили восприятие сервиса. Дизайн стал более спокойным и актуальным для брокерских сервисов. Это укрепляет доверие к продукту как со стороны клиентов, так и со стороны банков.
  • Создали основу для самостоятельного роста. Макеты легко масштабировать, а UI-kit позволяет быстро внедрять новые разделы и сценарии.
  • Визуализировали критически важные данные. Все участники процесса быстрее принимают решения благодаря понятной аналитике, статусам и действиям.

Результат

В рамках проекта мы провели комплексную UX-аналитику, глубинные интервью с ключевыми ролями и провели аудит пользовательских сценариев. На основе собранных данных спроектировали прототипы и предложили новый универсальный дизайн личных кабинетов, адаптированный под роли и процессы внутри платформы.
Старый и новый дизайн платформы TenderHelp
Что получил клиент:
  • Прототипы ключевых сценариев с учетом логики бизнес-процессов, распределения ролей и зон ответственности.
  • Дизайн-решение, в которое входит стилеобразующий экран, универсальный UI kit и примеры экранов, выполненные в едином визуальном стиле.
  • Развитие продукта. Благодаря заложенной логике и готовым элементам интерфейса команда заказчика может самостоятельно создавать новые разделы и экраны, не теряя целостности системы.
  • Упрощенный интерфейс. Переработанный внешний вид делает сервис визуально легче, а взаимодействие с системой — более интуитивным.
Долгоживущие системы требуют регулярного редизайна и адаптации к новым задачам, чтобы сохранять актуальность и высокий уровень пользовательского опыта.
Robot