Продуктовый листинг и товарный лендинг для «Ангстрема»

Продуктовый листинг и товарный лендинг для «Ангстрема»

UX-проектирование
UI-дизайн
E-commerce
Интернет-магазин
B2C
UX-исследование

Главное о кейсе

#1

За 2 недели погрузились в бизнес клиента, провели исследования, подготовили прототипы и разработали дизайн для листинга и продуктового каталога сайта.

#2

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

#3

Для дальнейшего развития проекта составили фич-лист с идеями по контенту и функционалу.

О клиенте

Компания «Ангстрем» — крупное российское предприятие по производству корпусной мебели для дома. Основана в Воронеже в 1991 году, и за это время прошла путь от небольшого производства в домашних условиях до одного из крупнейших производителей и операторов мебельного рынка России.

logo-lanta

«Ангстрем» — первый поставщик в России мебели из плитных материалов для IKEA. В 2020 году компания показала рекордный рост, который составил более 40%. Региональная розничная сеть «Ангстрема» — вторая по величине в РФ (более 70 городов).

Задача

Компания обратилась к нам с задачей переработать каталог и шаблон карточки спальни с целью улучшить пользовательский опыт (UX) и, как результат, изменить ключевые KPI:

  • сокращение процента отказов;
  • рост продолжительности визита;
  • рост количества просмотренных страниц;
  • рост конверсии на заказы с сайта.

Примечание

Сроки стояли максимально короткие: на проведение всех работ было две недели.

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

Основные критерии при оценке дизайн-концепции клиент определил следующие:

  • соответствие целевой аудитории и позиционированию;
  • уменьшение визуального «шума»;
  • современный дизайнерский стиль.

Работа над проектом

Предстояло проделать много работы, чтобы на итоговой презентации ответить на основные вопросы:

  • Как сделать выбор спальни максимально удобным для пользователей с точки зрения юзабилити?
  • Какие элементы стоит убрать с текущего сайта, а какие, наоборот, добавить?
  • Как можно изменить/усилить контент?
  • Какие цвета и графику использовать в дизайне страниц?

Всю работу поделили на этапы и дальше расскажем о каждом из них.

Этап 1. Мозговой штурм

В тот же день устроили созвон на два часа всей командой. Цель — составить план проекта: продумать, какие работы необходимо провести, кого из сотрудников подключить, каких результатов необходимо достичь.

В процессе обсуждения сформировалась команда проекта из трех человек:

  • тимлида группы UX;
  • UX-аналитика;
  • UX/UI-дизайнера.

Результат этапа — дорожная карта и заряженная энтузиазмом команда.

После встречи создали раздел в Notion, чтобы собирать и хранить информацию по проекту в одном месте. Например, на странице «Полезные ссылки» команда делится находками по части конкурентов, UI- и UX-решений, которые подходят под тематику проекта.

Этап 2. Пользовательские интервью

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

Исходя из информации с кик-офф-встречи и анализа текущего сайта составили скрининговую анкету в google-форме. Она помогла отобрать релевантных респондентов. Всего для исследования нам требовалось 8 человек.

Интервью проводили парами: UX-аналитик задавал вопросы, UX/UI-дизайнер сразу фиксировал ответы, чтобы сэкономить время на расшифровку.

После всех интервью собрали полученную информацию на одной странице в Figma, а затем поделили на тематические блоки.

После этого необходимо было обработать все полученные данные и визуализировать для дальнейшей работы. Для этого использовали карту эмпатии. Она помогла систематизировать информацию и выявить причины действий и решений пользователей, основываясь на его контексте: что он чувствует, видит и слышит вокруг себя. Кроме того, карта помогает сконцентрироваться на целевом клиенте, отбросив субъективное восприятие.

💡 Чем полезна карта эмпатии:
  1. Выявляет причины, лежащие в основе действий и решений пользователей, чтобы проектировать продукты для удовлетворения их реальных потребностей.

  2. Позволяет пропустить через себя часть его опыта так, как это невозможно при прослушивании или чтении отчёта.

  3. Заинтересованные стороны начинают понимать пользователей, мысленно и эмоционально подготавливаются к восприятию дизайн-решений.

