Genius Production разработал продуктовый сайт для российского бьюти-бренда Ollin Professional

Российский бренд средств для волос Ollin Professional, существующий с 2011 года, столкнулся с рядом проблем. В свободном доступе не было достаточной информации о продуктах, сайт бренда давно не обновлялся, а качество контента немного устарело. Помимо этого, их продукция массово используется в салонах красоты среднего и низкого ценовых сегментов, из-за чего некоторые потребители стали воспринимать эти средства как «не престижные». В 2024 году команда Ollin Professional решила обновить сайт: сделать его более современным и информативным, а также с его помощью скорректировать восприятие бренда потребителями. За решением этой задачи она обратилась в диджитал-агентство Genius Production (входит в Genius Group). Подробностями команда проекта поделилась с Sostav.

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

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

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

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

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

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

Основная цель сайта Ollin Professional — выгодно представить товар, поэтому особое внимание мы уделили каталогу. Так как фотоконтент клиента различался по качеству и стилистике, было принято решение обновить фотобазу. Мы предложили разработку в 3D — такой результат дает клиенту возможность использования созданных моделей в любом виде и формате рекламного носителя в будущем: от key visual до видеороликов.

Реалистичные модели упаковки с консистенциями жидкости в 3D были созданы для более чем 1,5 тыс. товарных позиций. Мы также предусмотрели фильтрацию в карточках. Например, краску для волос одной линейки можно отфильтровать по цветам, не уходя со страницы.

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

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

Динамичная темпоритмика, эстетичные графические элементы, цветовые и шрифтовые акценты удерживают внимание пользователя, а качественный визуал позволяет не только прочитать детали на этикетках, Источник: www.sostav.ru