Brief

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

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

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

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

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

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

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

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

Задачи

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

Решение

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

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

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

Лента

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

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

Первый экран

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

Вариант 1

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

Вариант 2

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

Вариант 3

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

Второй экран

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

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

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

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

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

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

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

Стиль

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

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

Макет

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

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