Создание англоязычного сайта для косметической компании

Суть проекта и немного о заказчике:

Concept и Infinity – это российские бренды средств профессиональной косметики для волос.
Владелец брендов ООО «БИГ» – одна из крупнейших косметических компаний существующая на рынке с 1995 года.
ООО “БИГ” сотрудничает с WEB-AiM уже более 5 лет и за это время мы уже создали несколько интернет-проектов:

Проект для CONCEPT: веб-сайт для капсульной коллекции INFINITY
CONCEPT — Профессиональная косметика для волос

Проекты разрабатывались для русскоязычных пользователей косметических средств. В 2024 году возникла задача вывести Conept и Infinity на международную арену и возникла необходимость разработки англоязычных версий сайтов для обоих брендов Concept и Infinity.

Маркетинговый отдел ООО “БИГ” сформировал свое виденье в виде текстового ТЗ, которое мы использовали в качестве отправной точки – нам нужно было учесть все необходимые технические детали.

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

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

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

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

Я говорю про сайты во множественном числе потому что, хоть и используется одно ядро и одна админка 1С-Битрикс, Concept и Infinity все же довольно сильно отличаются и по логике интерфейсов и по структуре материалов.

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

Каждый продукт относится к отдельной линейке продуктов или коллекции.

Так вот на eng-версии сайтов нужно было уйти от концепции “один продукт=одна страница” и сделать “одна страница линейки товаров=множество товаров”.

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

Это было не просто, наши -front и -back разработчики были прям очень “заинтригованы”, когда PM и дизайн-команда презентовала концепцию :))) Но все решения были придуманы и в итоге все получилось.

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

Также, мы еще на русской версии infinity придумали использовать акцентное цветовое кодирование. Тут этот функционал сохранили и сделали еще более удобным для использования. Цветовое кодирование, это такой дизайнерский прием для того, чтобы еще больше визуально выделить страницы или разделы по какому-то признаку. В нашем случае – по линейке косметической продукции. Чтобы лучше понять что это и как это работает, достаточно взглянуть на эти страницы разных товарных групп:

• Уход/Восстановление

• Увлажнение

• Салонный уход

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

Поскольку сайт презентационный, основная цель для бизнеса ООО “БИГ” – получать с него заявки от потенциальных партнеров. 

Основные ожидаемое прямые (те, что должны делаться прям на сайте) конверсионные действия, которое заложили в требования представители маркетинговой службы ООО “Биг” – отправки из форм обратной связи + переходы в соцсети.

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

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