Кейс: редизайн карточки товара в интернет-магазине

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

Почему это важно?

Данные исследования Forrester Consulting показали, что около 55% людей не совершают онлайн-покупки по единственной причине — они хотят увидеть и «пощупать» товар до приобретения. Поэтому эффективность продаж напрямую будет зависеть от того, как выглядит Ваш товар на странице магазина.

Структура карточки товара

Начало работы

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

Было

Стало

Больше гарантий, больше уверенности в покупке!

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

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

Выбор вариаций

По статистике магазина 75% вопросов, задаваемых пользователями по телефону касательно приманок, связаны с наличием других цветов и аттрактантов. Поэтому данным элементам было уделено должное внимание.

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

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

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

Характеристики

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

По этой причине при доработке дизайна карточки товара интернет-магазина в Битриксе мы перенесли блок «Характеристики» на первый экран и поместили его рядом с фото.

Было

Стало

Сопутствующие товары

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

Было

Стало

Доставка

Визуально доработан блок о доставке в карточке товара. Он стал более выразительным и заметным:

Стало

Добавление в корзину

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

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

Было

Стало

Итоги работы

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

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

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

Над задачей работали

Сергей Стеценко

Программист. Front- end разработчик
Разработка сайтов на Bitrix, WordPress. HTML/CSS/PHP/JS/SQL.

Олег Фролов

CEO, партнер
Продажи. Управление проектами. SEO. Разработка сайтов на CMS Wordpress и Битрикс.

Оставить комментарий

avatar
  Подписаться  
Уведомление о

Бесплатный аудит
сайта или аккаунтов в соцсетях

Оставить заявку
close-link
ПОЛУЧИТЬ БЕСПЛАТНЫЙ АУДИТ