Marc O'Polo: комплексный редизайн интернет-магазина премиального fashion-бренда

Marc O'Polo — международный бренд премиальной одежды, основанный в Стокгольме в 1967 году. Почти 60 лет бренд развивает концепцию premium casual, сочетая современный дизайн, натуральные материалы и высокое качество исполнения.

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

Progressive Media поддерживает и развивает интернет-магазин Marc O'Polo с 2023 года. Когда бренд решил обновить сайт, он обратился к команде сопровождения. Необходимо было обновление визуальной подачи бренда, развитие возможностей представления товаров и улучшение основных сценариев покупки. Опыт работы с проектом позволил оценить его функциональность и техническую архитектуру и предложить дополнительно провести оптимизацию производительности и рефакторинг backend-части.

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

В основу проекта легла новая дизайн-концепция, развивающая фирменную эстетику Marc O'Polo в цифровой среде. Она позволила сохранить узнаваемость бренда, подчеркнуть премиальный характер коллекций и сделать взаимодействие с ассортиментом более понятным и последовательным для пользователей. 

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

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

Редизайн

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

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

Дизайн-концепция

Основой новой дизайн-концепции стали ключевые ценности бренда Marc O'Polo — натуральность, качество и лаконичность. Они нашли воплощение в минималистичном дизайне с контрастной черно-белой палитрой, акцентом на имиджевых материалах и визуальной подаче коллекций.

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

Особенности проекта

1. Каталог и сценарий выбора товаров

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

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

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

2. Готовые образы

Создан раздел с готовыми образами, позволяющий подбирать вещи не по отдельности, а в составе готовых комплектов, представленных на фотографиях.

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

При просмотре образа покупатель может выбрать размер для каждой вещи и добавить в корзину как весь комплект, так и отдельные товары.

3. Корзина и покупка

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

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

4. Бронирование товаров в магазине

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

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

Оптимизация производительности

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

Провели анализ производительности, который позволил выявить наиболее ресурсоемкие участки системы. Оптимизация затронула разные уровни системы:

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

• Ключевые разделы интернет-магазина. Проведена оптимизация главной страницы, каталога, карточки товара, корзины и оформления заказа. Отдельное внимание было уделено работе каталога: оптимизированы механизмы формирования торговых предложений (SKU), обработки цен, размеров и остатков, а также работа сопутствующих сервисов и компонентов.

• Frontend-часть. Общий JavaScript-файл разделен на отдельные модули по разделам сайта, а изображения переведены в современный формат WebP, что позволило сократить объем загружаемых данных.

Рефакторинг и развитие архитектуры

Помимо обновления пользовательского интерфейса команда Progressive Media выполнила рефакторинг backend-части проекта. Основной целью работ стало повышение управляемости кодовой базы и подготовка сайта к дальнейшему развитию.

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

Далее сформировали архитектурную модель проекта с разделением бизнес-логики, слоя работы с данными и интеграционных сервисов. Ключевые компоненты интернет-магазина — корзина, оформление заказа, избранное, каталог и интеграционные модули — были переведены на механизмы платформы 1С-Битрикс (D7 ORM) и переработаны с учетом единых архитектурных принципов.

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

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

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

Рефакторинг backend-части позволил подготовить систему к дальнейшему развитию.

Результаты проекта:

• Улучшен пользовательский путь от знакомства с коллекциями до покупки: пользователям стало проще изучать ассортимент, находить подходящие товары и формировать комплекты.

• Оптимизирована производительность: скорость работы ключевых разделов интернет-магазина повышена, что обеспечило более стабильную работу сайта:

• Время формирования главной страницы было сокращено примерно с 10 секунд до 1 секунды без использования кеша.

• Скорость работы каталога увеличилась более чем в три раза: время генерации страницы сократилось с 4–5 секунд до 1,5 секунд без кеширования.

• Существенно ускорена обработка торговых предложений (SKU): отдельные операции были оптимизированы с 500–600 мс до 13–15 мс.

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

• Ключевые модули интернет-магазина переведены на современные механизмы платформы 1С-Битрикс (D7 ORM).

• Централизована работа с внешними интеграциями и обработчиками событий.

• Удален значительный объем устаревшего кода и неиспользуемых зависимостей, накопившихся за годы развития проекта.

• Повышена управляемость кодовой базы и упрощено дальнейшее развитие функциональности интернет-магазина.