Onboarding Page
Редизайн Онбординговой страницы продукта
Переосмысление первого взаимодействия с продуктом: как редизайн онбординга повысил понятность, вовлечённость и конверсию новых пользователей
Контекст и цель
Роль: UX/UI Дизайн, 2024 год
AI-платформа для автоматической оценки состояния подержанных смартфонов. Цель редизайна онбординговой страницы — ускорить первое взаимодействие пользователя с системой, снизить когнитивную нагрузку и повысить вовлечённость через интуитивное пошаговое руководство.
Старый интерфейс (до)
UX-аудит и юзабилити-тесты показали, что пользователи не понимают, с чего начать, и пропускают шаги. Клики и тепловые карты выявили низкую вовлечённость в зонах с неструктурированной информацией.
Проблемы
Фрагментированная структура
Информация разбросана по блокам без визуальной иерархии.
Слабая пошаговая логика
Пользователь не видит чёткой последовательности действий.
Негативный UX
Много текста, мало визуальных подсказок. Отсутствует эмоциональный отклик.
Избыточные ссылки
“How it works” перегружен второстепенными материалами (гайды, туториалы, примеры).
Недостаток визуального контекста
Иконки не поддерживают текст, нет ясности в действиях.
Oтсутствие консистентности
Используемые иконки, стили и отступы разнятся между блоками, что снижает ощущение целостности интерфейса и затрудняет восприятие.
Решения в редизайне (после)
Решение с карточками шагов позволило сократить избыточный текст и упростить подачу информации, благодаря чему интерфейс стал более лаконичным и визуально чистым.
Экраны
1 — Старый экран интерфейса при ширине 1920 px

2 — Обновлённый экран интерфейса при ширине 1920 px: переработанная структура, улучшенная визуальная иерархия и акцент на пошаговое взаимодействие.

3 — Адаптивный вариант экрана при ширине 1360 px: сохранена логика и читаемость интерфейса на устройствах с меньшим разрешением.
Критерий

Логика онбординга

Визуальный фокус

Уровень вовлечения

Время на понимание

Конверсия в действие

Было

Разрозненные блоки

Много текста

Средний уровень вовлечения

10-15 сек понимание

Низкая конверсия

Стало

Линейная пошаговая инструкция

Иллюстрации и шаги

Высокий (пошаговый гайд)

3-5 сек понимание

Ожидаемый рост конверсии +25%

Инструменты: 
> Figma (UX wireframes, UI layout)
> Adobe Illustrator (иконки и иллюстрации)
> Primevue (библиотека элементов)
> Notion (документация)
Результат
  • Уменьшено количество обращений в саппорт на 30%
  • Среднее время прохождения онбординга — снизилось с 42 до 18 секунд
  • Повышена конверсия установки мобильного приложения
Made on
Tilda