Новая дизайн-концепция интернет-магазина кормов и лакомств CosmoPet: от визуального языка до инструментов подбора и подписки на доставку. Мы провели аудит текущего сайта, пересобрали сценарии вокруг задачи владельца выбрать корм и не ошибиться, и подготовили цельную концепцию от главной страницы до подписки.

CosmoPet производит корма, лакомства и средства ухода для кошек и собак. Основа продукта — E-protein, белок из личинок черной львинки с заявленной усвояемостью выше 90%, который подходит животным с аллергией и чувствительным пищеварением. По данным бренда, рецептуры разрабатываются совместно с учёными, соответствуют стандартам FDA, FEDIAF и ГОСТ, а продукция представлена в России, ОАЭ, Китае, Японии и Таиланде.

Ассортимент разделен на линейки: CosmoCat для кошек, CosmoDog для собак, функциональные лакомства и уход PET SPA.

Аудитория делится на три группы с разной логикой выбора. Первая — владельцы, которые относятся к питанию как к части заботы о здоровье, изучают состав и готовы платить за качество. Вторая — хозяева животных с аллергией, МКБ и проблемами ЖКТ, для которых альтернативный белок часто становится рабочим решением, когда остальное не подошло. Третья — ветеринары, кинологи и заводчики, которые формируют доверие к бренду на рынке.

Цикл принятия решения здесь длиннее, чем в импульсном e-commerce. Прежде чем оформить заказ, покупатель хочет понять, подойдет ли корм конкретному питомцу и в каком объеме его давать.

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

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

Работу начали с аудита сайта и разбора сценариев аудитории. Главный вывод: CosmoPet продает не корм как таковой, а доказательную заботу о здоровье. Визуальный шум прежнего сайта этому противоречил и снижал воспринимаемую ценность продукта. На этом основании мы предложили сменить интонацию бренда в digital: вместо яркого развлекательного магазина сдержанный технологичный продукт в интонации современных брендов сегмента здоровья.

Палитру сократили до рабочей системы. Молочный фон отвечает за воздух, лавандовый за фирменный акцент и узнаваемость, графит за блоки с расчетами и составом, пастель за подложки товаров. Кислотные заливки, сток и глянцевый 3D убрали. Типографику оставили на крупном гротеске, но перестроили ритм.

Первый экран отдали продукту и сути предложения. Крупный заголовок, спокойный фон и честная съемка упаковки и линейки ухода вместо коллажей. Навигацию выстроили по понятным входам: «Кошкам», «Собакам», «Уход», «E-protein». Покупатель сразу попадает в нужный раздел.

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

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

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

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

Концепция опирается на несколько подходов, которые задают тон в e-commerce и бренд-дизайне последние пару лет. Мы брали их под конкретные задачи проекта.

• Сдержанная палитра с одним цветом. Лавандовый оттенок читается как современный и технологичный, оставаясь мягким. Для бренда это способ получить собственный узнаваемый цвет без агрессивной яркости.
• Крупная типографика. Тяжелый гротеск и воздух вокруг заголовков. Текст работает как графика и упрощает иерархию, а аудитории постарше важен крупный читаемый шрифт.
• Числа как акцент. Суточная норма, проценты состава, цена и экономия вынесены в крупные цифры. Прием из дашбордов делает пользу продукта наглядной.
• Контрастные темные секции. Инструменты с расчетами вынесены на графит. Это отделяет сервисную часть от витрины и добавляет премиальности без лишнего декора.
• Предметная съемка. Упаковка и уход показаны как реальные объекты на подиумах. Честный визуал вытеснил стоковые коллажи, потому что прямо влияет на доверие.
• Подбор и подписка. Квиз, калькулятор порции и подписка отражают сдвиг рынка от витрины к сервису, который помогает выбрать и возвращает покупателя.

Клиент получил цельную дизайн-концепцию от главной до подписки, готовую к разработке:

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

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