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

1. Вводная задача от заказчика, проблематика, цели

Цели проекта

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

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

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

Задачи

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

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

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

Сайт METRO Chef

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

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

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

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

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

3. Результаты сотрудничества

Результат

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