Как мы превратили вкус в digital-опыт и собрали лендинг, в котором ключевой акцент сделан на эмоциональное восприятие продукта

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

ЧТО МЫ СДЕЛАЛИ

Мы разработали презентационный лендинг за 25 дней под ключ — от UX-исследования и позиционирования до UI-дизайна, анимации и разработки frontend на Svelte.js. Создали визуальную концепцию, которая передает вкус продукта словами и без слов — через динамику, детали и эмоциональные триггеры. От карты смыслов до визуального языка — все работает на один сценарий: вызвать желание попробовать продукт еще до того, как человек начнет размышлять. Реализовали GSAP-анимации и квиз, увеличивший глубину просмотра на +55%. Это тот случай, когда дизайн делает большую часть продаж еще до клика.

1. Таск — бренд YoMilk обратился за разработкой презентационного лендинга под ключ, так, чтобы он сразу вызывал желание попробовать продукт и наглядно знакомил с новой категорией, при этом работая одновременно для B2C и дистрибьюторов. Страница должна была усиливать доверие за счет качественного UI/UX и выделять YoMilk среди спортпита и протеиновых батончиков. Важно было выстроить конверсионную структуру страницы, которая сокращает путь до целевого действия и усиливает конверсию в первый заказ.
2. Солюшн — на этапе проектирования мы использовали принципы поведенческой аналитики, чтобы предсказать реакции пользователей и встроить корректные триггеры в структуру. Для интерфейса мы заложили компактную дизайн-систему, обеспечивающую единый стиль и согласованность всех блоков. Мы создали визуальный язык, основанный на динамичных метафорах и «вкусных» деталях, который объясняет продукт быстрее любого текста. Буквально вызывает аппетит! Дизайн выстроили так, чтобы вызвать мгновенную эмоцию — до того, как пользователь что-то прочитает. В итоге получился универсальный digital-продукт, который фокусируется не на характеристиках, а на передаче ощущения и новизны формата.
3. Фичи — мы построили лендинг вокруг визуального триггера — вкуса. Динамичные ингредиенты, мягкие движения и живая композиция создают эффект, будто продукт существует на экране физически — прямо у тебя под рукой. UX выстроен под реальные сценарии аудитории — простые смысловые цепочки, микролиды и блоки, сразу раскрывающие пользу продукта. Каждая фича усиливает ключевую задачу бизнеса: быстро объяснить продукт и сформировать желание попробовать, что критично в категории без устоявшегося спроса. Фичи были объединены в легкую модульную систему, что упростило дальнейшую доработку и интеграцию с CMS. 

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

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

Говорит маркетолог

С ЧЕМ ПРИШЕЛ БРЕНД YOMILK

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

Команда YoMilk пришла к нам с очень четким, но непростым запросом:

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

При этом лендинг должен был работать сразу в двух направлениях:

1. Для B2C — быстро вовлекать пользователя и помогать выбрать вкус.
2. Для B2B — служить презентационной страницей, которая показывает новый продукт дистрибьюторам и розничным сетям.

Для дистрибьюторов нужен был инструмент, который позволяет быстро понять продуктовую ценность без презентаций и дегустаций. Поэтому лендинг должен был работать как selling-page и как питч-страница.А клиенту была нужна цифровая витрина нового формата, способная представлять продукт на любом экране и одновременно поддерживать запуск YoMilk на рынок России, Беларуси, Казахстана и другие страны СНГ.

Мы регулярно сопровождаем вывод новых продуктов на рынок и помогаем брендам объяснять ценность продукта быстрее конкурентов. Если вам нужен инструмент презентации или диджитал-упаковка для старта — мы можем разработать ее под вашу категорию.

ИНСАЙТЫ, КОТОРЫЕ СФОРМИРОВАЛИ ВОСПРИЯТИЕ YOMILK

