Палитра Matrix в интерактивном формате

1. Вводная задача от заказчика, проблематика, цели

О клиенте

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

Задача

Команда Mygento получила задачу разработать промо-сайт для демонстрации всей палитры красок Matrix, включая такие коллекции, как SoColor, SoColor Sync, Tonal Control и SoColor Cult. Основные цели сайта заключались в удобном представлении новинок и бестселлеров, а также создании интуитивно понятной структуры, с помощью которой стилисты и клиенты могли бы легко находить нужные оттенки.

Задачи проекта:

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Структура и контент

Разделение на страницы

Мы организовали промо-сайт в виде пяти отдельных страниц: одна главная страница для выбора коллекций и четыре посвящённые каждой из палитр:

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

Полезная информация для стилистов

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

Удобное обновление контента

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

SEO-оптимизация

Мы использовали современные подходы для улучшения видимости сайта в поисковых системах:

• Настроили уникальные заголовки и описания для каждой страницы
• Мы использовали формат WebP для ускорения загрузки страниц и добавили описания ALT, чтобы улучшить SEO и сделать сайт более доступным
• Обеспечили возможность редактирования ссылок, чтобы соответствовать требованиям SEO и улучшить ранжирование

3. Результаты сотрудничества

• Повышенная вовлечённость: Удобная структура и возможность изучать палитру в интерактивном формате увеличили вовлечённость пользователей
• Легкость управления: Административная панель позволила гибко управлять контентом, добавлять новинки и обновлять информацию без дополнительных ресурсов.
• SEO-оптимизация: Полностью оптимизированный код и современная вёрстка улучшили индексирование страниц в поисковых системах, что увеличило органический трафик

Результаты в цифрах:

• 400 000+ уникальных посетителей в первые два месяца после запуска
• 62% пользователей изучали контент через мобильные устройства
• Увеличение времени на сайте на 35% благодаря интуитивной структуре и адаптивному интерфейсу