Абонемент на кофе
Крупная продуктовая сеть запускала новый продукт — подписку на кофе через мобильное приложение. Нужна была промо-страница, которая объясняет ценность, снимает возражения и ведёт пользователя к покупке.
Стандартные страницы сайта не подходили: они работали как витрина, а не как воронка. Не было эмоционального входа, не было разделения между «что это такое» и «как этим пользоваться», не было последовательного снятия возражений перед CTA.
Аудитория — ежедневные покупатели магазина, которые уже пьют кофе в сети, но не знают о подписке. Задача: перевести привычку в осознанный выбор и довести до покупки за одно посещение страницы.
Лендинг выстроен как конверсионная воронка: эмоциональный вход → ценностное предложение → механика → социальное доказательство → CTA → снятие последних возражений в FAQ. Якорная навигация в шапке позволяет скептику сразу прыгнуть в FAQ, а любопытному — в блок «Как это работает», не заставляя никого читать страницу линейно.
Кофе — продукт с сильной эмоциональной составляющей. Статичная страница не передаёт ни энергию напитка, ни ощущение ежедневного ритуала. Поэтому motion был заложен в концепцию с первого экрана: параллакс зёрен, бегущие строки, typewriter, вращение, hover-reveal. Каждый тип анимации решает свою задачу — не декорирует, а помогает пользователю понять продукт или удержать внимание в нужный момент.
Всю анимацию настроил самостоятельно на Тильде, без разработчика.
Hero: эмоциональный вход
Главная задача первого экрана — вызвать желание, а не объяснить продукт. Заголовок «Зарядись энергией с абонементом на кофе» работает на уровне ощущения, а не информации. Два стакана в круге — продукт в фокусе, без лишнего контекста.
Две бегущие строки крест-накрест — это не украшение. Они решают задачу, которую список не решает: показывают весь ассортимент (латте, капучино, американо, флэт уайт...) с маленькими иконками напитков без когнитивной нагрузки. Пользователь не читает — он сканирует периферийным зрением и узнаёт «свой» напиток. Это триггер идентификации: «это для меня».
Параллакс кофейных зёрен создаёт глубину и движение, соответствующее энергетике продукта. При скролле страница «живёт» — это удерживает внимание и сигнализирует: здесь есть что смотреть дальше.
Ценностное предложение
Главный барьер к покупке подписки — непонимание выгоды. Лид-блок решает это в три слоя: эмоция («Идеальное утро начинается с вашего любимого напитка...»), ключевое число (2 чашки) и экономический аргумент (стоимость при активном абонементе).
Typewriter-эффект на названии напитка — не просто анимация. Он поочерёдно показывает «латте», «капучино», «американо», создавая момент узнавания у каждого пользователя: человек видит свой напиток и достраивает предложение на себя. Это снижает дистанцию между «рекламой» и «личным предложением».
Вращающаяся звезда с надписью «0₽» — визуальный якорь блока. Motion привлекает взгляд именно сюда, а зачёркнутые «129₽» внизу создают ощущение акции — разрыв корпоративного стиля в нужном месте.
Преимущества с hover-reveal
Классический список преимуществ читают редко — он выглядит как обязательный раздел, который можно пропустить. Hover-reveal меняет механику: при наведении появляется блок с иллюстрацией (скриншот приложения, стакан кофе), превращая список в интерактивное исследование.
Три блока в столбик — Экономия, Гибкость, Удобство — структурируют продукт по трём разным мотивациям покупки. Пользователь с разными приоритетами находит своё: кто-то реагирует на цену, кто-то на контроль над параметрами, кто-то на скорость у кассы. Порядок намеренный: экономический аргумент идёт первым как самый универсальный.
Два флоу в одном блоке
«Как это работает» — блок с самым высоким риском потери пользователя. Если инструкция выглядит сложно, человек уходит. Ключевое решение: два таба — «Подключить абонемент» и «Начать использовать».
Это разделение важно, потому что новый пользователь и действующий подписчик находятся в принципиально разных ментальных состояниях. Новому нужно понять как купить — и убедиться что это несложно. Действующему нужно вспомнить как воспользоваться у кассы. Смешать оба флоу в один список — значит сделать его длиннее и запутаннее для обоих. Табы сокращают визуальный объём вдвое и устраняют ощущение сложности.
Параллакс кофейных зёрен на фоне блока сохраняет энергетику страницы даже в самой «инструкционной» её части.
CTA
Перед финальным CTA — повторная бегущая строка: «Оформи сейчас / Начни экономить уже сегодня». Это не дублирование hero, а второй касательный момент для тех, кто долистал но ещё не решил. Ticker-лента не требует остановки — она работает пока пользователь скользит к кнопке.
В CTA-блоке — два «летающих» стакана с параллаксом. Продукт снова в кадре: не только кнопка, но и образ того, что человек получит. Это замыкает эмоциональную дугу страницы: hero открывался стаканами, финал — тоже стаканами.
Снятие возражений: FAQ
FAQ из 7 вопросов — последний рубеж перед уходом. Размещён после CTA намеренно: человек, который дошёл до FAQ, ещё не решил, но всё ещё на странице. Вопросы покрывают весь спектр возражений: что такое продукт, какие напитки входят, можно ли изменить параметры, как продлить. После FAQ — логотип приложения и финальный призыв к установке.
Клиент принял лендинг сразу и возвращался за новыми версиями — под тематические акции (например, коллаборации с выставками) менялась цветовая палитра и визуал стаканов по всей странице, структура и механика оставались прежними.
