Интернет-магазин для вендинга: из офлайна, в онлайн

Компания «САМОВАР» более 10 лет представлена на вендинговом рынке. За эти годы развила крупнейшую вендинговую сеть в Вологодской области. Современное оборудование, оперативная техническая поддержка, качественные ингредиенты и товары — для того, чтобы обеспечить клиенту лучший сервис 24 часа в сутки, 7 дней в неделю.

Введение

Если у Вас 1–10 товаров, скорее всего интернет-магазин Вам не нужен. На каждый товар можно создать собственную посадочную страницу. Это будет работать эффективнее, займёт меньше времени и будет стоить дешевле. А если у Вас 100, 100 или даже 10000 товаров, Вам необходимо создавать удобную онлайн площадку для торговли.  

  • Основная задача любого коммерческого сайта — демонстрировать товар или услугу клиенту. По сути это электронный продавец. Чтобы этот электронный продавец работал, нужно учесть важные моменты:
  • Скорость загрузки сайта — это один из самых критичных факторов. Люди не будут долго ждать пока загрузится сайт, они просто откроют следующий;
  • Удобство для мобильных — с каждым годом количество мобильных устройств и мобильного трафика растёт. Многим уже не нужен компьютер и домашний интернет. Им хватает смартфона с безлимитным мобильным интернетом. Если Ваш сайт не адаптирован под смартфоны, Вы теряете минимум 50% клиентов;
  • Удобный поиск и навигация — люди хотят найти товар быстро и по нескольким критериям.

Компания «САМОВАР» уже более 10 лет представлена на вендинговом рынке. Основным трафиком заказов была их официальная группа Вконтакте. Время идет, компания растет. Появилась потребность в запуске своего собственного сайта и интернет-магазина.

Представители компании «САМОВАР» заполнили бриф. Мы его рассмотрели, связались с ними и назначили день когда проведем полноценный брифинг. 

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

Заказчику требовалось:  

  • разработать дизайн;
  • запустить интернет-магазин;
  • интегрировать с 1С;                
  • провести SEO оптимизацию.

Разработка дизайна

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

Дизайн должен быть привлекательным. В первую очередь пользователи приходят на сайт за информацией. От дизайна требуется подчеркивать эту информацию, помогать получить к ней доступ и не стать препятствием.  Дизайн сайта должен понравиться целевой аудитории (ЦА). Определенный портрет пользователя был описан в ТЗ, поэтому кто покупатель для компании нам было понятно.

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

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

f2366da88d3aeda5ebbb730a63aab55c.jpg

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

Каталог товаров

Страницы каталога представляют собой основные блоки со списками товаров и пагинацией, а также наборы фильтров для возможности фильтрации контента. Разделы каталога одинаково оформлены, отображаются, в зависимости от выбранного раздела. Структура каталога 2х уровневая и настраиваться через CMS интернет-магазина.

ed829e99b2f2d17211db3b1a832d9aea.png

Фасетная навигация 

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

Сортировка

Результаты выдачи в каталоге имеют возможность сортировки по следующим категориям:

  • Цене, сначала недорогие;
  • Цене, сначала дорогие;
  • Название по алфавиту;
  • По популярности, сначала популярные;
  • По популярности, сначала не популярные.

Контентная часть

Контентная часть состоит из карточек-превью товаров и пагинации. 

Карточка-превью товара содержит следующие элементы (при наведении курсором):

  • Название (описание);
  • Изображение;
  • Цена;
  • Кнопка «Сравнить»;
  • Кнопка «В корзину».

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

fa990b9906a39815dc463d640ed4f7e5.png

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

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

Переход в корзину возможен через кнопку «Корзина» в шапке сайта или через Личный кабинет.

ff7dec52e7472810b0076b041b4fc0d8.jpg

 Функциональнная часть страницы:

  • Редактирование списка товаров (удаление товара, очищение корзины, изменение количества и т.д.);
  • Переход к карточке товара;
  • Заполнение обязательных полей о получателе;
  • Выбор способов доставки и оплаты.

Автоматическая функциональность страницы:

  • Расчет/перерасчёт стоимости корзины;
  • Проверка полей;
  • Расчет стоимости доставки;
  • Поиск адреса по справочникам.

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

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

9ca3c77442d8d08f0ec3ac4618921325.jpg

Мобильная версия

Рост сегмента Mobile — это тренд последних пяти лет. Вот почему иметь мобильную версию сайта просто необходимо.

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

5322f93ae04920abc650f7afa218b151.jpg

Сайт samovar35.ru автоматически определяет версию браузера клиента и перенаправляет пользователя на мобильную версию сайта в случае, если клиент зашел на сайт с мобильного устройства. Так как браузеры мобильных телефонов не имеют поддержки выполнения JavaScript кода, проверку версии браузера следует выполнять на стороне сервера, с помощью сведений HTTP-заголовка User-Agent.

Интеграция с 1С

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

9f784b631d14d007c6ced7205e05c25a.jpg

SEO оптимизация

Настроена генерация title и meta-description по оптимизированным шаблонам для всех товаров и категорий в каталоге. Это позитивно влияет на ранжирование сайта. Также проведены работы по: анализ сайта и конкурентов по высоко- и низкочастотным запросам, анализ структуры сайтов-лидеров в продвигаемой сфере, SEO-аудит, сбор семантического ядра; внутренняя перелинковка страниц, работа над текстовым и визуальным наполнением сайта, внешняя оптимизация, оптимизация каждой страницы сайта, тестирование сайта и исправление ошибок.

Результат

На данный момент сайт полностью функционирует. Команда «Онлайн-Сервис» запустила официальный интернет-магазин samovar35.ru. Сайт работает на платформе 1С-Битрикс. Компания «САМОВАР» полностью приняла работы по внедрению функционала, отметили качество выполнения, получили то что и хотели, остались довольны результатом и нацелены на дальнейшее сотрудничество.

С уважением компания «Онлайн-Сервис»

Перейти на сайт

Полный текст статьи читайте на CMS Magazine