Разработка интернет-магазинов для METRO

Заказчик

METRO — немецкая сеть магазинов, четвертая по величине в мире, специализируется на мелкооптовой торговле. В России представлено 90 торговых центров в 50 регионах.

Задача

Разработать интернет-магазины для продукции METRO, провести все необходимые интеграции.

Цели проекта

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

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

• Увеличение продаж собственных брендов и товаров METRO: METRO Chef и METRO Rioba.
• Продвижение сезонных продуктов: METRO Icecream.
• Привлечение внимания к определенным категориям продуктов: METRO Asia, METRO Italy, METRO Healthy. 

Задачи

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

Мы разрабатываем для METRO сайты, которые продвигают два собственных бренда компании — METRO Chef и Rioba, сезонные товары — например, мороженое летом, а также целые категории продуктов: для здорового питания, для приготовления и сервировки итальянских и азиатских блюд. 

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

Задачи интернет-магазина

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

Теперь представитель ресторана японской кухни может заказать все необходимое на METRO Asia, администратор кофейни — на сайте METRO Rioba, менеджер итальянского кафе — на METRO Italy и т.д.

Дизайн каталогов

Мы отказались от раскрывающегося меню в пользу фиксированного меню-слайдера для проектов METRO Asia, Italia, Icecream и Health. Это удобнее для пользователя: есть наглядная разбивка по категориям с картинками.

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

Идеи вовлекающего контента для интернет-магазина

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

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

Интеграция с основным сайтом METRO

В этих проектах нельзя было обойтись без постоянного обновления информации о наличии товаров. Поэтому интернет-магазины интегрированы с основным сайтом METRO: отсюда по API мы каждые 5 минут получаем актуальные данные для каталога.

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

Сайт Metro Chef

Функциональность METRO Chef несколько отличается. Это информационный портал о товарах, которые продаются в магазинах сети. Здесь нет возможности добавить товар в корзину, можно только увидеть описание и стоимость. Есть главная страница со списком категорий продуктов, которые производит бренд METRO Chef. Можно переходить во внутренние разделы, посмотреть товары, отсортировать их по фильтрам. 

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

Работа у нас ведется по каскадному методу: это позволяет сосредоточиться на одном проекте и оперативно закрывать этапы, а затем переходить к следующему. С нашей стороны с METRO работают менеджер, back и frontend-разработчики, плюс дизайнер.

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

Backend мы разрабатывали на Laravel, а frontend — на Vue.js, который позволяет моментально отображать каталог и другие интерактивные элементы вроде слайдера, карточек, выпадающих списков и т.п. 

Результат 

• Разработали 6 интернет-магазинов для продукции METRO Chef
• Продумали и реализовали современный дизайн 
• Провели все необходимые интеграции: каталог товаров, корзина, сайт METRO

Отзыв клиента

Серега Бажора, руководитель направления по цифровым продуктам и аналитике: «?AIR Production гибко и своевременно реагировали на все требования. В результате мы получили продукт, который задумывался изначально, и уложились в сроки. Мы довольны сотрудничеством и продолжаем работать со студией». 

ССЫЛКИ НА ПРОЕКТЫ 

• https://chef.metro-cc.ru/    
• https://rioba.metro-cc.ru/ 
• https://asia.metro-cc.ru/   
• https://italy.metro-cc.ru/   
• https://healthy.metro-cc.ru/ 
•  https://icecream.metro-cc.ru/