ЕВРОМАФ

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

ЕвроМаф не ограничивается стандартными серийными решениями, компания постоянно расширяет ассортимент, предлагая более 6000 наименований продукции, среди которых тематические игровые комплексы, спортивные элементы и дизайнерские формы, которые помогают создавать разнообразные сценарии детской активности и отдыха.

К моменту начала работ у компании ЕвроМаф уже существовал интернет-магазин на готовом решении Bitrix, однако за годы активного роста бизнеса он перестал соответствовать текущим задачам компании.

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

При этом у заказчика существовал отдельный запрос, немного выходящий за рамки стандартного подхода к созданию e-commerce проектов. Главная страница нового сайта не должна была сразу уводить пользователя в каталог. Наоборот, она задумывалась заказчиком как своеобразная визитка бренда — нестандартная, визуально выразительная и динамичная. Страница должна была презентовать ЕвроМаф как современного и развивающегося производителя и формировать первое впечатление у новых посетителей и заказчиков, которые приходят на сайт не как дилеры, а как новые клиенты.

Отдельной важной задачей стала работа с учетной системой. В 1С заказчика на тот момент использовалась некорректная и перегруженная логика свойств товаров. Характеристики были заведены хаотично, без единой структуры, были задублированы там, где это не требовалось, что осложняло и администрирование, и автоматическую выгрузку данных на сайт. Для корректной работы нового каталога требовалось привести свойства к единой, логичной и масштабируемой структуре, которая могла бы без проблем использоваться как в 1С, так и на стороне сайта.

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

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

Таким образом, перед нами встали следующие задачи:

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

С учетом того, что продукция ЕвроМаф сама по себе визуально насыщенная и яркая, было принято решение не перегружать интерфейс дополнительными акцентами. В качестве базовой концепции мы выбрали светлую, спокойную цветовую гамму, которая служит нейтральным фоном и позволяет товарам «говорить самим за себя». Основные визуальные акценты были перенесены на изображения продукции и разделов каталога. Большим плюсом стало то, что у заказчика уже имелись качественные фоторендеры практически всего ассортимента. Это позволило выстроить дизайн вокруг визуального контента, не прибегая к искусственным декоративным приемам. Изображения стали ключевым элементом восприятия каталога и навигации, а интерфейс — аккуратной и понятной оболочкой вокруг них.

Проектирование UX велось с опорой на реальные пользовательские сценарии. Мы исходили из того, что дилеры регулярно работают с каталогом, возвращаются на сайт, быстро ориентируются в ассортименте и ценят простоту, скорость и предсказуемость интерфейса. Поэтому структура страниц, логика фильтрации, подача карточек товаров и оформление заказа были сделаны максимально прямолинейными и функциональными.

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

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

Первоначальной идеей со стороны заказчика было использование на первом экране 3D анимации в качестве «интро» для посетителей. Результатом нашей работы стал видеоролик с эффектной анимацией «Exploded View» одного из комплексов заказчика. Однако, в процессе создания сайта, заказчик принял решение отказаться от ее использования, чтобы не перегружать начальный экран, и увеличивать время до начала контакта пользователя с сайтом, поэтому нами была реализована другая, но не менее визуально интересная концепция.

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

Поверх видеоконтента размещен минималистичный прозрачный интерфейс. В верхней части экрана находятся основные элементы управления: навигационное меню, строка поиска и вход в личный кабинет. Интерфейс выполнен в лаконичном и ненавязчивом стиле, чтобы не отвлекать внимание от видео, но при этом оставаться полностью функциональным. Центральную часть первого экрана занимает крупный заголовок, который сразу отвечает на ключевые вопросы пользователя: чей это сайт и чем занимается компания.

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

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

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

Далее следует блок «О компании», в котором мы снова сделали акцент на визуальную демонстрацию продукции. Центральное место в блоке занимает крупное изображение игрового комплекса, занимающее большую часть визуального пространства. Текстовая часть дополняется числовыми показателями, отражающими преимущества компании: количество реализованных проектов, выгоду для дилеров, опыт на рынке.

Блок «Стать дилером» проиллюстрирован фотографиями детей на игровых площадках. Это позволяет связать коммерческое предложение с конечной ценностью продукта — детским досугом и развитием, и является еще одной точкой входа в дилерскую программу.

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

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

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

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

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

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

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

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

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

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

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

Пространство карточки разделено на несколько логических зон. В левой части размещена галерея с крупными фоторендерами товара. Качественные визуалы играют здесь ключевую роль, так как продукция ЕвроМаф отличается сложной формой, цветами и конструктивными элементами, которые важно показать максимально наглядно.

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

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

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

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

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

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

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

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

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

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

Личный кабинет проектировался максимально простым и удобным. Мы осознанно отказались от избыточного функционала, так как в реальных сценариях использования дилеры заходят в ЛК с одной основной задачей — посмотреть текущие и ранее оформленные заказы. Именно вокруг этого сценария и была выстроена структура кабинета.

На главной странице личного кабинета пользователь сразу видит список своих заказов в компактном, но информативном виде. Отображаемых данных достаточно, чтобы быстро сориентироваться по статусу, номеру и дате заказа, не углубляясь в детали. При переходе в детальную страницу заказа дилер видит уже полный состав информации, идентичный тому экрану, который отображался после оформления заказа. Здесь выведен список товаров с указанием позиций и сумм, данные дилера, дата оформления и номер заказа. Такой подход сохраняет единый пользовательский контекст и избавляет от необходимости «привыкать» к разным форматам отображения информации.

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

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

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

Для тех, кто еще только планирует стать дилером компании ЕвроМаф , сделали ссылку ведущую на отдельную страницу с формой «Стать дилером», заполнив которую заявка уйдет компании.

Так как у заказчика использовалась типовая и довольно старая версия 1С, в ней отсутствовала поддержка множественных значений свойств, что не позволило бы реализовать фильтрацию в том виде, в каком она была задумана. Для этого совместно с разработчиками 1С со стороны заказчика была произведена доработка конфигурации для передачи нескольких значений, в подходящем для сайта формате. Это позволило значительно сократить как количество свойств в административной панели по сравнению с старым сайтом, так и облегчить будущее заполнение новых товаров системе 1С

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

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

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

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

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

В рамках проекта для компании ЕвроМаф была проведена комплексная переработка цифрового представительства бренда с фокусом на реальные бизнес-задачи и специфику B2B-аудитории. Основной акцент мы сделали не просто на обновлении визуальной части сайта, а на выстраивании удобного рабочего инструмента для дилеров, который одновременно выполняет презентационную функцию для новых и непрофильных посетителей.

В результате работы были достигнуты следующие ключевые показатели и цели проекта:

В итоге заказчик получил не просто обновленный сайт, а устойчивую цифровую платформу, готовую к масштабированию и развитию дилерской сети.