компания

StudyLab

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

Ситуация

Компания StudyLab, разрабатывающая образовательный продукт с внутренней валютой STC, не имела собственного сайта для привлечения пользователей. Отсутствие веб-присутствия приводило к потере потенциальных клиентов, так как основной канал привлечения (реклама) не имел целевой страницы для конверсии. Пользователи, заинтересованные в продукте, не имели возможности легко перейти в Telegram-бота для начала использования сервиса.

Цель:

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

ВЫПОЛНЕННЫЕ ДЕЙСТВИЯ

1. Hero

Проведена полная верстка слайда согласно макету Figma с устранением всех микросдвигов и выравниванием элементов по единой сетке
Реализована мягкая неоновая пульсация вокруг кнопки "Перейти в Бота", создающая привлекательный визуальный акцент без отвлечения внимания
Настроен плавный бесконечный градиентный переход в кнопках "Перейти в Бота" и "Попробуй бесплатно", имитирующий движение справа налево
Настроена адаптивная версия для мобильных устройств с сохранением всех анимационных эффектов
Реализована автоматическая детекция устройства при заходе для корректного отображения версии лендинга
Внедрена система редиректа в Telegram-бота с учетом типа устройства и наличия установленного приложения

2. Как это работает?

Создана последовательная анимация бликования стрелок на десктопной версии, задающая ритм движения с умеренной частотой
Для мобильной версии реализован плавный градиентный переход текста в элементах "Академический режим", "Универсальный режим", "Интерактивная игра"
Добавлена еле заметная волновая анимация фона в мобильной версии, усиливающая тематику без отвлечения внимания
Реализована динамичная анимация появления стрелок в разделе "Учеба в 4 шага" при скролле (мобильная версия), где элементы выплывают из-за рамок экрана и "втыкаются" друг в друга

3. Экосистема Study Coin

Добавлен бриллиантовый блеск для слова "Coin", создающий эффект мерцания и привлекающий внимание к ключевому элементу
Реализовано мягкое градиентное скольжение текста, визуально подсказывающее направление чтения в сторону указывающих стрелок
Созданы кликабельные плашки с анимацией разворачивания: при нажатии плашка плавно поднимается, отображая содержимое, а значок меняется с плюса на крестик (мобильная версия) или со стрелки вниз на стрелку вверх (десктоп)
Для мобильной версии добавлена легкая анимация полета ракеты, создающая эффект движения без излишней навязчивости
Все текстовые блоки с информацией о STC, листинге и получении монет адаптированы для легкого редактирования в Tilda

4. Мы - Study Lab

Создана бесконечно бегущая строка с плавной анимацией, не слишком быстрая, но достаточно заметная для привлечения внимания
Реализована анимация персонажа с эффектом полета и частицами скорости, обеспечивающая визуальную привлекательность без излишней навязчивости
Для мобильной версии сохранены все анимационные эффекты с оптимизацией под меньшие экраны
Обеспечена кроссбраузерная совместимость анимаций во всех поддерживаемых браузерах (Chrome, Safari, Firefox, Edge)

5. Faq

Реализована статичная версия слайда без анимаций согласно требованиям
Обеспечено корректное отображение на всех устройствах с сохранением единой сетки и отступов
Добавлены CTA-кнопки с интеграцией в систему аналитики
Интеграция с Telegram-ботом:
Настроена единая логика переходов в бота для всех устройств с учетом особенностей каждой платформы
Реализовано определение наличия Telegram Desktop для корректного редиректа (открытие через приложение или браузер)
Добавлены UTM-метки для сквозной аналитики ко всем ссылкам на бота
Внедрена система отслеживания статусов редиректа (desktop app/web-telegram/mobile app) как отдельных событий

6. Система аналитики

Настроена фиксация всех CTA-кнопок с разделением по позициям.
Реализовано отслеживание глубины скролла (25/50/75/100%).
Добавлено отслеживание просмотра и взаимодействия со слайдами с анимацией
Организован сбор данных об источниках трафика через UTM-параметры.
Все события корректно передаются в аналитические системы без потерь.

7. Техническая оптимизация

Обеспечена полная кроссбраузерность (Chrome, Safari, Firefox, Edge) с тестированием на реальных устройствах
Увеличена производительность за счет оптимизации анимаций (использование CSS-анимаций вместо JavaScript где возможно)
Улучшена доступность с комфортными кликабельными зонами.
Обеспечена полная редактируемость контента прямо в Tilda без правки кода

Игровой интерфейс с полем ввода, ответами и элементами управления.

Результаты (достигнутые показатели):

1. Полное соответствие ТЗ: Все разделы и функции реализованы в макете.
2. Высокая вовлеченность: Интерактивные элементы и яркий дизайн стимулируют активность пользователей.
3. Удобство навигации: Четкая структура экранов и интуитивно понятные элементы управления.
4. Готовность к разработке: Макеты подготовлены для передачи в команду разработчиков с точными инструкциями по реализации.

ВЫВОД

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