Cоздание интернет-магазина детских товаров

В этой статье описан процесс создания интернет-магазина детских товаров “Все для крохи”. Приведены задачи проекта и подробно изложен процесс их решения.

Задача

Разработать интернет-магазин для продавца детских товаров под торговой маркой “Все для крохи”. Разработку выполнить на платформе 1С Битрикс “Бизнес”.
В том числе разработать новый логотип торговой марки и дизайн магазина.

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

Цели проекта

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

В новый путь с новым логотипом

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

Главная страница сайта

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

Страница каталога

Каталог имеет вполне привычный дизайн для такого типа страницы. Вниманию покупателя предлагается лента товаров текущей категории, фильтр по продукции, меню брендов и меню категорий.
Находясь в какой-либо категории товара покупатель может перейти на страницу бренда связанного с данной категорией. Там будет отображен товар данной категории, выбранного бренда. Например, находясь в категории детских кроваток, можно перейти к бренду Giovanni и посмотреть кровати только этого производителя. Так же наличие таких страниц (страница производителя) очень удобно и для продвижения сайта.
Сортировка товаров категории по умолчанию определяется правилами стороннего сервиса - RetailRocket. Таким образом, покупатель изначально видит товар, который вероятней всего будет ему интересен. Более подробно взаимодействие с сервисом рекомендаций описано ниже.

Карточка товара

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

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

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

Корзина

Особенностью дизайна страницы корзины является блок “Доставка”. В этом блоке мы показываем покупателю (а так же предлагаем выбрать), какой способ доставки товара будет использован и сколько он стоит. Это сделано для того, чтобы покупатель уже на шаге корзины имел полное представление об общей стоимости заказа.
По умолчанию предлагается доставка в его город (определенный по ip адресу покупателя) самый выгодным по стоимости способом. При этом покупатель может изменить способ доставки на другой или даже сменить город доставки.
Доставка, как правило, оплачивается отдельно, поэтому мы не прибавляем ее автоматически к стоимости товара, а указываем отдельно.

Оформление заказа

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

Поиск с подсказками

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

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

Товарные рекомендации

Внедрение товарных рекомендаций стало важным шагом при разработке магазина. Это не просто дополнительная интересная функция, а очень серьезный функционал способный увеличить средний чек вплоть до 50%. Что в свою очередь, увеличивает прибыль магазина.
На момент принятия решения о использовании сервиса рекомендаций еще не было “родного” сервиса от Битрикса — BigData. Потому мы выбирали среди сторонних решений и остановились на RetailRocket (RR).
Принцип взаимодействия с сервисом торговых рекомендаций следующий. Мы отдаем им данные о товарной базе магазина (ассортимент), а так же устанавливаем ряд кодов отслеживания. Так RetailRocket может собирать статистические данные о поведении покупателей магазина и при их обработке и анализе выдавать ассоциативные товарные цепочки или рекомендации.
Например мы используем данные от RR для вывода блока похожих товаров, в случае если текущего товара нету в наличии. В таком случае даже если покупатель попал в карточку товара, которого сейчас нету на складе, сайт порекомендует ему аналоги.

Другим примером является блок “С этим товаром покупают”. Не смотря на то, что внешне такой блок полностью похож на “Похожие товары”, но при этом алгоритм подготовки выборки товарных рекомендаций совсем иной. В этом случае RR предлагаем товары, которые могут быть интересны покупателю, для совместной покупки с текущим товаром. И при этом есть вероятность, что он вместе с просматриваемым товаром купит еще что-то из дополнительно предложенных вариантов.
Точно по такому же принципы мы выводим рекомендации и во всплывающем окне при добавлении товара в корзину.

Здесь мы так же предлагаем покупателю обратить внимание на товар, который может пригодится, как дополнительный к текущей покупке.
И это еще не все. Даже сортировка товаров в каталоге осуществляется на основе данных от сервиса рекомендаций.
Все это позволило увеличить средний чек магазина в феврале 2015 на 107% (статистика из системы Retail Rocket). Мы считаем, что это вполне достойный показатель.

Калькулятор стоимости доставки

Магазин “Все для крохи” доставляет заказы по всей территории России. И если вы покупатель из региона, то вам будет очень полезна информация сколько обойдется доставка того или иного товара в ваш населенный пункт.
Раньше все это рассчитывалось вручную при подтверждении заказа покупателя. Менеджер уточнял у клиента куда и каким способом нужно доставить и потом уже по выбранной транспортной компании и ее тарифам рассчитывал стоимость доставки. Все это было не слишком удобно. Во-первых при заказе на сайте покупатель не представлял во что ему обойдется доставка и это отталкивало некоторых клиентов. Во-вторых и покупатель, и менеджер затрачивали некоторое время на выяснение деталей доставки по телефону. Мы решили упростить этот процесс.
Первое, что было сделано — всем товарам добавили два новых свойства: вес и объем в упаковке. Эти данные необходимы для расчета стоимости перевозки груза транспортной компанией.
Второе — внедрили на сайт модуль автоматического расчета стоимости доставки “eDost”. Этот модуль позволяет посчитать сколько будет стоить доставка выбранным способом в ваш населенный пункт.
При этом вы можете узнать стоимость доставки понравившегося вам товара прямо на его странице.

Магазин автоматически определяет ваше местонахождение (населенный пункт), и когда вы переходите к товару, показывает стоимость доставки самым дешевым способом. В данном случае нам предлагается использовать транспортную компанию ПЭК для доставки в Ростов-На-Дону. Стоимость — 565 рублей.
Если вам нужна доставка в другой населенный пункт, вы можете его легко сменить. Так же у вас есть возможность выбрать другой способ доставки из доступных для вашего региона.

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

В заключении

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