Задача
Задача
Оптимизация UX и редизайн раздела личного кабинета
Оптимизация UX и редизайн раздела личного кабинета
Контекст
Контекст
Раздел «Реферальная программа» в личном кабинете VELO необходимо было пересмотреть — как с точки зрения UX, так и визуального соответствия новому UI-киту. Цель — устранить барьеры в пользовательском пути, повысить вовлечённость и сделать процесс создания промокодов более интуитивным
Раздел «Реферальная программа» в личном кабинете VELO необходимо было пересмотреть — как с точки зрения UX, так и визуального соответствия новому UI-киту. Цель — устранить барьеры в пользовательском пути, повысить вовлечённость и сделать процесс создания промокодов более интуитивным
Старый интерфейс
Старый интерфейс
Выявленные проблемы
Выявленные проблемы
Недоступное целевое действие
Недоступное целевое действие
При первом входе пользователь не видел возможности создать промокод.
Единственной заметной кнопкой была «Заказать выплату», которая не имела смысла
без начислений
При первом входе пользователь не видел возможности создать промокод. Единственной заметной кнопкой была «Заказать выплату», которая не имела смысла без начислений
Неочевидное размещение условий
Неочевидное размещение условий
Переключатель «Стандартные / Привилегированные условия» находился на отдельной вкладке,
не связанной с формой создания промокода, хотя напрямую влияет на выбор типа кода
Переключатель «Стандартные / Привилегированные условия» находился на отдельной вкладке,
не связанной с формой создания промокода, хотя напрямую влияет на выбор типа кода
Дублирование информации
Дублирование информации
Одинаковая таблица начислений отображалась и в разделе «Основное»,
и в «Ваши начисления», что дезориентировало пользователей
Одинаковая таблица начислений отображалась
и в разделе «Основное», и в «Ваши начисления», что дезориентировало пользователей
Неактуальный визуал
Неактуальный визуал
Интерфейс не соответствовал новому UI-киту, из-за чего выглядел устаревшим
Интерфейс не соответствовал новому UI-киту, из-за чего выглядел устаревшим
Слабый empty state
Слабый empty state
При отсутствии данных пользователь сталкивался с пустым пространством
без контекста и мотивации
При отсутствии данных пользователь сталкивался с пустым пространством без контекста и мотивации
Потеря контекста на странице «Выплаты»
Потеря контекста на странице «Выплаты»
Пользователь видел только историю переводов. В случае отказа в выплате и возврата средств
не было возможности повторно отправить запрос — для этого приходилось вручную возвращаться в другой раздел, что создавало лишние шаги
Пользователь видел только историю переводов.
В случае отказа в выплате и возврата средств
не было возможности повторно отправить запрос — для этого приходилось вручную возвращаться в другой раздел, что создавало лишние шаги
Исследования и аналитика
Исследования и аналитика
Анализ пользовательских сценариев
Анализ пользовательских сценариев
На старом интерфейсе промокоды были размещены в отдельной вкладке, при этом кнопка «Создать промокод» отсутствовала на первом экране, а навигация между вкладками сбивала пользователей с контекста. Дополнительно фиксировались дублирующиеся элементы и избыточные переходы между экранами. На основе этих данных был построен новый userflow, где:
Действие по созданию промокода доступно во всех разделах;
CTA размещён сразу на первом экране;
Исключены ненужные переходы между вкладками;
Это позволило сократить количество шагов и повысить понятность сценария
На старом интерфейсе промокоды были размещены в отдельной вкладке, при этом кнопка «Создать промокод» отсутствовала на первом экране, а навигация между вкладками сбивала пользователей с контекста. Дополнительно фиксировались дублирующиеся элементы и избыточные переходы между экранами. На основе этих данных был построен новый userflow, где:
Действие по созданию промокода доступно во всех разделах;
CTA размещён сразу на первом экране;
Исключены ненужные переходы между вкладками;
Это позволило сократить количество шагов и повысить понятность сценария
Конкурентный анализ
Конкурентный анализ
Были проанализированы аналогичные решения в B2C и B2B продуктах: Rezdy, Timely и Eventbrite. В них прослеживаются эффективный UX-паттерн, где CTA располагается на первом экране, а условия создания кода — внутри самой формы
Были проанализированы аналогичные решения в B2C и B2B продуктах: Rezdy, Timely и Eventbrite. В них прослеживаются эффективный UX-паттерн, где CTA располагается на первом экране, а условия создания кода — внутри самой формы
Коридорное юзабилити-тестирование
Коридорное юзабилити-тестирование
Проведено экспресс-тестирование старого интерфейса с 10 участниками (внутренние сотрудники: менеджеры, дизайнеры, маркетологи). Результаты:
8 из 10 пользователей не смогли найти кнопку «Создать промокод» без подсказок в течение первых 20 секунд;
6 участников пытались кликать на заголовки или искали кнопку в разделе «Выплаты» — что указывает на нарушенную иерархию.
Это подтвердило гипотезу о неочевидности ключевого действия.
Проведено экспресс-тестирование старого интерфейса с 10 участниками (внутренние сотрудники: менеджеры, дизайнеры, маркетологи). Результаты:
8 из 10 пользователей не смогли найти кнопку «Создать промокод» без подсказок в течение первых 20 секунд;
6 участников пытались кликать на заголовки или искали кнопку в разделе «Выплаты» — что указывает на нарушенную иерархию.
Это подтвердило гипотезу о неочевидности ключевого действия.
UserFlow
Принятые решения
Принятые решения
Явный CTA с учётом сценария пользователя
Явный CTA с учётом сценария пользователя
На главной странице добавлена акцентная кнопка «Создать реферальный код» в блоке
статистики. Кнопка «Заказать выплату» теперь появляется только при наличии средств
к выводу — интерфейс адаптируется под состояние пользователя
На главной странице добавлена акцентная кнопка «Создать реферальный код» в блоке
статистики. Кнопка «Заказать выплату» теперь появляется только при наличии средств
к выводу — интерфейс адаптируется под состояние пользователя
Новый empty state с мотивацией
Новый empty state с мотивацией
Создан продуманный пустой экран, включающий: Иллюстрацию, Мотивационный текст, Основные условия участия (лимиты, формат выплат, минимальные требования). Это помогло лучше донести механику и выгоды реферальной программы новым пользователям
Создан продуманный пустой экран, включающий: Иллюстрацию, Мотивационный текст, Основные условия участия (лимиты, формат выплат, минимальные требования). Это помогло лучше донести механику и выгоды реферальной программы новым пользователям
Обновленный интерфейс раздела без начислений
Обновленный интерфейс · без начислений
Обновленный интерфейс раздела с начислениями
Обновленный интерфейс · с начислениями
Логичное размещение переключателя условий
Логичное размещение переключателя условий
Переключатель условий перемещён в форму создания промокода.
Это упростило процесс и позволило менять условия, не покидая экран формы
Переключатель условий перемещён в форму создания промокода.
Это упростило процесс и позволило менять условия, не покидая экран формы
Обновленный интерфейс страницы создания промокода
Обновленная страница создания промокода
Упрощение структуры
Упрощение структуры
Подраздел «Ваши начисления» был объединён с «Основным», поскольку дублировал
ту же таблицу. Это сократило навигацию и устранило путаницу
Подраздел «Ваши начисления» был объединён с «Основным», поскольку дублировал
ту же таблицу. Это сократило навигацию и устранило путаницу
UI-актуализация
UI-актуализация
Весь раздел был переработан в соответствии с новым UI-китом: обновлены компоненты, типографика, отступы и состояния элементов
Весь раздел был переработан в соответствии с новым UI-китом: обновлены компоненты, типографика, отступы и состояния элементов
Повышение функциональности подраздела «Выплаты»
Повышение функциональности подраздела «Выплаты»
Добавлена возможность заказать выплату прямо со страницы «Выплаты».
Теперь, если пользователю отказано в выводе и средства возвращаются,
он может отправить запрос повторно без необходимости перехода в другой раздел
Добавлена возможность заказать выплату прямо со страницы «Выплаты». Теперь, если пользователю отказано в выводе и средства возвращаются, он может отправить запрос повторно без необходимости перехода в другой раздел
Обновленный интерфейс подраздела «Выплаты»
Обновленный подраздел «Выплаты»
Метрики до и после редизайна
Метрики
до и после редизайна
Результаты
Результаты
01
01
Повышена видимость и доступность целевого действия
Повышена видимость и доступность целевого действия
02
02
Улучшена структура раздела, устранено дублирование
Улучшена структура раздела, устранено дублирование
03
03
Интерфейс стал чище, современнее и понятнее
Интерфейс стал чище, современнее и понятнее
04
04
Упрощён пользовательский путь и снижено количество лишних шагов
Упрощён пользовательский путь и снижено количество лишних шагов
05
05
Добавлена возможность отправки выплаты возле истории выплат
Добавлена возможность отправки выплаты возле истории выплат
VELO
Реферальная программа
VELO — сервис для аренды мобильных, резидентных и корпоративных прокси
с оплатой за потребляемые гигабайты
VELO
Реферальная
программа
VELO — сервис для аренды мобильных, резидентных и корпоративных прокси
с оплатой за потребляемые гигабайты