Кейс создание интернет-магазина: рост продаж в 3 раза для магазина по продаже продуктов питания

30 марта 2017

Оригинал http://cases.cmsmagazine.ru/cases/3264/
Автор batobiz.ru

заказчик

Фудзи-сан - крупный гипермаркет японских продуктов. Представлен интернет магазином и онлайн гипермаркетом в Москве. Предлагает все необходимое для самостоятельного приготовления блюд азиатской кухни дома.

задача

Сделать новый продающий сайт интернет магазина. Увеличить продажи, конверсию.

Исходные данные интернет магазина (статистика: яндекс метрика)

Данные до внедрения нового интернет магазина

Посещаемость в среднем 110 чел/день

Отказы 29%

Глубина просмотра: 3,87 страниц за сеанс

Время на сайте: 3, 27 минут

см. (рис старт1)

Рис старт1. График посещаемости интернет магазина с 1 июля по 30 сентября 2015 года (статистика: яндекс метрика)

Проблематика (предыстория):

Со слов клиента, интернет магазин практически не продает. Продажи растут только за счет email-рассылки по базе постоянных клиентов, которая делается не чаще 2 раз в неделю. Потому что, заметили что при частой рассылке, покупатели начинают отписываться от рассылки, и добавлять письма в спам. В отсутствии продаж включают рекламу в Яндекс Директе, но показатель ROI (показатель рентабельности вложений) крайне низок.

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

Старый движок магазина был WebAsyst Shop-Script 4. К админке клиент уже привык, нареканий к ней не было, в отличии от внешней составляющей дизайна сайта. Поэтому решил делать магазин на той же cms shop script, только на новой версии.

После чего клиент нашел нашу компанию Batobiz Group в разделе экспертов на официальном сайте cms https://www.webasyst.ru/ и обратился за разработкой.

Наши действия и выбранная стратегия

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

2) Получили/расчитали основные бизнес показатели:

  • УТП (уникальное торговое предложение - преимущество);
  • аналитику продаж со старого сайта (ROMI или ROI);
  • ознакомились с LTV (суммарная прибыль, получаемая магазином от конкретного покупателя за весь его жизненный цикл);
  • установили средний чек покупки;
  • список компаний конкурентов;
  • и другие действия.

2) Провели опрос среди сотрудников компании и узнали, что нравилось/не нравилось на старом сайте, чего не хватает, и другие действия.

3) Ознакомились с ассортиментом продаваемой продукции.

4) Вместе с заказчиком составили подробный бриф на разработку нового интернет магазина.

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

0 этап: Обработка и сбор дополнительных данных для разработки.

Останавливаться на данном этапе мы не будем. Так как он содержит коммерческую тайну нашей веб студии.

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

1 этап: Проектирование.

Первая и самая важная цель любого сайта - "продавать".

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

2 этап: Разработка уникального дизайна и логотипа.

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

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

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

Логотип (до разработки) (см. рис 1):

Рис 1. Логотип сайта до разработки нового дизайна.

Логотип (после внедрения) (см. рис 2):

Рис 1. Логотип сайта после внедрения нового дизайна.

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

Забегая вперед, конверсия интернет магазина значительно выросла после внедрения нового интернет магазина, при той же посещаемости, значит сделаем вывод - новый дизайн работает.

3 этап: Верстка и программирование

  • Верстка шаблона с использованием микроразметки;
  • Адаптация по все типы браузеров и мобильных устройств;
  • Размещение контактной информации и логотипа;
  • Вывод системы публикации новостей на сайте;
  • многоуровневый каталог товаров с удобными фильтрами;
  • Публикация слайдера на главной странице и всплывающей фотогалереи;
  • Форма обратной связи (заказ обратного звонка);
  • Настройка фильтров сортировки товаров на сайте;
  • живой поиск с подгрузкой товаров в поисковой строке;
  • мобильная версия сайта;
  • другие действия;

4 этап: Внедрение фишек.

  • возможность купить в один клик;
  • предзаказ товара (если нет в наличии);
  • предпросмотр товара;
  • возможность сравнить несколько выбранных товаров, добавить в избранное;
  • возможность увидеть недавно просмотренные товары:
  • вывод блоков: перекрестные продажи, рекомендуемые товары;
  • другие действия;

5 этап: Администрирование и настройка.

  • подключение и настройка популярных платежных систем: робокасса, яндекс деньги и т.д.
  • настройка уведомлений по почте и по смс о заказе;
  • экспорт товаров в Яндекс.Маркет;
  • другие действия;

6 этап: Перенос товаров со старой версии интернет магазина (предыдущий движок также webasyst только более старой версии).

7 этап: Тестирование.

тестирование и мелкие доработки;

8 этап: Сдача проекта.

  • обучение работы с cms сотрудников компании (возможно подключение удаленно);
  • техническая поддержка до 2 месяцев;
  • другие действия, прописанные в договоре по разработке.