Для формирования полноценного образа целевой аудитории добавили в карту портрет пользователя: контекст взаимодействия, его цели, боли и потребности (мотивацию).

В результате выявили подход к выбору мебели:

  • Желание вдохновляться. Нужно захотеть жить вместе с этой мебелью.
  • Найти образ, а не конкретную модель мебели (сайт должен помочь с выбором).
  • Интересно самим планировать интерьер своей квартиры.

И поняли, что блокирует онлайн-покупку:

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

Этап 3. Аудит и бенчмаркинг

На этапе параллельно работали три специалиста:

  • Тимлид делал веб-аналитику.
  • UX/UI-дизайнер анализировал карточку товара и фиксировал хорошие решения в сфере E-com.
  • UX-дизайнер анализировал листинг товаров категории «Спальни» и готовил отчёт, который в итоге составил почти 40 страниц.

Блок работ был направлен на изучение существующего сайта. Задача — понять, какие есть проблемы в пользовательских сценариях и насколько они критичны.

Веб-аналитика

Анализ показал следующие моменты:

  • 68% пользователей смотрят сайт с мобильных устройств. Это говорит о необходимости делать упор на адаптивную версию сайта. Эти данные подтверждает и исследование Яндекса по рынку мебели.
  • На страницах листинга и карточки товаров есть ряд слабых мест:
      • кнопки целевых действий имеют низкую конверсию;
      • информация о товаре спрятана за вкладками — их пользователи не кликают, а значит, не читают.
  • Интересы пользователей — «Дизайн интерьера». По версии Яндекса, это 50% всех клиентов. Эту информацию можно использовать для наполнения страницы полезной информацией и подсказками.

UX-аудит листинга товаров

Отметим наиболее критичные моменты, которые выявили на этапе аудита:

  • Страница перегружена контентом (боковая часть страницы заполнена баннерами, seo-текстом, виджетами, которые забирают на себя часть внимания и могут мешать пользователям считывать основной контент).
  • Неотзывчивый интерфейс (состояния «добавить в избранное» и «добавить в корзину» не меняются).
  • На момент анализа уже подтвердили важность адаптивной версии сайта и нашли несколько ошибок, блокирующих возможность просматривать контент и добавить товар в корзину.
  • Особое внимание уделили карточке товара, а именно её информативности и лёгкости восприятия:
      • большие маркетинговые метки на фото;
      • фото спальни с мелкими деталями, которые сложно считываются;
      • непонятно, что входит в состав спальни.

UX-аудит карточки товаров

Отметим ряд проблемных моментов, которые выявили на этапе аудита:

  • Тяжело считывается фото- и видеоконтент. Не вдохновляет, так как человек не может на нём сосредоточиться.
  • Скомканная подача информации. Например, использование двух колонок.
  • На странице нет структуры в подаче контента, нет «истории». Например:
      • из-за множества ярких пятен пользователю сложно понять, что от него хотят;
      • кнопку «Добавить матрас» не видно, и неясно, почему она расположена вверху, когда пользователь ещё не досмотрел спальню.
  • Сайт не помогает выбрать спальню. Непонятно, почему человек должен купить именно эту спальню и именно у этой компании, чем данная модель отличается от другой.

Этап 4. Проектирование

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

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

Подумали о том, с чем можно сравнить покупку спальни по ощущениям, которые испытывают люди (тут как раз помогла карта эмпатии). Пришли к идее, что эмоционально процесс похож на покупку дорогого брендового автомобиля (референсы Lexus, Porsche). Человек должен влюбиться в машину, чтобы отдать за неё много денег и не пожалеть о выборе.

Во второй версии прототипа добавили больше фотоконтента и реализовали интерактивные элементы: при клике на отдельные объекты пользователь видит, что это за предмет и сколько он стоит.

Этап 5. Дизайн-концепция

При разработке дизайн-концепции ориентировались на позиционирование бренда. В интерьерах, офлайн-магазинах, в подходе к покупателям «Ангстрем» транслирует фокус на трансформации и преображении, дизайне и стиле во всём. Нам важно было сохранить узнаваемость бренда и соединить онлайн и офлайн на сайте.

