Maytoni — это международный лидер в создании дизайнерского света. Более 2000 партнеров продают их продукцию в 35 странах, включая Россию. И для этого им нужны не только фото и видеоматериалы, но и 3D модели, 3D-визуализации, чертежи, фото в интерьере, УТП, чтобы донести до покупателя преимущества светильников.
Причина такого богатого перечня материалов в том, что клиенты Maytoni — это часто дизайнеры интерьеров, которым необходимы эти файлы для создания дизайн макета. Поэтому Maytoni так профессионально подходит к подготовке материалов о каждом товаре. А их у компании более 20 тысяч.
Чтобы партнерам Maytoni не заходить в каждый товар и не скачивать отдельно материалы на каждый светильник, менеджеры Maytoni решили создать публичный каталог (ПК) файлов, где по фильтрам можно выбрать нужный бренд или коллекцию и разом скачать все файлы для товарных карточек своего магазина.
Создание ПК стало вторым этапом нашей работы с Maytoni после внедрения PIM-системы — Pimcore. Система стала центральным местом хранения товарной информации и помогла с автоматической выгрузкой в каналы продаж.
Задачи проекта
- Создать публичный каталог файлов продукции Maytoni (фото-банк), с возможностью скачивания контента разного качества.
- Интегрировать публичный каталог с PIM-системой Pimcore
- Создать удобный поиск файлов как на десктопе, так и на мобильных устройствах: умная фильтрация, превью файлов и поп-ап с детальной информацией по файлу.
Аналитика
Для рынка публичный каталог или фото-банк — это новый продукт, референсов практически нет. Нам пришлось выстраивать вид и функционал этого сайта с нуля, продумывая совместно с заказчиком детали, чтобы сделать сайт удобным для партнеров Maytoni.
Поэтому первый месяц был выделен на сбор требований, их формализацию и описание древовидной структуры публичного каталога.
Прототипы и дизайн
После того как требования были зафиксированы, мы перешли к созданию прототипов — макетов сайта, отражающих основной функционал.В них мы показали, как будут работать переходы по кнопкам, нажатия на иконки, продумали логику фильтров и как они будут выглядеть.
Согласовав прототипы, мы приступили к дизайну. У клиента был полноценный фирменный стиль и концепция сайта, которую они хотели видеть и в новом продукте. Поэтому публичный каталог мы сделали в стилистике Maytoni.
Интеграция публичного каталога с PIM-системой Pimcore
Основная сложность проекта была в том, чтобы согласовать между собой PIM-систему — Pimcore и публичный каталог.
После нашего внедрения Pimcore в Maytoni, она стала центральной системой в управлении и хранении товарных данных. Поэтому мы настроили интеграцию с Pimcore по Rest-API. Из Pimcore в публичный каталог выгружаются товары, бренды, коллекции, серии и самое главное — ссылки на медиафайлы, привязанные к товарам или сериям. Поэтому, когда для реализации какого-то функционала нам не хватало каких-то данных, мы вынуждены были проводить изменения в Pimcore, а потом только реализовывать их в ПК.
Так, например, было с ресайзом изображений. Для ПК нужны были определённые размеры: маленькое превью для списка файлов, побольше для детальной карточки и оригинал для скачивания в нескольких размерах. Но в товарных данных была только ссылка на оригинал. Мы подобрали сервис imgproxy для ресайзов изображений, так как он один из немногих кто работает с экзотическими для веба форматами, например, TIF.
И, чтобы нельзя было «заспамить» и «положить» систему, остановились на возможности скачивать файлы в трёх форматах: thumb (200px), low (1000x1000), high (2000x2000) и оригинал, где разрешение могло доходить до 10000 пикселей. На эти форматы сохранили ссылки в Pimcore, которые система отдает в ПК по Rest-API.
Важно сказать, что у этих ресайзов фиксирована только ширана. А высота подбирается адаптивно в зависимости от изначальных пропорций изображения. Это позволяет сохранить пропорции изображения, не растягивая и не сжимая их.
MVP публичного каталога Maytoni
Так как сроки были максимально сжатые, в рамках MVP мы отказались от сложных технических решений, будь то отдельный сервис с поисковым движком или выделенный сервис для скачивания файлов.
Но о будущем мы подумали, поэтому архитектуру проекта выстроили так, что при необходимости масштабирования, мы легко сможем выделить проблемные места в отдельные сервисы или же расширить функциональность там, где её не хватает.
Хедер
В шапку сайта мы поместили 4 основных бренда Maytoni. Если нажать на один из них, то применится фильтр по бренду и будут показаны материалы на товары именно этого бренда.
Если партнер не хочет скачивать материалы на конкретный бренд, а ему нужна информация по всем артикулам компании, он может скачать единую Excel-таблицу с характеристиками на все артикулы.
Умные фильтры
Почему умные? Они подстраиваются друг под друга. Например, если нас интересуют товары бренда Freya, то выбирая его, в пункте коллекции мы видим только коллекции бренда Freya. И также сужая поиск по коллекции, например, Crystal, видим артикулы только из этой коллекции.
Если в «Тип продукта» фильтры сужают другие фильтры и результат выдачи, то в «Тип контента», выбирая, например, к «3D-визуализации подвижных элементов светильника» еще и «промо ролик о светильнике на рус. языке» мы расширяем результаты выдачи контента.
Мобильная версия
Фильтры на сайте достаточно подробные, занимают много места на экране и выпадающие списки содержат объемные пункты, например «3D-визуализация светильника крупным планом с фокусом на линзы/особенность светильника». И таких длинных пунктов в одном параметре может быть более 50.
Поэтому сложность была в том, чтобы разместить фильтры на мобильных устройствах так, чтобы пользователю было понятно и удобно. Также пункты не должны быть слишком мелкими, потому что на телефоне у нас палец, а не курсор мышки.
Поэтому в мобильной версии сайта мы показываем только два первых пункта в фильтрах: «Тип продукта» и «Тип контента», скрывая их подпункты под символом «+», а остальные пункты доступны если нажать на кнопку «Все фильтры».
Новости
В правой части экрана мы вынесли блок «Новости». Чтобы когда происходит обновление какой-то из коллекций, администраторы могли в админке создать об этом новость. Ее увидят партнеры и обновят у себя в магазинах файлы.
Превью файлов и детальная карточка
Удобно, когда еще до скачивания видно, что это за картинка, видео или документ, поэтому мы добавили превью файлов.
Кликнув на конкретный чертеж или фото, можно прочесть краткие характеристики, выбрать нужное качество и убедиться, что это именно то, что вы хотите скачать.
Выделив несколько файлов, можно листать детальные карточки, просматривая выбранные файлы и выбирая нужный.
Результаты
За 5 месяцев мы запустили первую версию публичного каталога Maytoni и перешли к этапу развития!
Проект уже презентовали партнерам компании и теперь они могут намного проще обновлять товарные карточки в своих магазинах актуальными медиа и быстрее выводить товары на рынок!