Компания Amway — международный лидер в производстве товаров для красоты, здоровья и домашнего хозяйства — столкнулся с проблемой неэффективного представления своей продукции в онлайн-каталоге. Более 500 карточек продуктов (Product Detail Pages) требовали унификации, оптимизации под мобильные устройства и соответствия современным стандартам дизайна и верстки.
Проблематика:
Ограничения текущего конструктора PDP: Стандартный WYSIWYG-редактор SAP Hybris не позволял реализовать сложные требования к дизайну и функционалу.
Отсутствие единого подхода: Разрозненность стилей и контента из старой версии сайта усложняла восприятие информации.
Мобильная непригодность: Карточки продуктов не были адаптированы для просмотра на мобильных устройствах, что снижало удобство использования.
Шаблоны для вкладок PDP
Библиотека элементов
Требования и рекомендации
Решение
Фаза анализа
Проведен сбор требований и пожеланий клиента по всем категориям продукции.
Проанализированы каталоги конкурентов и сайты Amway в Европе и Азии для выявления лучших практик.
Подготовлен Customer Journey Map (CJM) и прототипы для понимания взаимодействия пользователей с карточками продуктов.
Фаза проектирования
Разработан подробный гайд для создания PDP
Шаблоны PDP: Унифицированные шаблоны для всех категорий продукции.
Контентные блоки: Описание правил оформления вкладок (описание, состав, применение и т.д.).
Библиотека UI-компонентов: Элементы дизайна для контентных блоков.
Требования к медиа: Рекомендации по главным изображениям, GIF, видео и их отображению.
Локализация: Правила адаптации контента для разных регионов.
Инструкции по Hybris: Подробное руководство по работе с продуктовым кокпитом.
Фаза разработки
Реализован Mobile First-подход для обеспечения удобства использования на смартфонах и планшетах.
Разработаны и внедрены более 800 карточек продуктов для различных брендов и локализаций.
Использованы современные технологии:
Front-end: HTML, CSS, JavaScript для создания адаптивной верстки.
Back-end: Интеграция с SAP Hybris через REST API.
Версионирование: Git для управления кодовой базой.
Дизайн: Figma для создания макетов и компонентов.
Фаза тестирования
Проведено комплексное тестирование (функциональное, нагрузочное, кроссбраузерное).
Проверена совместимость с мобильными устройствами и браузерами.
Внедрена система обратной связи для сбора отзывов пользователей.
Управление
Методология: Hybrid (Waterfall + Kanban) с еженедельными демо для клиента.
Инструменты: Jira (трекинг задач с командой клиента), Яндекс Трекер (трекинг задач с внутренней командой), Git (ветка для каждой PDP), Trello для дизайн-ревью.
Команда проекта
Account Director: Координация коммуникаций с клиентом.
Project Manager: Управление процессами и планирование ресурсов.
Technical Director: Архитектурные решения и технический надзор.
Art-Director: Креативное руководство.
UX/UI Designer: Прототипирование и дизайн.
Front-end Developer: Реализация клиентской части.
Content Manager: Подготовка и заполнение контента.
QA Engineer: Тестирование и контроль качества.
Результаты
Единый стиль и подход: Все карточки продуктов теперь соответствуют единому гайду, что улучшило восприятие информации.
Мобильная оптимизация: Карточки полностью адаптированы для просмотра на мобильных устройствах.
Повышение конверсии: Удобный доступ к информации увеличил вовлеченность пользователей.
Масштабируемость: Гайд и шаблоны позволяют быстро добавлять новые продукты без потери качества.
Обширная поддержка: Команда обеспечила постоянную поддержку и актуализацию контента.
Ключевые метрики успеха:
+40% рост времени взаимодействия с карточками продуктов.
90% положительных отзывов от пользователей о новом формате PDP.
Снижение времени загрузки страниц на 30% благодаря оптимизации.