Разработка интернет-магазина косметики и парфюмерии

ЗаказчикМоя Оптима — крупный ритейлер в 36 городах России. Специализация — бытовая химия, косметика, хозяйственные товары. ЗадачаРазработать омниканальный интернет-магазин с актуальной информацией по остаткам.

7892843f27fdac402ae2132b550f5d71.png

С чего все началось?

У клиента есть 2 интернет-магазина. Есть интернет-магазин iOptima: его ассортимент — уходовая и декоративная косметика, аксессуары для волос, маникюра и макияжа. Недавно с нашей помощью появился интернет-магазин Моя Оптима: ассортимент бренда — это косметика более бюджетного сегмента, бытовая химия, хозяйственные товары и товары для дома.  

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

Задачи проекта:

1. Разработка омниканального интернет-магазина.

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

2. Интеграция сайта с корпоративными системами.

У нашего клиента ERP-система SAP и CRM-система MindBox. 

3. Реализация актуального отображения остатка в оффлайн-магазинах.

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

 4. Проработка доставки.

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

 5. Разработка личного кабинета пользователя.

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

 Что мы сделали?

1. Провели брифинг заказчика, написали техническое задание.

По заданию и анализу конкурентов подготовили прототипы сайта. После согласования прототипов реализовали дизайн. 

Прототипы рисуем в Moqups, дизайн делаем в Figma. Обе программы удобны встроенным комментированием: заказчик, дизайнер, проектный менеджер или разработчик оставляют комментарии прямо на макете.

По опыту работы с прошлым интернет-магазинов клиента, решили вести разработку по принципу Mobile First. Mobile First — разработка веб-ресурсов с акцентом на мобильную/адаптивную версию.

Почему Mobile first важен?

  • В прошлом интернет-магазине клиента мобильный трафик превалирует над дестопным. Мы не сомневались, что ситуация повторится. Оказались правы. 
  • С каждым годом количество мобильного трафика растет. По отчету SimilarWeb, с 2017 по 2019 год рост мобильного трафика составил 30,6%. По отчету WebCanape, в доле интернет-трафика 50,1% составляет трафик с мобильных телефонов, около 53% всех запросов в интернете делают через телефон. 
  • Поисковые системы лучше ранжируют сайты, адаптированные к мобильным девайсам. Google официально ввел Mobile First-индексацию с 1 июля 2019 года: рейтинг страницы в поисковой выдаче напрямую зависит от мобильной версии. Яндекс 2 февраля 2016 года ввел алгоритм «Владивосток»: алгоритм учитывает адаптированность сайта к мобильным устройствам. В мобильной выдаче адаптированные сайты в приоритете.

По данным Яндекс.Метрики за период 30 января 2020 года — 29 января 2021 года, доля мобильного трафика в интернет-магазине составила 69,8% против 28,8% десктопного и 1,34% планшетного трафика. 

7358bf70bf137880091dae2a7953833d.png

2. После согласования прототипов и дизайна приступили к разработке.

Создали сайт на базе 1С-Битрикс «Управление сайтом». В CMS встроен функционал корзины, платежных систем, личного кабинета пользователя, расчета стоимости доставки. Удобно управлять скидками, заказами, каталогом. Готовый встроенный функционал сокращает время на разработку и бюджет клиента соотственно. Однако стандартного встроенного функционала не хватало, поэтому в каждый модуль мы внесли кастомные доработки. Например, время и стоимость доставки рассчитывается исходя из города. Этого нет в стандартном функционале. 

Каталог интернет-магазина. 

62a4266b236da731e82a047e62c28b1a.png

Раздел в интернет-магазине. 

e2ab5bf4d5557ab18eafea864e281c88.png

3. Разработали личный кабинет пользователя.

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

016d332f9c0177c6e997323f328eaf32.png

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

5ef87c6bd8313962f0fdd28524add915.png

4. Интегрировали сайт с SAP ERP.

В России известным приближенным аналогом к SAP ERP является 1С. SAP хранит операционные данные, прогнозирует продажи, ведет учет складских запасов. Интеграция с SAP позволила выгружать информацию о товарах: остатки, стоимость, наличие в магазинах. Полученная информация направляется в промежуточную базу данных (ПБД). Из ПБД измененная информация переходит в Битрикс.

3ccaa0f13caed9ba6ce4fd431039bc82.png

5. Интегрировали сайт с MindBox CRM.

MindBox CRM — это программа для автоматизации маркетинга. Она собирает и хранит пользовательские данные, формирует по каждому клиенту единый профиль; реализует email-рассылки, СМС-рассылки, рассылки в мессенджерах, PUSH-оповещения. Формирует программу лояльности: персональные и массовые скидки, промокоды. Отличный маркетинговый инструмент для решения бизнес-задач. 

6. Интегрировали сайт с онлайн-кассой.

 У Битрикса есть стандартный модуль онлайн-кассы для Сбербанка, подключались через него.

 7. Адаптировали сайт под мобильные устройства.

На мобильных телефонах и планшетах верстка не искажается. Спустя несколько месяцев запустили для магазина кроссплатформенное мобильное приложение для IOS & Android. 

8. Разработали собственный поисковой компонент. 

Разработали и подключили компонент поиска на базе Elastic Search. Поиск структурно показывает информацию о популярных запросах, хранит историю поиска, распознает ошибки, исправляет неверную раскладку клавиатуры, понимает синонимы и адаптируется под адаптивную версию сайта. 

6255816e0186553b6f5bef31b1c307ec.png

На странице поисковой выдачи сделали фильтрацию.

3e3fded329d34bcf9385d241575a7eea.png

9. Интегрировали со службами доставок.

 Подключили популярные службы доставки PickPoint, QIWI, Халва, СДЭК, DPD. В карантин запустили безопасную курьерскую доставку до двери.

55f2e5a5b1191127e65c9aa40763f10c.png

Что получил клиент?

1. Актуальная информация по остаткам.

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

2. Новый маркетинговый инструмент.

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

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

Авторизация клиентов в программе происходит по номеру телефона.

3. Персонализация интернет-магазина.

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

4. Создание собственного расширенного поиска.

До создания нашего поискового решения, клиент тратил порядка 600 000р./год на сервисный поиск. Теперь никаких ежемесячных плат за поиск нет. 

Технологический стек проекта:  

  • 1С-Битрикс
  • PHP
  • MySQL
  • SAP
  • MindBox
  • ElasticSearch

Если Вам нужен похожий интернет-магазин — напишите нам на почту info@astarus.com. Мы ответим в течение 2 часов. Спасибо за внимание!   

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

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