Обновление интерфейса в системе финансового брокера 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 подробно описаны и подготовлены к внедрению: цвета, интерактивные состояния кнопок, поля, чекбоксы, статусы, уведомления и система шрифтов и отступов.
Визуальный стиль стал легче и спокойнее. Акценты используются для обозначения приоритетов и статусов.
Обновленный визуальный стиль платформы
Ирина Жукова
Дизайнер в Атвинте
Цветовая гамма в старом интерфейсе визуально перегружала систему: элементы сливались друг с другом, статусы терялись, а внимание пользователей рассеивалось. Мы полностью обновили дизайн, убрали лишние оттенки и выстроили визуальную иерархию.
Функциональные изменения
Переработали карточку заявки, чтобы выделить ключевые данные. Шапка выполнена в виде отрывного билета, или «корешка». Добавили систему фильтрации по основным параметрам, чтобы специалисты могли оперативно находить информацию.
Оформление карточек клиентов и их заявок
Ирина Жукова
Дизайнер в Атвинте
В процессе работы с заявками пользователи путались — интерфейс воспринимался как сплошной список данных. Мы искали способ визуально упростить восприятие карточки и сделать интерфейс более легким. Так появилась идея стилизовать шапку заявки под билет с отрывной частью — это помогло отделить ее от общего фона и сделать узнаваемой.
Добавили разделы «Калькулятор» и «Статистика». Первый помогает агентам быстро рассчитать параметры заявки в зависимости от суммы и срока. Второй дает аналитикам и менеджерам возможность видеть количество заявок, процент отклонений и ошибки.
Разделы с калькулятором и статистикой
Вместо перегруженного интерфейса появилась структурированная система, в которой каждый элемент решает конкретную задачу.
- Упростили процесс работы с заявкой. Каждый шаг визуально подсвечен и находится на виду. Это снижает количество ошибок и увеличивает скорость оформления.
- Сократили нагрузку на менеджеров и поддержку. Пользователи справляются с задачами самостоятельно — интерфейс помогает им быстро найти нужный раздел.
- Повысили вовлеченность пользователей. Благодаря улучшенной логике навигации больше заявок проходит полный путь — от черновика до выдачи.
- Улучшили восприятие сервиса. Дизайн стал более спокойным и актуальным для брокерских сервисов. Это укрепляет доверие к продукту как со стороны клиентов, так и со стороны банков.
- Создали основу для самостоятельного роста. Макеты легко масштабировать, а UI-kit позволяет быстро внедрять новые разделы и сценарии.
- Визуализировали критически важные данные. Все участники процесса быстрее принимают решения благодаря понятной аналитике, статусам и действиям.
Результат
В рамках проекта мы провели комплексную UX-аналитику, глубинные интервью с ключевыми ролями и провели аудит пользовательских сценариев. На основе собранных данных спроектировали прототипы и предложили новый универсальный дизайн личных кабинетов, адаптированный под роли и процессы внутри платформы.
Старый и новый дизайн платформы TenderHelp
Что получил клиент:
- Прототипы ключевых сценариев с учетом логики бизнес-процессов, распределения ролей и зон ответственности.
- Дизайн-решение, в которое входит стилеобразующий экран, универсальный UI kit и примеры экранов, выполненные в едином визуальном стиле.
- Развитие продукта. Благодаря заложенной логике и готовым элементам интерфейса команда заказчика может самостоятельно создавать новые разделы и экраны, не теряя целостности системы.
- Упрощенный интерфейс. Переработанный внешний вид делает сервис визуально легче, а взаимодействие с системой — более интуитивным.
Долгоживущие системы требуют регулярного редизайна и адаптации к новым задачам, чтобы сохранять актуальность и высокий уровень пользовательского опыта.
Услуги из кейса
