Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Brief

UX-исследование десктопного и мобильного пользовательского интерфейса сайта магазина одежды OMBRA.

OMBRA — сайт с большим количеством одежды, аксессуаров и других товаров, которые продаются по реферальным ссылкам. Данная работа была сдана заказчику и на момент публикации кейса не была реализована в коде.

Цели и задачи: исследовать и разработать отзывчивый веб-сайт для Ombra, который будет предназначен как для первых клиентов, так и для постоянных клиентов, сохраняя при этом текущий брендинг Ombra.

Наша роль: UX-дизайн, UI-дизайн: исследование, дизайн взаимодействия, визуальный облик.

Сроки: 2 недели

Инструменты: Figma, Notion, Adobe Illustrator

Описание кейса

Бизнес клиента — это группы в WhatsApp с реферальными ссылками на одежду и косметику. Клиент хотел масштабировать свой бизнес и использовать веб-сайт для аналитики по товарам, сделать ретаргетинг при размещении рекламы, дать пользователям возможность сохранять товары в личном кабинете и проводить больше времени на сайте, изучая товары.

Задачи

Разработать дизайн сайта, который позволит масштабировать бизнес и удерживать пользователей. На сайте должна быть общая лента, где пользователь может «задержаться» и провести как можно больше времени.

Решение

Мы разработали дизайн сайта, который состоит из 2-х основных элементов, позволяющих решить поставленную задачу.

Подборки для разных целевых аудиторий

Пользователь, заходя на сайт, может выбрать подходящую по настроению подборку или подборку со скидками, подборку с недавно добавленными товарами и т.д.

Лента

Лента со всеми товарами, которую пользователь может пролистывать, выполняя повседневные задачи при просмотре товаров. Лента оформлена как социальная сеть, что негативно сказывается на удержании пользователей, так как при прокрутке пользователь «застревает» и тратит много времени.

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Подробнее о версиях дизайна

Первый экран

Пользователь, заходящий на сайт, может выбрать подходящую по настроению коллекцию или коллекцию со скидками, коллекцию с недавно добавленными товарами и т.д.

Вариант 1

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

На первом экране отображается список трех последних коллекций. В верхней части пользователь может нажать кнопку «посмотреть все», чтобы перейти на страницу, где перечислены все коллекции. Этот вариант дает нам возможность не ограничиваться количеством слов в названии статьи.

Вариант 2

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Вариант, в котором главная страница будет содержать переход к мужской или женской коллекции.

Вариант 3

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Этот вариант также отображает выбор на первом экране. Пользователь сможет нажать маленькую кнопку и перейти на страницу коллекции.

Второй экран

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Подробнее о ленте (списке товаров)

Лента со всеми товарами, которую пользователь может пролистывать, выполняя повседневные задачи при просмотре товаров. Лента оформлена как социальная сеть, что негативно сказывается на удержании пользователей, так как при прокрутке пользователь «застревает», и тратит много времени.

Мы предложили использовать структуру из 3 или 5 колонок. 3 колонки позволят отобразить больше товаров и создать впечатление огромного количества продуктов. Структура из 5 колонок даст пользователю возможность рассмотреть товар в деталях.

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Макет в формате Pinterest

Как вариант, мы можем использовать макет Pinterest, который будет выглядеть более стильно и повысит удержание пользователей, поскольку у них будет бесконечная лента, которую они смогут прокручивать с красивыми фотографиями, которые захотят сохранить (для этой части целевой аудитории сайт ценит эстетику, поэтому каждую понравившуюся фотографию можно сохранить в своей коллекции, а затем купить).

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Мобильная версия

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Это главная страница, на которой мы пропускаем категории «мужчина/женщина».

Стиль

Играем с элементами стиля, чтобы создать и выбрать лучшую концепцию для сайта Ombra.

Основные варианты карточек товаров, которые можно настраивать, добавляя дополнительные элементы или цвета.

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Макет

Мы разработали два варианта:

Как повысить коэффициент удержания клиента на сайте: Pinterest feed и еще 3 лайфхака на примере интернет-магазина одежды

Проведя обширные исследования и проанализировав магазины конкурентов, мы разработали стратегию оптимизации пользовательского опыта на сайте клиента. Мы представили концепцию с двумя разными частями, каждая из которых отличалась уникальным стилем и макетом. В эту работу были вложены значительные усилия, чтобы пользователи оставались на сайте как можно дольше.

Хотите так же? Пишите нам в сообщения и получите бесплатную консультацию. Подписывайтесь на наш Telegram-канал, где мы делимся успешными кейсами и секретами работы со стартапами.

Больше проектов смотрите на нашем сайте по ссылке.

88
3 комментария

Интересный кейс, спасибо, что поделились

1
Ответить

Как-то оторвано от реальности. Провели исследование, и на чём остановились? Или исследования - в смысле подсмотрели как делают конкуренты?
Сколько стоит подобный проект?

1
Ответить

А что в итоге? Сайт конвертит? Какой из вариантов лучше? Или отдали дизайн и забыли? )

1
Ответить