Перед тем как перейти к UX-решениям, мы подробно изучили рынок: продуктовые привычки аудитории, конкурентов — от Exponenta до популярных протеиновых батончиков и порошковых шейков — и то, как пользователи на самом деле принимают решение о покупке. Нам важно было понять не только что люди выбирают, но и почему.

Инсайты позволили нам сформировать язык коммуникации, который не вызывает сопротивления у ЦА. Мы сразу отказались от всего, что напоминает спортпит: четких форм, агрессивных акцентов, фитнес-лексики и жесткого ПП.

1. Очень быстро стало ясно: в этой категории вкус решает все. Даже в продуктах, где заявлена польза, именно эмоция становится первым триггером. По данным интервью, 79% пользователей выбирают напитки потому, что «захотелось попробовать», а уже потом читают состав. Это определило весь дальнейший подход.
2. Мы также увидели важный культурный барьер. Аудитория демонстративно избегает спортивной риторики. Слова «спортпит», «порошок», «белковый коктейль для тренировки» вызывают отторжение у большинства сегментов — особенно у молодых родителей и офисных сотрудников. Людям нужен не «жесткий ЗОЖ», а приятный, мягкий, вкусный продукт, который не требует дисциплины. Но при этом полезен.
3. Следующий ключевой инсайт стал стратегическим: молочный белок насыщает дольше сывороточного. Это неочевидное отличие, но именно оно выделяет YoMilk среди ближайших конкурентов и задает правильный фрейм — «это не спортпит, это полноценный, сытный продукт на каждый день». Популярные аналоги уступают ему в этом.
4. И наконец — функциональный, но мощный триггер: продукт не требует холодильника. Это открывает огромное количество сценариев употребления: в дороге, в офисе, на учебе, после тренировки, между встречами. Для B2C это один из главных драйверов выбора — люди ценят свободу «взять и пойти».

Из этих наблюдений мы собрали карту смыслов, которая стала фундаментом для всей коммуникации. Она определила структуру лендинга, тональность, визуальные решения и то, как мы будем вести пользователя — от первичной эмоции к пониманию продукта и желанию попробовать его в реальности. Этот паттерн идеально лег в наши emotional decision-trees — тот самый фреймворк, который позволяет проектировать сценарии так, чтобы страница вела пользователя сама.

ОСНОВА КОММУНИКАЦИИ YOMILK

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

Коммуникация строилась вокруг трех интуитивных смыслов:

1. Вкус — первое впечатление, поэтому визуальный язык передает десертную легкость еще до рациональных аргументов.
2. Польза без пафоса — 20 г молочного белка, насыщение и отсутствие сахара поданы мягко, без фитнес-риторики.
3. Удобство — продукт не требует холодильника, подходит для офиса, дороги и учебы, становится частью образа жизни.

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

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

ДЕГУСТАЦИЯ ЧЕРЕЗ UX

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

1. Сначала пользователь должен почувствовать вкус, поэтому верхний блок работает на эмоцию: композиции, ингредиенты, движение.
2. Далее мы показываем пользу — 20 г молочного белка, отсутствие сахара, насыщение — в понятном и ненавязчивом формате.
3. Следующий шаг — удобство: реальные сценарии употребления, в которых человек легко видит себя.
4. Затем подключается интерактив: выбор вкуса, визуальные детали, мини-истории вкусов.
5. Логично за этим следует квиз, который помогает определиться и удерживает внимание. А в дальнейшем — помочь компании собрать данные о вкусовых предпочтениях аудитории.
6. Финальный шаг — переход на маркетплейсы.

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

ЭМОЦИОНАЛЬНЫЙ МАРШРУТ, КОТОРЫЙ ВЕДЕТ К ПЕРВОМУ ВПЕЧАТЛЕНИЮ

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

В результате UX-тестирования победила концепция в формате мини-постера: яркого, динамичного и креативного для категории FMCG. Это не типовая продуктовая витрина — и именно это стало фичей отстройки от конкурентов.