Как поменялся внешний вид интернет магазина (сравнение до и после внедрения новой дизайн-концепции):

1) Десктопная версия:

А) Главная страница (до разработки) (см. рис 3):

Рис 3. Главная страница сайта до разработки нового дизайна.

Главная страница (после внедрения) (см. рис 4):

Рис 4. Главная страница сайта после внедрения нового дизайна.

Что мы внедрили в структуре новой концепции главной страницы сайта. Фишки.

Добавлены следующие блоки:

В шапке сайта:

Блок 1: Размещение логотипа.

Блок 2: Дизайнерские кнопки на социальные группы компании.

Блок 3: Контактные телефоны + время работы магазина по дням недели.

Блок 3.1: Корзина в правом верхнем углу.

Блок 4: Красивый динамический слайдер выполненный в виде витрины товаров, ссылки ведут на самые актуальные и нужные разделы интернет магазина:

  • новинки;
  • акции и скидки;
  • новогодние подарки;
  • цены пополам (акция);
  • лидеры продаж;
  • товар недели;

Блок 5: Блоки витрин, выполненные в виде слайдеров-товаров:

  • сегодня цены снижены;
  • цены пополам;
  • новинки;

Блок 6: Вывод динамического блока отзывов покупателей в нижней части сайта.

Блок 7: Контактная информация в футере сайта (footer):

  • адрес офиса;
  • контактные телефоны;
  • email адрес компании;

Б) Страница категории (до разработки) (см. рис 5):

Рис 5. Страница категории до разработки нового дизайна.

Страница категории (после внедрения) (см. рис 6):

Рис 6. Страница категории после внедрения нового дизайна.

Что мы внедрили в структуре новой концепции страницы категории сайта. Фишки.

Добавлены следующие блоки:

Блок 1: Фильтр товаров. Расположен сразу же под горизонтальным меню.

Блок 2: "Живой поиск" с подгрузкой товаров в поисковой строке.

Блок 3: Страницы подкатегорий на основании пользовательских запросов. То есть как еще искали «косметику».

Блок 4: Сортировка товаров по цене, дате добавления, популярности и т.д. Возможность сменить режим отображения товаров.

Блок 5: Для каждого товара добавлена возможность добавить в избранное или для сравнения с аналогичным товаром.

Блок 6: Левое вертикальное выпадающее меню с вложенной иерархией в стиле "аккордеон" с ссылками на страницы категорий и подкатегорий.

Блок 6.1: Верхнее горизонтальное выпадающее меню с вложенной иерархией с ссылками на основные текстовые страницы .

Блок 7: Вывод в левом блоке сайта (sidebar) следующих блоков (по порядку):

  • новости;
  • акции;
  • отзывы клиентов с рейтингом;
  • вопрос/ответ;
  • полезная информация;

Блок 8: Форма подписки на акции и скидки (email рассылка).

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

В) Страница карточки товара (до разработки) (см. рис 7):

Рис 7. Страница карточки товара до разработки нового дизайна.

Страница карточки товара (после внедрения) (см. рис 8):

Рис 8. Страница карточки товара после внедрения нового дизайна.

Что мы внедрили в структуре новой концепции страницы карточки товара сайта. Фишки.

Добавлены следующие блоки:

Блок 1: Для каждого товара есть возможность добавить в избранное, к сравнению с аналогичным товаром и печать.

Блок 2: Кнопка "купить в 1 клик", с помощью которой можно быстро оформить заказ без перехода в корзину.

Блок 3: Ссылки на категории и подкатегории, в которых показывается товар (требуется для внутренней перелинковки) + кнопки поделиться в социальных сетях.

Блок 4: Добавлена возможность просмотра фотографии товара в режиме zoom ("увеличительное стекло") или всплывающей фотогалереи.

Блок 5: Вкладки (табы) с информацией, относящейся к конкретному товару:

  • обзор о товаре;
  • характеристики;
  • отзывы;

Блок 6: Блок "с этим товаром покупают", выполненный в виде слайдеров-товаров. Увеличивает средний чек покупателя.

Г) Страница корзины:

К сожалению сейчас посмотреть нельзя.

Страница корзины (после внедрения) (см. рис 9):

Рис 9. Страница корзины после внедрения нового дизайна.

Что мы внедрили в структуре новой концепции страницы корзины. Фишки.

Добавлены следующие блоки:

Блок 1: Наглядная витрина с выбранными товарами. Левый блок меню и другие лишние отвлекающие элементы от покупки на странице "корзины" отключены.

Блок 2: Возможность получить скидку по купону, начисляемому за предыдущие покупки.

Блок 3: Кнопка "быстрая покупка", с помощью которой можно быстро оформить заказ без перехода к заполнению форм заказа: контактная информация, доставка и т.д.