Редизайн ЛК брокера в B2B
Редизайн личного кабинета брокера для крупного красного федерального ритейла и магазинов-партнёров. С аудиторией более 30 000 пользователей. Спроектировала дизайн систему по принципу атомарного дизайна с подробной документацией.
Key poins
Обзор проекта
ЛК брокера — веб-приложение для кредитного специалиста, который служит рабочим инструментом для оформления кредитных продуктов в магазинах по всей стране. Приложение насчитывает более 30 000 кредитных специалистов и работу с порядка 20 банков, участвующих в скоринге.
Как это работает на практике: когда покупатель приходит в магазин и решает оформить покупку в кредит, он обращается к кредитному специалисту, который формирует кредитную заявку в этом самом личном кабинете и отправляет её банкам-партнёрам.
Проект представляет собой комплексный редизайн личного кабинета кредитного специалиста, цель которого — ускорить обработку заявок и расширить функциональность.
ВАЖНО! Коммерческая и конфиденциальная информация в этом проекте защищена NDA, поэтому некоторые части показаны в обезличенном виде или описаны в общих чертах.
До
30 мин.
процесс оформления кредитной заявки
После
5 мин.
процесс оформления кредитной заявки
Моя роль
Главный дизайнер в данном продукте. Отвечала за полный процесс редизайна личного кабинета. Ключевым результатом работы стал редизайн более 800 экранов и создание комплексной дизайн-системы с нуля, включая библиотеку документации.
Моя роль включала задачи на всех этапах дизайна:

  • Проведение качественных и количественных исследований
  • Редизайн личного кабинета кредитного специалиста
  • Проектирование и внедрение дизайн-системы
  • UX-копирайтинг: переработка текстов на всех экранах
  • Проведение дизайн-ревью и контроль качества реализации в продакшене
  • Презентация дизайн-решений команде и участие в совместных сессиях по груммингу задач
Боли до редизайна
Устаревшая архитектура
За 10 лет продукт оброс огромным количеством функций, которые хаотично добавлялись в интерфейс. Это привело к «временным» решениям, которые копились годами и были проблемными в масштабировании.
Критические UX-ошибки
Продукт изначально разрабатывался без дизайнера, и пользовательский опыт никто не учитывал. На каждом шаге работы кредитного специалиста был свой набор ошибок, которые замедляли обработку заявок.
Хаос в дизайне
Сотни экранов выглядели и работали по-разному, что создавало хаос не только для пользователей, но и для разработчиков: они путались в макетах и не могли поддерживать единый внешний вид продукта.
Исследования
Одной из основных задач было создание интерфейса для людей. Мне важно было понять, как кредитные специалисты используют личный кабинет, понять их обстановку, боли и пожелания.
Этап 1: глубинное интервью
Перед началом редизайна каждого нового раздела я собирала группу из 8-10 респондентов и проводила с ними интервью. Заранее я готовила список гипотез, целей, вопросов, как считаем KPI и презентацию для респондентов.
Этап 2: опрос
На основе найденных расхождений в глубинном интервью запускала онлайн опрос на группу 500-1000 респондентов на 5-7 вопросов.
Этап 3: коридорка
Проверка макетов внутри команды. Для чистоты исследования я старалась брать коллег, которые работают в смежных командах и не занимаются моим продуктом. Также макеты проходили груминг сессии с разработчиками и аналитиками внутри моей команды.
Этап 4: юзабилити тестирование
После отрисовки макетов и уточнения их с командой я запускаю цикл интервью с группой из 8-10 респондентов по новым экранам. Респонденты выполняют задания своих привычных действий, но на новом дизайне.
Этап 5: опрос сбор обратной связи
Спустя 3-6 месяцев после публикации нового раздела провожу количественное исследование по новому продукту в формате опроса на 5-10 вопросов по сбору обратной связи с кредитных специалистов. Помимо опроса в период запуска нового раздела мы активно собирали все вопросы из отдела техподдержки и из чатов пилотной группы.
Профит с исследований
  • Сокращение количества багов, выпускаемых на прод.
  • Пользователи разбирались в новом интерфейсе без методичек и обучений.
  • В разработку уходили только проверенные макеты — сократили количество переделок экранов после релизов.
  • Пилотная группа пользователей не хочет возвращаться в старую версию интерфейса.
