Как мы дорабатывали карточку товара в магазине Техникс-Маркет

Постановка задачи и выявление проблем

От клиента поступил заказ: повысить конверсию карточки товара с 0,5% до 5%.

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

Двигаться решили снизу вверх. От карточек товара вверх по дереву каталога.

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

Итак, смотрим типичную карточку товара, которые были до доработки:

Так выглядела карточка товара до «переделки»

Выявленные основные проблемы:

1. На первом экране пользователя почти нет информации о товаре

Первый экран пользователя

Типичный первый экран пользователя с разрешением экрана 1280*800. С первой попытки даже тяжело понять, о чем страница, и что предлагает этот магазин.

2. Название товара было не в теге h1 и выглядело несерьезно

Неправильный вывод названия товара

Визуально нет акцента на названии товара. Некуда привязывать взгляд посетителя.

3. У товаров есть фотографии, причем в хорошем качестве

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

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

4. Информация о товаре

По-умолчанию выводилось описание товара. Остальная информация скрывалась в табки. Вот как это выглядело:

Вывод информации о товаре

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

5. Боковое меню

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

Его можно было бы полностью убрать, но тогда страница казалась пустой и не законченной.

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

6. Добавить на сайт траста

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

7. Добавить элементы навигации

На сайте не было «хлебных крошек» — и мы решили их добавить для более удобной навигации по ресурсу.

Итак, очертив круг задач и понимая, что во время работы еще придут идеи, мы приступили к работе.

Процесс работы

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

  • количество фото — если их больше 4х у товара, все ломается.
  • если у товара нет характеристик — все ломается.
  • глюки с выводом цены и кнопки «заказать» при отсутствии товара на складе.

и еще сотни мелких проблем.

К концу рабочего процесса у нас уже набралась специальная тестовая выборка разных товаров, на которых испытывали все нововведения и искали глюки. Особенно было интересно, когда тестовая выборка отрабатывала на отлично, а когда позже мы показали клиенту параметр и методику работы с ним, заказчик нашел еще 2-3 товара, где были проблемы.

Поистине тестирование важно!

Все эскизы нового вывода компонентов рисовались от руки на А4. Почему  не использовали специальное ПО? От руки было быстрее. )) И как-то нагляднее. По крайней мере для нас. Правда до программиста наши идеи доходили уже в отсканированном виде, поэтому о наглядности наших материалов с его точки зрения мы только догадывались.

Что в результате?

Перед просмотром карточки товара стоит обратить внимание, как мы решили проблему «мешающего» вертикального меню.

Новое горизонтальное меню

Мы сделали горизонтальное меню. У нас было ограниченное количество корневых категорий, которые отлично вписались по-горизонтали. Подкатегории в выпадающих менюшках. Цвет и фон шрифта подобрали под стиль всего сайта. А еще оранжевый хорошо привлекает внимание.

Итак, проблему меню решили, вернемся к карточке товара.

Вот что у нас получилось:


Внешний вид обновленной карточки товара

Давайте рассмотрим более детально.

Первый экран посетителя

Первый экран пользователя

Посетителю достаточно, условно говоря, нескольких шагов, что бы увидеть всю информацию:

  • Название
  • Картинку товара
  • Стоимость
  • Наличие и кликнуть на «заказать»

Название товара теперь есть в теге H1 и не теряется на странице. Так же хорошо «бросается в глаза» стоимость товара и кнопка «заказать».

Блок с фото

Блок оформили компактно, что позволило на небольшой площади вывести основное фото + мини-галерейку.

Компоновка внешнего вида блока с фото

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

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

Так как места стало больше, справа мы вывели характеристики товара, причем не все, а только часть. Остальное скрыли под спойлер. При необходимости можно кликнуть на него и получить все параметры товара в одном месте.


Вывод блока спецификаций товара

 Центральный блок

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

Центральный блок на карточке товара

Выделяющаяся стоимость привлекает внимание. Ниже под ней выводим наличие на складе в Харькове. Эта информация всегда важна и актуальна для посетителя.

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

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

Информация о стоимости доставки недорогих товаров

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

Вывод информации о доставке «на сегодня»

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

Так же мы не забываем и о клиентах с других областей Украины — показываем информацию о возможной доставке товаров по стране автоперевозками.

«Блок траста»

Еще один блок для усиления доверия клиента к магазину мы разработали и разместили ниже основной информации по товару.

Вывод трастовых блоков магазина

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

Назначение блока — убедить клиента в том, что данный ресурс — это не 2 студента на «перекупе», а реальный магазин со своей инфраструктурой и поддержкой от производителей.

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

Подтверждаем заказ за 60 минут — четко разграничиваем время отклика магазина. Клиент должен понимать, что оставив заявку и оформив корзину, он «железно» получит ответ максимум за час. Это политика магазина и стандарт обслуживания.

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

Указывая на возможный обмен в течение 14 дней мы показываем клиенту, что работаем в правовом поле. Все по законам Украины.

Принимаем Visa/mastercard — возможность оплачивать товары картой. Да, наша доставка ездит с терминалами оплаты, поэтому здесь полная свобода выбора у клиента.

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

Блок «Описания».

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

Блок «Расходные материалы».

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

Блок — «Вы просматриваете»

Вывод блока «Вы просматриваете»

Данный блок расположили в конце страницы; с его содержимого напоминаем посетителю, зачем он здесь. Что бы купить! Еще раз показываем фото, цену, наличие, условия доставки и повторяем номер телефона, который уже скрылся из виду, при скроллинге страницы вниз. Так же агитируем подключиться в онлайн чат и побеседовать с менеджером в живую.

Блок «Другие товары».

Перелинковка с другими товарами этой категории

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

Итоги

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

Сейчас судить о конверсии мы объективно не можем. Работы начались в период повышенного спроса, потом был летний спад и осенняя депрессия. Однако видя разницу между тем, что было, и что стало, мы больше чем уверены, что у нас все получилось. И клиент доволен, по ощущениям, говорит, звонить стали больше.