METRO


#ecommerce
#backend
#frontend
#UX/UI design

О METRO

METRO — немецкая сеть магазинов, четвертая по величине
в мире, специализируется
на мелкооптовой торговле.

О METRO

METRO — немецкая сеть магазинов, четвертая по величине в мире, специализируется на мелкооптовой торговле.

Цели проекта

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

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


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

О METRO

Гиганты ритейла, которые занимаются мелкооптовой торговлей — это большая система с разветвленной структурой поставщиков и клиентов. Расскажи, какие бренды хочет продвигать METRO и как мы помогли в этом?

Кирилл Никонов
Менеджер проектов
AIR Production

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

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

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

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

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

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

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

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

А как же вкрапления контента, которые должны удерживать внимание покупателя или помогать ему решить вопросы? Современному интернет-магазину без них никуда.

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

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

И последний вопрос: что по поводу скорости обновления информации? Откуда берется информация по наличию или отсутствию товаров?

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


А что насчет METRO Chef? Этот проект чем-то отличается от остальных интернет-магазинов?

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

По своей сути сайт напоминает агрегатор. Здесь также есть возможность добавить товар в корзину, посмотреть описание и стоимость в карточке товара.


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

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


А что у нас по стеку на этом проекте?

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


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

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

Форма обратной связи