Редизайн интернет-магазина «Шкаф сегодня»
Кейс проекта редизайна сайта интернет-магазина
«Шкаф Сегодня» — студия интерьера и интернет-магазин мебели в Крыму.

На момент обращения заказчика к нам сайт интернет-магазина был клоном еще одного интернет-магазина мебели в Крыму. Сайт имел низкую конверсию, в т. ч. из-за сложного интерфейса выбора и заказа для категорий товаров.

Старт кампаний по продвижению в полном объеме был невозможен.
УСЛУГА
Редизайн сайта

ОБЪЕКТ РАБОТЫ
Сайт

ОТРАСЛЬ
Мебель, ecommerce
Цель и решаемые задачи
Необходимо было провести бизнес-анализ предложения клиента (товаров и сервиса), анализ работы сайта и целевой аудитории. Затем — спланировать и реализовать ряд доработок для улучшения конверсии. Доработки должны были позволить продажу тех категорий товаров, которые на момент старта работ вообще не продавались через сайт.

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

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


Анализ бизнес-целей и воркшоп
На старте проекта мы провели несколько дистанционных встреч и продуктовый воркшоп. Совместно заполнили несколько брифов по разным направлениям бизнес-анализа.

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

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

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

К ним отнесли:

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

Т. е. доработка была итерационной: отрезок в 3 недели, затем — небольшая порция доработок. После каждой итерации мы тестировали сделанные доработки и при необходимости добавляли в план исправления.
На сайте надо было решить проблему продажи ряда типов товаров, которые либо вообще не могут быть проданы «в лоб» по схеме ecommerce, либо должны иметь свой сценарий выбора, отличный от простых товаров. Например, это мебель на заказ или модульная мебель
План работ по итерационному редизайну сайта
Прототип и техническое задание
Чтобы показать и протестировать решения как на уровне концепции, так и на уровне создания прототипа, необходимо сделать ряд интерактивных элементов. Поэтому начинаем готовить прототип в Axure.
Прототипирование в Axure
Над страницей каталога любого уровня вложенности и локальной навигацией размещаем 5 основных особенностей (для каждой группы категорий или общие — в зависимости от вложенности). Они обозначают сервисные возможности компании для покупателя. Согласовываем такой вариант.
Прототип каталога
На данном этапе мы должны решить проблему товаров, имеющих настраиваемые параметры, по сути некоторую конфигурацию перед заказом. Показываем на карточке товара уведомление о необходимости выбрать параметры вместо кнопки «в корзину», делаем аналогичный якорь внимания на странице товара.
Начинаем проектировать категории товаров в каталоге. Первое, что действительно проблематично для покупателей, — товары, которые перед покупкой требуют выбора параметров. Изучаем действия через Вебвизор, смотрим статистику по веб-аналитике.

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

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

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

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

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

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

По сути, модульный товар должен был стать аналогом категории в каталоге.

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

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

Делаем, правим и согласовываем прототип раздела со всеми страницами.
Прототип способов оплаты
Прототип страницы «Кредит»
Прототип страницы «Доставка»
Параллельно с прототипами готовим технические задания для каждой итерации доработок.
Скриншоты из первой части технического задания
Скриншоты из второй части технического задания
Дизайн
Отдаем на дизайн внешнему подрядчику.

Готовим макеты под нашим авторским надзором — получаем макеты, готовим замечания, правки и т. д.

В итоге согласовываем макеты всех страниц с заказчиком.
Дизайн-макет страницы «Каталога»
Дизайн-макет страницы «Категория»
Дизайн-макет страницы «Товары на заказ»
Дизайн макеты каталога модульных товаров
Дизайн макеты страницы модульного товара
Дизайн макеты страницы модульного товара с открытым инфоблоком
Дизайн макеты новой шапки и СТА блоков на странице товара
Дизайн макет страницы «Способы оплаты»
Дизайн макет страницы «Способы оплаты» - «Кредит»
Дизайн макет страницы «Способы оплаты» - «Доставка»
Фронтенд- и бэкенд-разработка.
Тестирование и релиз Все описанные доработки были сделаны в несколько итераций. Каждая из них тестировалась, делался релиз, после чего готовились новые доработки, исходя из полученных результатов.
Результат
Для анализа результатов мы готовим модель KPI и настраиваем аналитику для отслеживания взаимодействия покупателя с сайтом на разных этапах выбора и покупки товара.

В целом мы получили рост конверсии до 160%.
    Скриншоты из отчета из аналитической записки

    В ходе проекта было создано

    • 9 аналитических записок (бизнес-анализ, анализ по каждой товарной категории, анализ целевой аудитории)
    • Составлен итерационный план доработок
    • Спроектировано 9 прототипов уникальных страниц
    • Написано техническое задание на реализацию каждой итерации проекта
    • Создано 9 дизайн-макетов уникальных страниц, макеты модальных окон и новой шапки
    • Сверстано столько-же страниц и написано много-много строк кода
    • Настроена аналитика и подведены итоги


    Проект был реализован в течении 5 месяцев 2016 года












    Проект редизайна интернет-магазина «Шкаф сегодня»
    http://shkaf.today


    Маркетинговая группа Литегра
    +7 912 856 1259
    anton.dir@litegra.ru