Продуктовый листинг и товарный лендинг для «Ангстрема»
Главное о кейсе
#1
За 2 недели погрузились в бизнес клиента, провели исследования, подготовили прототипы и разработали дизайн для листинга и продуктового каталога сайта.
#2
На базе проведенных глубинок с пользователями разработали карту эмпатии, которая сформировала полноценный образ целевой аудитории сайта.
#3
Для дальнейшего развития проекта составили фич-лист с идеями по контенту и функционалу.
О клиенте
Компания «Ангстрем» — крупное российское предприятие по производству корпусной мебели для дома. Основана в Воронеже в 1991 году, и за это время прошла путь от небольшого производства в домашних условиях до одного из крупнейших производителей и операторов мебельного рынка России.
«Ангстрем» — первый поставщик в России мебели из плитных материалов для IKEA. В 2020 году компания показала рекордный рост, который составил более 40%. Региональная розничная сеть «Ангстрема» — вторая по величине в РФ (более 70 городов).
Задача
Компания обратилась к нам с задачей переработать каталог и шаблон карточки спальни с целью улучшить пользовательский опыт (UX) и, как результат, изменить ключевые KPI:
- сокращение процента отказов;
- рост продолжительности визита;
- рост количества просмотренных страниц;
- рост конверсии на заказы с сайта.
Сроки стояли максимально короткие: на проведение всех работ было две недели.
Из ограничений по дизайну были фирменные шрифты, начертание и цветовое решение бренда «Ангстрем». Брендбук отсутствовал, так как константы фирменного стиля не были определены до конца и работа по этому направлению велась параллельно на стороне компании.
Основные критерии при оценке дизайн-концепции клиент определил следующие:
- соответствие целевой аудитории и позиционированию;
- уменьшение визуального «шума»;
- современный дизайнерский стиль.
Работа над проектом
Предстояло проделать много работы, чтобы на итоговой презентации ответить на основные вопросы:
- Как сделать выбор спальни максимально удобным для пользователей с точки зрения юзабилити?
- Какие элементы стоит убрать с текущего сайта, а какие, наоборот, добавить?
- Как можно изменить/усилить контент?
- Какие цвета и графику использовать в дизайне страниц?
Всю работу поделили на этапы и дальше расскажем о каждом из них.
Этап 1. Мозговой штурм
В тот же день устроили созвон на два часа всей командой. Цель — составить план проекта: продумать, какие работы необходимо провести, кого из сотрудников подключить, каких результатов необходимо достичь.
В процессе обсуждения сформировалась команда проекта из трех человек:
- тимлида группы UX;
- UX-аналитика;
- UX/UI-дизайнера.
Результат этапа — дорожная карта и заряженная энтузиазмом команда.
После встречи создали раздел в Notion, чтобы собирать и хранить информацию по проекту в одном месте. Например, на странице «Полезные ссылки» команда делится находками по части конкурентов, UI- и UX-решений, которые подходят под тематику проекта.
Этап 2. Пользовательские интервью
Следующий шаг — изучение целевой аудитории. Нам важно понимать, для кого мы делаем продукт: какие боли есть у этих людей, о чём они думают и как принимают решения при выборе и покупке мебели.
Исходя из информации с кик-офф-встречи и анализа текущего сайта составили скрининговую анкету в google-форме. Она помогла отобрать релевантных респондентов. Всего для исследования нам требовалось 8 человек.
Интервью проводили парами: UX-аналитик задавал вопросы, UX/UI-дизайнер сразу фиксировал ответы, чтобы сэкономить время на расшифровку.
После всех интервью собрали полученную информацию на одной странице в Figma, а затем поделили на тематические блоки.
После этого необходимо было обработать все полученные данные и визуализировать для дальнейшей работы. Для этого использовали карту эмпатии. Она помогла систематизировать информацию и выявить причины действий и решений пользователей, основываясь на его контексте: что он чувствует, видит и слышит вокруг себя. Кроме того, карта помогает сконцентрироваться на целевом клиенте, отбросив субъективное восприятие.
-
Выявляет причины, лежащие в основе действий и решений пользователей, чтобы проектировать продукты для удовлетворения их реальных потребностей.
-
Позволяет пропустить через себя часть его опыта так, как это невозможно при прослушивании или чтении отчёта.
-
Заинтересованные стороны начинают понимать пользователей, мысленно и эмоционально подготавливаются к восприятию дизайн-решений.
Для формирования полноценного образа целевой аудитории добавили в карту портрет пользователя: контекст взаимодействия, его цели, боли и потребности (мотивацию).
В результате выявили подход к выбору мебели:
- Желание вдохновляться. Нужно захотеть жить вместе с этой мебелью.
- Найти образ, а не конкретную модель мебели (сайт должен помочь с выбором).
- Интересно самим планировать интерьер своей квартиры.
И поняли, что блокирует онлайн-покупку:
- Расширенные возможности в офлайн: другой ассортимент, больше цветов, возможность тактильной и визуальной оценки мебели.
- Нет доверия размерам на сайте, и непонятны габариты.
- Нет обоснования цены (не понимают как выбирать, куда смотреть, почему визуально одинаковая мебель стоит по-разному).
- Существует порог ценового доверия, при котором люди не готовы делать покупки за стоимость выше определенного порога.
- Не хватает эмпатии и помощи живого консультанта.
- Нет отзывов о мебели спустя некоторое время использования. Отзывы о только что купленной мебели неинформативны, т. к. люди покупают мебель не на один год.
Этап 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-дизайнера.
- Всё, что хотели добавить с точки зрения доп. функционала, оформили в фич-лист на следующие релизы. Но забыли о нём на презентации. Пришлось уже потом отправлять клиенту, хотя многие фишки хотели презентовать голосом.