Когда супермаркет у тебя дома: сайт для службы доставки

ЗаказчикСтоличный — сеть супермаркетов на острове Сахалин.ЗадачаРазработать дизайн, внедрить и запустить интернет-магазин, разработать личный кабинет сборщика продуктов, произвести интеграцию с 1С.

Сеть супермаркетов «Столичный» — это крупная торговая сеть на территории Сахалинской области, которая была основана в 1993 году, и на сегодняшний день насчитывает более 30 магазинов, которые ежедневно обслуживают более 50 тысяч покупателей.

Введение

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

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

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

Основные задачи любого сервиса по доставке продуктов — продемонстрировать товар, получить и собрать заказ, доставить покупателю. Чтобы этот сервис работал продуктивно, нужно учесть важные моменты:

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

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

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

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

Основные требования:  

  • разработать дизайн;
  • запустить интернет-магазин;
  • интегрировать с 1С;
  • разработать личный кабинет сборщика продуктов.

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

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

Цель нашего сайта — максимальное количество продаж. Нужно показывать товары с выгодной стороны и побуждать к покупке.

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

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

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

 192f75eb793fd36a9ee7d6354d67f89b.png 

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

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

42834c5040d2e9047b82486a5882f4cf.png 

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

82ce505ed892c98d84742bc5301a0a9c.png 

Раздел «Овощи, фрукты, ягоды»

3c013e45aaba2cd74f4bfff9bb3de2f6.png

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

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

В левой части расположен фильтр для поиска по определенным параметрам.

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

 470335612a0065a32702810aa4714da6.png

Личный кабинет покупателя

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

В личный кабинет (далее ЛК) пользователь переходит по ссылке в хедере сайта, которая появляется после авторизации (вместо кнопки «Войти»). На странице ЛК находятся разделы: персональная информация, избранное, история заказов, профили, подписаться на рассылку. 

b9275983b300c66eace6c106d53be0eb.png 

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

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

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

78f7271b668d675b25f3fcc88ea2e20f.jpg

Сайт i65.shop автоматически определяет версию браузера клиента и перенаправляет пользователя на мобильную версию сайта в случае, если клиент зашел на сайт с мобильного устройства. 

Кабинет сборщика

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

В личном кабинете сборщика списком отражены все текущие задачи.

 b526eba99fdc74e9d8160fc8d285e257.png 

Основная информация о заказе находится внутри.

91929e2e6d5cdb21daa41381af030ba9.png

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

49526da26826b7263ef57f2da6d97792.png

Так же весь этот функционал сохранен и в мобильной версии кабинета сборщика.

aa413ad8eeee14b9df0078b884d51320.png 

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

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

d75fa60144b0ca9bdac298af3063d975.png

Результат

d081dc28e9568f3fed722fb7577271bf.jpg

На данный момент сайт полностью функционирует. Команда «Онлайн-Сервис» запустила официальный сайт службы доставки i65.shop. Сайт работает на платформе 1С-Битрикс. Руководство сети супермаркетов «Столичный» полностью приняла работы по внедрению функционала, отметили качество выполнения, получили полный инструктаж по работе с сайтом, остались довольны результатом и нацелены на дальнейшее сотрудничество.

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

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

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