Редизайн страницы
продукта
Overgear — ecommerce платформа для геймеров из США и Европы, где геймеры покупают и продают внутриигровые услуги и валюты. Продукт уже нашел свой Product-market fit на рынке, поэтому точками роста были расширение игр и типов услуг, улучшение операционных процессов.
Product Designer - Full-time
С ноября 2022
Проблема
На странице продукта есть два блока: конструктор оффера и текстовое описание. С помощью конструктора оффера пользователи полностью настраивают свой продукт. На странице встречались сразу несколько дизайн-систем, компоненты конструктора оффера не консистентны.
Цели:
• Провести исследование опций офферов самых популярных продуктов, выявить паттерны и зоны развития
• Обновить не консистентные контролы
• Обновить описание, создать брендбук с правилами для отдела контента
• Провести исследование опций офферов самых популярных продуктов, выявить паттерны и зоны развития
• Обновить не консистентные контролы
• Обновить описание, создать брендбук с правилами для отдела контента
Проблемы
На странице встречались контролы сразу из трех легаси UI китов и были проблемы с текстовой частью описания. Контент-отдел редактировал описания офферов, выделяя важные слова капсом и яркими цветами.
1
Плохая читаемость шрифта
2
Слишком большие контролы похожи на кнопки
3
Разные по стилю заголовки
4
В тексте используется много произвольного форматирования
5
Длинный конструктор оффера, который нужно скроллить
6
Мы не мотивируем клиента добавлять больше платных опций
7
Две разные кнопки воспроизводят одно и то же действие — открывают чат Intercom
8
Слишком длинный виджет
9
Не понятно что это кнопки и что кликнув по ним, клиент перейдет на страницу похожего продукта. Фактически это рекомендации.
1
Аналогичные десктопу проблемы: неконсистентность, контролы, форматирование
2
Пользователь не видит цену пока не проскроллит конструктор оффера до конца. Он может добавлять платные опции и цена увеличится, но пользователь не узнает об этом
3
На мобайле более ощутима проблема длинного скролла, чтобы добраться до нужных опций, клиенту нужно сделать 1.5-2 скролла
4
Хуже, чем на десктопе читается форматированный текст
5
Отсутствие мобильных решений для дропдаунов и комбобоксов
Повторяющиеся опции
Процесс
Я провела исследование самых продаваемых продуктов в разных играх и категориях. Результатом стала таблица, которая дала понимание проблем конструкторов офферов в разных категориях. Я сформулировала стратегию развития конструктора оффера и презентовала команде.
UI компонент
Паттерны
Гипотезы
Значение опции
Главная сущность (если такая есть)
Брендбук для работы с текстом
Я проводила встречи с коллегами из контент-отдела. Нашей целью было выявить проблемы при работе с текстом и предложить им инструменты. Мы проводили еженедельные встречи с презентацией улучшений и обсуждением комментариев коллег
Описание оффера
Вторым шагом мы обновили UI текстовой части и добавили для контент-отдела возможность добавлять заметки, упростили выбор цвета и форматирование описания.
Контролы
После апдейта текстовой части мы обновили все компоненты и провели эксперимент с ценой на кнопке. В A/B тесте ожидаемо победил вариант с ценой на кнопке, конверсия в клик была выше на 30%. Так же изменения улучшили INP метрику.
Было
Стало
Было
Стало
Слишком маленький шрифт, низкий контраст
Скидки
Гипотеза:
Если добавим информацию о том, сколько опций еще нужно добавить пользователю, чтобы получить скидку, увеличим средний чек.
Если добавим информацию о том, сколько опций еще нужно добавить пользователю, чтобы получить скидку, увеличим средний чек.
Нет связи со скидкой и ценой
Внедрили прогресс-бар для отображения скидки, мотивируя пользователей выбирать больше опций, обычно он имеет 1-4 шага
Mobile-first
Изначально в конструкторе оффера мобильный интерфейс повторял десктопные решения, но с увеличением числа мобильных пользователей, появилась потребность внедрять Mobile-first подход.
Было
Стало
Стало
Стало
Раньше в конструкторах оффера были длинные списки из 30+ опций
Теперь фокусируем пользователя на самых важных выбранных опциях
Добавили поиск по опциям
Было
Стало
Было
Стало
Убрали все дропдауны в bottom sheet
У старых компонентов комбобоксов в мобильном виде есть поиск
Чаще используется для небольшого количества опций
Такой вид чаще всего используется, когда в группе больше 12 опций и они не помещаются на один экран
Результаты
После внедрения изменений стало понятнее описание и сократилась высота конструктора оффера.
на 45%
Выросла скорость выбора при большом количестве опций. Мы видим это по анатитике, так же этот показатель повлиял на среднее время в процессе покупки.
на 40%
Уменьшилась высота конструктора оффера. Теперь пользователю не нужно скроллить длинную форму чтобы настроить оффер.
в 1.5 раза
Увеличилась скорость создания описания для контент-отдела. Мы добавили новые необходимые фичи, дали возможность выделять важные блоки текста и помогли с форматированием текста.
Что дальше?
Мы планируем развивать десктопную страницу продукта потому что большинство геймеров играют в игры и совершают покупки в них с компьютеров.
Концепт конструктора оффера на всю ширину экрана
Концепт широкого конструктора оффера на экранах 1800+
Оставляем только опции, которые влияют на цену.
Остальное спрашиваем после оплаты
Сокращаем количество лишнего текста
и прокачиваем рекомендации
и прокачиваем рекомендации
