Презентационный лендинг для запуска нового FMCG-продукта бренда YoMilk

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

Перед нами стояло несколько ключевых задач:

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

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

В-третьих, лендинг должен был работать сразу в двух сценариях:

— как B2C-страница для вовлечения и первичного выбора вкуса;

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

Фактически бренду был нужен универсальный digital-инструмент для выхода на рынок Беларуси и СНГ, который одновременно продает эмоцию, объясняет продукт и поддерживает бизнес-коммуникации.

Мы реализовали проект под ключ — от аналитики и позиционирования до UX/UI-дизайна, анимационной концепции и frontend-разработки. Основной принцип решения: сначала ощущение, затем объяснение.

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

UX-структура лендинга построена как эмоциональный маршрут: визуальный контакт → польза → жизненные сценарии → интерактив → выбор. Мы отказались от линейной схемы «характеристики — купить» в пользу постепенного вовлечения пользователя.

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

Для вовлечения мы встроили интерактивный квиз, который увеличил глубину просмотра на 55% и мягко подводит к действию. Анимации стали частью сторителлинга, а frontend на Svelte.js обеспечил легкость интерфейса и стабильную работу при высокой визуальной нагрузке, особенно на мобильных устройствах.

В итоге лендинг стал полноценным digital-продуктом, который объясняет новую категорию, вовлекает аудиторию и работает как инструмент продаж.

Перед проектированием UX мы изучили рынок, привычки потребления и прямых конкурентов — от Exponenta до батончиков и порошковых протеиновых шейков. Нам важно было понять не просто «кто что продает», а как именно пользователь принимает решение в категории, где продукт часто выбирают на эмоции, а не по таблице КБЖУ.

Ключевой вывод: первой срабатывает эмоция — желание попробовать, «зайдет/не зайдет», и только потом человек начинает проверять состав и пользу. По результатам интервью и наблюдений 79% пользователей сначала ориентируются на ощущение (вкус, образ, подачу), и уже затем читают характеристики. Это означало одно: лендинг должен сначала вызвать правильное чувство, а уже потом — объяснить преимущества.

Дальше мы увидели культурный барьер: спортивная риторика и «жесткий ЗОЖ-тон» отталкивают часть аудитории. Для YoMilk нужно было говорить не языком спортпита, а языком повседневной привычки — мягко, уверенно и без давления, чтобы продукт воспринимался ближе к десерту, чем к «функции».

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

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

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

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

Мы осознанно отказались от классической схемы «характеристики — кнопка купить» и сделали ставку на сценарный UX, где каждый экран логично продолжает предыдущий, усиливает эмоциональное восприятие и удерживает внимание за счет визуального ритма и динамики.

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

Визуальная концепция лендинга YoMilk строилась вокруг ключевой задачи — передать ощущение продукта еще до того, как пользователь начнет читать текст или вникать в характеристики. Мы сделали ставку на визуальное восприятие как основной канал коммуникации, понимая, что в FMCG-категории решение чаще всего принимается на уровне эмоции и первого впечатления.

На этапе концепта мы проработали несколько визуальных направлений и сценариев первого экрана, тестируя разные способы подачи продукта: от более спокойных, «чистых» композиций до насыщенных динамичных решений. В результате был выбран формат динамичного hero-блока, который работает как мини-постер и сразу задает нужное настроение — вкусно, легко, хочется попробовать.

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

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

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

Мы использовали motion для расстановки акцентов: элементы появляются и смещаются плавно, ингредиенты создают ощущение глубины, а смена вкусов воспринимается как естественный переход между сценами. Это позволяет удерживать внимание и поддерживать интерес без визуального шума.

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

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

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

Для анимационной части мы использовали GSAP и AOS, интегрировав motion напрямую в пользовательские сценарии. Это дало возможность гибко управлять динамикой, синхронизировать анимации со скроллом и сохранять плавность интерфейса без лишнего оверхеда.

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

В результате технический фундамент не конкурирует с визуалом, а поддерживает его, сохраняя ощущение легкого, «вкусного» digital-продукта, который стабильно работает в реальных пользовательских условиях.

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

Интерактивная UX-модель и встроенный квиз увеличили глубину просмотра на 55%, что напрямую повлияло на время взаимодействия с сайтом и качество вовлечения аудитории. Оптимизация интерфейса и анимаций обеспечила рост стабильности и производительности мобильной версии на 45%, что особенно важно для FMCG-категории с высоким мобильным трафиком.

Лендинг одинаково эффективно работает в двух ключевых сценариях: как B2C-страница для конечных пользователей, помогая быстро объяснить продукт и подтолкнуть к выбору вкуса, и как презентационный инструмент для переговоров с дистрибьюторами и розничными сетями. В результате бренд получил целостную digital-упаковку, которая передает эмоцию продукта, логику новой категории и усиливает доверие к YoMilk уже на первом касании.