Повысить конверсию: как интерактивная палитра изменила магазин OtherWhite

О компании

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

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

Ход проекта

Аналитика и проектирование

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

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

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

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

Основные решения:

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

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

Главная страница

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

Каталог и карточки товаров

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

• оттенкам,
• размерам,
• типам кювет,
• актуальным акциям.

Карточки товаров стали максимально информативными: крупные фото, структурированное описание, рекомендации по использованию, варианты наборов.

Конструктор палитры — ключевая функция проекта

Это центральный элемент интернет-магазина. Он позволяет художнику «собрать» свою палитру из разных компонентов.

В конструкторе реализовано два этапа:

1. Выбор цвета короба

Пользователь выбирает цвет корпуса будущей палитры. Визуализация меняется мгновенно — интерфейс создает эффект персонального «ручного» выбора.

2. Наполнение набора

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

• размещение кювет разных размеров внутри короба;
• замена и удаление элементов;
• автоматическое заполнение набора случайными вариантами;
• выбор готовых шаблонов;
• очистка палитры одним кликом.

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

Техническая реализация

Этап разработки включал:

• верстку адаптивного интерфейса;
• интеграцию с 1С-Битрикс;
• программирование логики конструктора;
• настройку каталогов, корзины и процессинга заказа;
• оптимизацию скорости загрузки;
• тестирование на всех устройствах.

Отдельное внимание уделили мобильной версии: она не упрощенная, а полноценная — пользователь может работать с конструктором так же удобно, как на компьютере.