Чтобы подчеркнуть стиль и современность бренда, подобрали утонченную типографику: Tenor Sans для больших заголовков и Circle для основного текста. Эти шрифты не толстые и не тонкие, без засечек, что подчёркивает стиль и современность интерфейса, но при этом делает их читаемыми, в том числе для слабовидящих пользователей.

В цветовых решениях предложили использовать богатые, но в то же время экологичные основные цвета — чёрный и охру. Они в том или ином виде фигурируют во многих коллекциях «Ангстрема», а значит, будут лаконично сочетаться при представлении различных интерьерных решений на сайте.

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

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

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

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

Благодаря всплывающим элементам происходит интерактивное взаимодействие и вовлечение пользователя. Мебель рассказывает о себе.

Результат

Для нас этот проект стал настоящим марш-броском, который нужно было сделать качественно за суперсжатые сроки (напомним, у нас всего было 2 недели).

На итоговой презентации для команды клиента сделали большой упор на аналитику. А после последнего слайда — пара секунд молчания, и реакция — «Ух ты! Круто! Спасибо за презентацию!»

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

Ключевыми выводами делимся с вами.

Положительные моменты:

  • Отлично сработал мозговой штурм командой проекта. Накидали хороший план работ, распределили обязанности.
  • Быстро собрали и провели интервью. 100%-я явка — показатель, о котором мечтает каждый исследователь. Обсуждение итоговых результатов внутри команды помогло и аналитикам, и дизайнерам действовать в одном контексте.
  • Отличная идея — карта эмпатии. Наглядно визуализировали интервью. У клиента на карту была положительная реакция.
  • Быстро сделали UX-аудит. Для данного проекта из-за сроков снизили глубину аудита, рассматривали только проблемные/спорные моменты с точки зрения нашей экспертизы.
  • Параллельная работа по проектированию и дизайну позволила уложиться в сроки.
  • Вовремя среагировали, когда у UX-дизайнера был затык на этапе проектирования, созвон всей командой помог найти хорошее решение.
  • Из-за вовлечения UX/UI-дизайнера на этапе аналитики быстро разработали дизайн-концепцию.
  • Репетиция презентации внутри команды помогла качественно выступить и ответить на дополнительные вопросы клиента.

Что можно улучшить:

  • Хранителя знаний о проекте выбрали не сразу, а позже, когда начались работы. Из-за этого пришлось потратить некоторое время на сбор и структуризацию информации.
  • Можно было бы провести 5–6 интервью вместо 8. Результаты не сильно бы отличались.
  • Аудит карточки товара нужно было делать тому же, кто впоследствии проектирует страницу (у нас делал UX/UI-дизайнер, а проектировал UX-дизайнер). Так как проектирует один, а анализирует другой человек, всё равно приходится пересматривать информацию ещё раз. Получается двойная работа.
  • Готовить презентацию нужно тому, кто будет выступать с ней. У нас в начале делал UX/UI-дизайнер, а потом пришлось править по комментам от UX-дизайнера.
  • Всё, что хотели добавить с точки зрения доп. функционала, оформили в фич-лист на следующие релизы. Но забыли о нём на презентации. Пришлось уже потом отправлять клиенту, хотя многие фишки хотели презентовать голосом.

Над проектом работали

icon
Ольга
Аккаунт-директор
icon
Аня
Руководитель проектов
icon
Ирина
UX Team-lead
icon
Катя
UX-аналитик
icon
Маша
UX-аналитик
icon
Таня
UX-аналитик
icon
Маша
UI-дизайнер

Другие кейсы

Корпоративный сайт для «Сибирской горно-металлургической компании»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1

Лендинг к 10-летию Российского научного фонда

UI-дизайн
Спецпроект
Анимации
+ ещё 2

Корпоративный сайт для «Нового Втормета»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Сайт для новой государственной компании «Роскадастр»

Сайт для новой государственной компании «Роскадастр»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1

Цифровая экосистема для AI-управления финансами для компании «Нескучные финансы»

B2B-сервис
UX-проектирование
Highload-сервис
+ ещё 4
Обсудить проект