Мы разработали визуальный язык, построенный на сочных деталях и ощущении, что упаковка вот-вот откроется:

1. брызги напитка, которые задают ритм движения,
2. разлетающиеся клубника, плитка шоколада, шарики пломбира, манго и кактус, зерна кофе — создающие объем и обволакивающий вкус,
3. мягкие световые акценты, подчеркивающие свежесть,
4. в меру крупная упаковка, вокруг которой строится композиция,
5. смена вкусов каждые 3 секунды, усиливающая динамику,
6. CTA, подстраивающийся под выбранный вкус, — небольшой, но очень важный эмоциональный штрих.

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

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

ЖИВОЙ ИНТЕРФЕЙС, КОТОРЫЙ УСИЛИВАЕТ ЭМОЦИЮ

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

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

1. ингредиенты плавно смещаются, создавая глубину,
2. блоки появляются мягко, будто раскрываются,
3. вкусы листаются, как страницы меню,
4. ховеры реагируют на движение пользователя,
5. круговая карусель в квизе вращается с ощущением настоящей физики.

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

СОВРЕМЕННЫЙ СТЕК, СОБРАННЫЙ ПОД ЗАДАЧУ ПРОДУКТА

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

1. Svelte.js — фронтенд-фреймворк для реактивного интерфейса и работы со сценариями страницы;
2. Sass — модульная стилизация и поддерживаемая верстка;
3. GSAP и AOS — библиотеки для анимаций, скролл-эффектов и плавных появлений контента.

Технические вызовы, которые мы решили:

1. Анимационный слайдер вкусов. Каждый вкус — это отдельная мини-сцена с собственной логикой движения. Мы создали кастомный модуль, позволяющий плавно переключать анимации и не перегружать страницу.
2. Квиз с круговой каруселью. На мобильных ощущения должны быть такими же естественными, как листание карусели на десктопе. Мы сделали мобильную карусель естественной как скролл в смартфоне.
3. Оптимизация скорости. Графики много, а UX должен быть быстрым. Мы преобразовали изображения в WebP, внедрили lazy-load, critical CSS и оптимизировали скриптовую нагрузку.
4. Pixel-perfect верстка. Каждый экран, от отступов до теней, совпадает с макетом в Figma на 100%.

Такой стек мы используем в коммерческих продуктах, где важны стабильность, визуальная выразительность и масштабируемость. Если вам нужна разработка лендинга на Svelte.js или сложные анимации на GSAP/AOS, мы можем предложить архитектуру и дизайн-подход под ваши задачи.

ЧТО ИЗМЕНИЛОСЬ ПОСЛЕ ЗАПУСКА

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

До разработки мы изучили 6 сегментов аудитории и собрали структуру из 12 смысловых блоков — каждый закрывает отдельную пользовательскую потребность и ключевые требования из брифа. Это минимизировало риск неверного позиционирования продукта на старте продаж.

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

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

Бизнес-результаты говорят сами за себя:

1. лендинг вызывает мгновенное желание попробовать продукт,
2. глубина просмотра увеличилась на +55% благодаря квизу и интерактивным элементам,
3. сайт стабильно работает на мобильных устройства с учетом насыщенной графики — производительность улучшена на 45%, проведена комплексная performance optimization для стабильной работы при высокой графической нагрузке.

Мы создали диджитал-продукт, который работает как автономная система вовлечения: эмоция → сценарий → действие.

ЗА 25 ДНЕЙ МЫ СОЗДАЛИ ЛЕНДИНГ ДЛЯ ЗАПУСКА YOMILK: ОН УСИЛИВАЕТ ВОВЛЕЧЁННОСТЬ И СТАНОВИТСЯ ПЕРВЫМ КАСАНИЕМ С БРЕНДОМ, ПЕРЕДАВАЯ ОЩУЩЕНИЕ УДОБНОЙ ПОЛЕЗНОЙ ПРИВЫЧКИ