С клиентом уже велась работа по продвижению в социальных сетях и управлению репутацией. По мере роста трафика на сайт мы обратили внимание, что, несмотря на положительную динамику, процент конверсии в продажи рос непропорционально низко. Поэтому с помощью Яндекс Метрики и Google Analytics мы проанализировали поведение пользователей на сайте с помощью вебвизора, карты кликов и путей по сайту. Выяснилось, что клиенты не всегда понимают, как пользоваться ресурсом: долго водят мышкой по экрану перед тем, как понять, на какой раздел кликнуть. Некоторые не выдерживали и покидали сайт, не совершив целевое действие. Отсутствовала адаптивная версия.

Ремит – один из немногих крупных производителей мясной продукции, кто успешно задействует digital-каналы в маркетинге. У компании отличная репутация, активные социальные сети, а на сайте представлена не просто общая информация, но и создан интернет-магазин. Ведется работа в направлениях SEO и PR. Мы лишний раз убедились в этом, проанализировав конкурентов. Но по сравнению с крупными специализированными интернет-магазинами, такими как Perekrestok.ru, Utkonos.ru, компании есть куда развиваться.

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

Большинство сайтов крупных ритейлеров разделяет Front-end и Back-End. Так как Back-end с точки зрения usability уделяется меньшее внимание, мы проанализировали Front-end и выяснили, что многие платформы работают на одностраничных приложениях. Часто используется движок AngularJS. Это позволяет увеличить скорость работы ресурса, но в то же время теряется возможность прямой индексации поисковыми роботами, потому что они видят только одностраничный сайт. Для этого Яндекс дал рекомендации по созданию слепков динамических страниц с добавлением параметра в url: ?_escaped_fragment_=. Но есть способы проще, такие как Prerender.io.

Благодаря сервису developers.google.com у современных разработчиков появилась возможность получить некоторые важные данные не из логов сервера через запросы в консоли Ubuntu, а в понятном графическом виде.

Стало ясно, что необходимо оптимизировать изображения, переработать их в правильный формат и сократить объем. На некоторых страницах присутствовали картинки формата BMP и TIFF.

Движок Bitrix добавлял лишние для данного сайта сервисные JS-скрипты в , которые необходимо было удалить, а остальные перевести на асинхронную загрузку. Большое количество CSS-файлов с неактуальными стилями замедляли загрузку страницы и создавали путаницу для разработчика. Отсутствовало кэширование сайта и, соответственно, заголовки Expires и Cache-Control: max-age, Last-Modified и ETag.

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

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

Разные интерфейсы страницы поиска мешают пользователю привыкнуть к сайту и однозначно определить свое местоположение.

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

Битые изображения на странице продукта

Карта популярных разделов продемонстрировала востребованность интернет-магазина

Использовалась методика «5W» Марка Шеррингтона, в которой мы ответили на вопросы:

• Что? Мясная продукция: колбасы, деликатесы, полуфабрикаты, сосиски и сардельки, HoReCa Line, Organic.
• Кто? Физические лица, мужчины и женщины от 20 лет. Все, кто употребляет колбасную и мясную продукцию. Организации общественного питания.
• Почему? Вкусная, качественная продукция с широким ассортиментом по среднерыночной цене. Удобный клиентский сервис для юридических лиц.
• Когда? Ежедневный спрос. Повышенный спрос в выходные и праздники.
• Где? Москва и Подмосковье. Розничные магазины, супермаркеты, фирменные магазины, интернет-магазин, предприятия общественного питания.

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

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

Важно создать «сквозное» меню с продукцией, одинаковое на каждой странице сайта. Быстрая доступность каталога увеличит конверсию. Отображать часть содержимого раздела на первом уровне вложенности. Анонсируя первые 3-6 видов сырокопченых колбас в главном каталоге, можно сократить количество действий пользователя для ознакомления с содержимым каталога. Выводить количество видов/штук товаров рядом с его наименованием. Количество товаров создает ощущение актуальности электронного каталога, позволяет понять масштаб сайта.

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

Использовать фирменный шрифт, увеличить размеры шрифтов, уменьшить разнообразие размеров, стилей и цветов шрифтов. Предложенные размеры шрифтов: заголовки – 24 px, основной шрифт – 18 px. Цвета: основной шрифт - #212121, ссылка - #3f51b5, вспомогательный шрифт – #929292. Удалить лишние фоны, рамки, графические разделители, отвлекающие внимание пользователей от покупки.

Предложены схематические варианты организации интерфейса:

Главная страница с популярными товарами на основе анализа карты кликов

Страница товара

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

Организация корпоративного блога

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

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

Добавить кнопки авторизации через социальные сети, например, Ulogin. Пользователь может привязать аккаунты социальных сетей, откуда можно получить личную информацию, например, день рождения. В день рождения пользователей, можно автоматически отправлять купон на скидку по e-mail.

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

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

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