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

Главное о кейсе

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

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

Бизнес-задача и ее решение

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

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сортировка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прочая информация о кейсе

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

Скриншоты