Редизайн
Процесс редизайна был построен на принципе итеративности: макеты создавались в нескольких вариантах, где каждая новая версия отличалась от предыдущих. Я придерживаюсь правила, что важно рассматривать все идеи и постоянно задавать себе вопрос «А что если?». Это не упражнение на количество вариантов и не перфекционизм — это способ заранее увидеть корнер-кейсы и состояния, в которых интерфейс обычно ломается на проде.
Также в работе над дизайном я примеряла на себя образ кредитного специалиста и его атмосферы. Важно понимать не только, какой функционал необходим, но и в каких условиях и в каком контектсте он используется. Я держала в уме, что перед кредитным специалистом сидит клиент, который часто задаёт вопросы, отвлекает, наводит стресс. Мне важно было снизить когнитивную нагрузку на пользователя, а именно сократить количество элементов на одном экране — разбили анкету на шаги. А также важно было сделать интерфейс понятным — работа над текстами и очевидностью формулировок и иконок.
Результатом такого подхода стало сокращение пути оформления заявки с 30 до 5 минут, а также сокращение количества заявок в техподдержке, потому что интерфейс стал пользователю «помощником», а не центром ошибок.
Дизайн-система
Проблема: хаос, ничего не понятно разработчику
Изначально дизайн-система была передана мне по наследству и представляла собой некий файл с родительскими компонентами. Там не было описания, группировки и систематизации. Точкой кипения стало то, что разработчики стали отвлекать меня по несколько раз в день с вопросами о логике, состояниях и конфигурации компонентов.
В период сниженной рабочей нагрузки я проявила инициативу в разработке полноценной дизайн-системы. Моя цель заключалась не просто в создании файла компонентов, а в создании полноценной библиотеки по принципу атомарного дизайн, которая стала бы «единым источником достоверной информации» для всей команды.
Дизайн-система
Атомарный дизайн
Компоненты разрабатывались по принципу атомарного дизайна: они состояли из вложенных элементов разной сложности. Дополнительно для удобства модификации сложных компонентов были разработаны специальные мастер-компоненты. Они служили основными структурными элементами, на которых базировались дочерние компоненты, и обеспечивали детальную раскладку состояний и отображения элементов. Такой принцип сокращает время на модификацию компонентов без потери связей между ними.
Наглядный пример — модальное окно. Я создала единый «скелет» окна (шапка, область контента, футер с кнопками), в который можно встраивать любой новый контент, сохраняя консистентность и логику поведения.
Дизайн-система
Документация
Каждый компонент имел подробную документацию — отдельно для разработчиков и для дизайнеров.
Документация для разработчиков. Чтобы обеспечить точную и быструю реализацию, документация содержала: описание компонента и его назначения, структуру, все состояния, поведение, а также раскладку размеров и свойств для включения и отключения элементов.
Документация для дизайнеров. Здесь также было описание компонента и всех используемых элементов и составных частей. Для дизайнеров файл документации служил ещё и местом для редактирования родительских компонентов. Все компоненты были строго подписаны по названию, а там, где это было необходимо, описывались правила и ограничения использования.
Дизайн-система
Каталог компонентов
Дизайн-система была разделена на разделы по логике элементов, где внутри каждого раздела элементы располагались по алфавиту для удобства. Чтобы дизайн-системой было удобно пользоваться всем участникам команды — особенно тем, у кого мало опыта работы в Figma, я собрала каталог компонентов с превью компонентов.
Этот каталог расположен на первой странице, поэтому при открытии файла дизайн-системы пользователи сразу видили её состав. Каталог содержит те же разделы, что и сама дизайн-система, и отображает компоненты с превью, названиями файлов, описаниями и ссылкой на страницу компонента. Кроме того, у каждого раздела был свой внутренний каталог.
Результат
  • Для пользователей. Главное достижение — новый интерфейс не требовал недель обучения. От пилотной группы из 500 специалистов мы получили обратную связь: «специалисты не терялись и достаточно легко ориентировались... всё было понятно с самого начала, без недель инструктажа».
  • Для бизнеса. Время обработки одной заявки сократилось с 30–40 минут до 10–5 минут. Хотя это совместное достижение с разработкой, которая оптимизировала архитектуру, именно новый UX сделал такую скорость доступной и удобной для специалистов.
  • Для команды. Дизайн-система стала «единым источником правды», устранила хаос и значительно ускорила все процессы, связанные с проектированием и разработкой интерфейсов.
Мои работы
Редизайн B2B-app для платежей
Дизайн LMS системы в Ed-tech
Редизайн Ed-tech приложения
Made on
Tilda