Portobello | Стартовая страница

Portobello - поставщик бизнес-сувениров и B2B-платформа для рекламных агентств.

Результат

Task Completion Time ↓27%, 80% пользователей отметили, что структура стала проще и понятнее.

Повысили консистентность интерфейса и усилили премиальное восприятие бренда.

Задача

• Повысить конверсию стартовой страницы минимум на 5% и CTR ключевых категорий на 10%.
• Поддержать стратегический переход в сегмент B2B-поставщиков более высокого уровня.
• Улучшить пользовательский опыт за счёт понятной структуры и быстрого доступа к ключевым элементам.

Цель

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

https://kinescope.io/g5SrupxH415gYQqkw1BJA5

Проблема

После проведения 10 интервью с пользователями разной степени вовлечённости и анализа поведения в Яндекс.Метрике (тепловые карты, скролл-карты) стало очевидно, что пользователи не находят карточки товарных категорий - на старой странице они располагались значительно ниже первого экрана и оставались незамеченными.

Кроме того, новые пользователи испытывали затруднение в понимании уровня компании: им было важно быстро понять, что Portobello - не очередной поставщик из перечня конкурентов, а полноценный бренд с экспертностью, широкими возможностями и высоким качеством сервиса.

• Старая страница

Моя роль

• Работала в тесной связке с продакт-менеджером, разработчиками и бизнесом на всех этапах редизайна.
• Провела конкурентный и пользовательский анализ: изучила сайты, где присутствует ЦА, и провела глубинные интервью для выявления болей и потребностей.
• Совместно с командой сформулировала инсайты и выявила слепые зоны в текущем опыте.
• Разработала визуальную концепцию, отражающую новое премиальное позиционирование бренда.
• Спроектировала интерактивный прототип, протестировала гипотезы по расположению ключевых блоков (поиск, каталог и др.).
• Подготовила концепт стартовой страницы и провела ревью с ключевыми стейкхолдерами, собрав и внедрив обратную связь.

Процесс

В рамках исследования я проанализировала страницы маркетплейсов и сайтов, где регулярно присутствует наша целевая аудитория. Так же на основе анализа премиум сегмента e-commerce подобрала референсы. Собрав воедино общую картину поведение пользователей по тепловой карте, глубинные интервью менеджеров компании, а так же клиентов были разработаны hi-fi прототипы, которые позже были оттестированы на пользователях.

Варианты

В моём процессе я генерирую много вариантов одного и того же блока - карточек или баннеров - чтобы исследовать максимально широкий диапазон визуальных решений. Я варьирую отдельные параметры: композицию, положение текста, контраст, степень акцента, ракурсы и свет, создавая десятки мелких вариаций. Такой подход помогает не искать «идею» в голове, а увидеть её в реальных макетах.

Анализ и гипотезы

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

<aside> <img src="/icons/asterisk_blue.svg" alt="/icons/asterisk_blue.svg" width="40px" />

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

Гипотеза: если поднять популярные категории вверх страницы, пользователи будут быстрее находить нужные разделы, а глубина взаимодействия увеличится за счёт более удобной навигации.

</aside>

Результат: среднее время до первого клика сократилось на 22%, а вовлечённость в каталог (переходы в категории) выросла с 46% до 68%.

<aside> <img src="/icons/asterisk_blue.svg" alt="/icons/asterisk_blue.svg" width="40px" />

Проблема: блок с отзывами имеет объёмное визуальное оформление и отвлекал внимание от основного контента, при этом его ценность сводилась к репутационному эффекту.

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

</aside>

Результат: На тестировании 78% респондентов корректно идентифицировали бренды даже в компактном формате, а 7 из 10 участников отметили, что блок стал менее навязчивым и не мешает фокусироваться на ключевом контенте. Время перехода к следующему разделу в сценарии сократилось в среднем на 1,1 секунды.

<aside> <img src="/icons/asterisk_blue.svg" alt="/icons/asterisk_blue.svg" width="40px" />

</aside>

Результат: после фокусировки блока только на популярных товарах 82% респондетов быстрее ориентировались в содержимом, а 8 из 10 опрошенных отметили, что выбор стал «более очевидным» и «меньше отвлекает». Среднее время на поиск нужной позиции сократилось на 1,5 секунды по сравнению с предыдущим вариантом.