24AI — сервис генерации продуктовых изображений на маркетплейсах
Задача
Увеличить количество платных подписок и повысить уровень вовлеченности пользователей с помощью редизайна сервиса.
Результаты
Повысили конверсию в платную подписку до 20%, решив основную бизнес-задачу. Увеличили количество повторных сессий, среднее время пребывания на сайте, максимальную глубину просмотра страниц и конверсию в регистрацию.
83%
количество повторных сессий
3 мин.
среднее время пребывания на сайте
22%
конверсия зарегистрированных пользователей
127 стр.
максимальная глубина просмотра страниц
*
Динамика ключевых показателей, основанная на анализе данных в системе веб-аналитики «Яндекс.Метрика».
Улучшение пользовательского опыта
Создали темную тему интерфейса и полностью переработали меню, расширив пространство на странице. Для этого сократили площадь сайдбара и пересобрали текстовые кнопки и длинные элементы в иконки. Лишние компоненты на странице больше не отвлекают, а выбирать нужные опции стало проще.
Изменили рабочую область, чтобы большинство операций выполнялось на одном экране. Добились этого благодаря разделению левой панели на «Тему» и «Промт», а также объединению общих функций для двух режимов. Улучшили просмотр результата генерации: сделали возможным раскрытие панели с историей на всю рабочую область, добавив мультименю.
Оптимизировали навигацию, упростив работу с системными продуктами. Теперь пользователь сможет тестировать площадку уже на первом экране. Системные изображения можно скрывать и при необходимости показывать вновь — с помощью настроек в личном кабинете.
Качество юзабилити
Сделали работу с изображением более удобной. Теперь фото не искажается при растягивании и не нужно сбрасывать результат, чтобы начинать все заново. Любое действие можно отменить и вернуться на предыдущее. Кнопка «Коррекция» позволит улучшать картинку, а в продвинутых тарифах можно добавлять второй товар на канвас.
Усовершенствовали взаимодействие с выделенным объектом — добавили контролы. Упростили сетку и сделали рамку, которая подстраивается под вырезанное изображение. Убрали акцент с подсказок, прописав инпуты для ввода текста в «Промте». Пользователи будут больше экспериментировать с этим полем и самостоятельно создавать уникальные генерации. Это повышает вероятность того, что продажи 24AI увеличатся.
Вынесли на канвас выпадающий список с выбором размеров, который помогает определяться с формой изображения. Для улучшенного тарифа реализовали поле кастома — чтобы менять размер картинки при генерации.
Из одного инструмента — в экосистему
С нуля разработали семь виджетов и добавили к ним описания. Новый дизайн облегчил использование продукта и объединил все функции и подсервисы в систему. Можно без труда найти любой инструмент, а также переключиться на другой для решения своих задач.
Обновленные возможности галереи
Сократили пользовательский путь за счет создания шторок, которые активируются при наведении на изображение. Они помогают узнать запрос, на основе которого сгенерировался файл, и оперативно выполнить действия: скачать, посмотреть размер, поделиться.
Проработали окно с описанием изображения: добавили ленту из недавних картинок, пересобрали информацию о генерациях, структурировали кнопки и иконки. Адаптировали окно для мобильных устройств. Чтобы ускорить работу пользователя, внедрили мультиселект, позволяющий совершать операции сразу над несколькими изображениями.
Удобство в мелочах
Теперь при скролле на мобильной версии появляется зафиксированная кнопка Go и кнопка для мгновенной прокрутки вверх. При удерживании Go можно выбрать количество вариантов генерации — от 1 до 10. В целях бизнеса ограничили показ прошлых генераций, создав элемент «Показать еще».
Добавили два варианта обработки изображения: «Редактировать» и «Инфографика». Формат «Редактировать» позволяет править генерацию с помощью инструментов нейросети. Формат «Инфографика» помогает оформить картинку внешними атрибутами. Также встроили реакции, чтобы пользователь мог оценить готовое изображение и помочь разработчикам в развитии нейросети.
Адаптивность под любые устройства
Не просто адаптировали сервис под мобильные устройства, а создали полноценное приложение внутри браузера. Теперь нейросетью удобно пользоваться на любых экранах. При размере от 744 px и ниже включается режим с таббаром, чтобы упростить переключение между разделами интерфейса.
Другой экран регистрации
Полностью пересобрали экран с регистрацией под бизнес-процессы клиента. Оформили страницу в фирменном стиле, сделав ее узнаваемой. Также добавили поле ввода с выбором страны. Это позволит улучшить процесс оплаты при использовании российских и международных банковских карт.
Интерактивный экран ошибки
Создали несколько страниц ошибок с отсылкой к генерациям. Теперь в случае неполадок появляется экран в виде раскрывающейся галереи. Затем экран становится однотонным, а при наведении курсора на любой фрейм высвечивается прошлая генерация с кодом ошибки. Чем ниже располагается фрейм, тем более размытым выглядит изображение. Дополняет экран короткий текст и кнопка «На главную».
Интерактивный экран — это нативная реклама сервиса и способ повысить лояльность пользователей даже в неприятной ситуации. При ошибках появляется возможность познакомиться с удачными генерациями других пользователей и вдохновиться для создания будущих изображений.
Версии
Макеты в кейсе могут отличаться от текущей версии сервиса, так как проект находится в процессе реализации.