100
Клиент
Год
2024
О проекте
Клиент
«СТС» — один из главных развлекательных и молодёжных телеканалов страны.
В феврале 2024 года на канале вышло новое онлайн-шоу «Прятки». В нём певец Егор Крид играл в прятки со звёздами: «Старая игра — новые правила». У ведущего есть всего час, чтобы найти гостей в максимально необычных локациях: от психиатрической больницы до бункера 1953 года.
Задача
Разработать игру для промо-кампании нового шоу.
Проект нужно было реализовать в короткий срок — за три недели.
Цели проекта
Привлечь аудиторию социальных сетей телеканала к новому шоу.
Ход работы
Совместно с клиентом продумали концепцию, будущие механики и технические возможности.
Над проектом работали в тесном сотрудничестве с командой «СТС»: дизайнерами, креаторами и маркетологами. Дизайн был на стороне клиента, разработка — на нашей стороне. А над ТЗ работали вместе — детально обсуждали концепцию игры и продумывали оптимизацию системы.
Процесс совместной работы
выглядел так
- Команда «СТС» предлагала свои идеи.
- Мы их оценивали и предлагали механики, учитывая возможности и ограничения технологий.
- Разработка шла параллельно с дизайном и тестированием,
чтобы адаптировать и дорабатывать механики
на основе обратной связи.
Суть и механика игры
Проработали игровую механику, которая позволила зрителям «СТС» стать соучастниками выхода нового шоу.
Суть игры — пользователи должны находить звёзд, скрытых на большом виртуальном поле, состоящем из 10 000 ячеек.
Игрок кликал на ячейку, делал репост записи о шоу во «ВКонтакте» и тогда ему открывался маленький кусочек изображения.
Все пользователи могли видеть открытые ячейки в реальном времени.
Игровой процесс
- Пользователь заходит на сайт и видит поле с ячейками.
- Под ячейками скрыты изображения звёзд, участвующих в шоу.
- Пользователь может открывать одну ячейку в день.
- Чем больше ячеек пользователь открывает и чем больше репостов делает, тем больше у него шансов выиграть приз от «СТС» — новый смартфон.
Разработка
Весь интерфейс реализовали на базе Vue 3 без дополнительных сложных инструментов или фреймворков. Это ускорило разработку и улучшило производительность сайта.
- Работали с одной большой картинкой, которую пользователи постепенно открывали. Основная сложность — сделать так, чтобы изображение открывалось постепенно. Для этого разбили общую картинку на маленькие фрагменты, которые постепенно подгружались с бэкенда. Это позволило избежать возможности открыть полное изображение через код страницы.
- На фронтенде использовали фреймворк Vue 3. Он обеспечивает удобную структуру и лёгкость в управлении состоянием проекта. После каждого клика пользователя по ячейке на сервер отправлялся запрос для открытия новых фрагментов картинки. Далее сервер возвращал соответствующий кусочек изображения.
- На странице с игрой реализовали несколько модальных окон — поп-апов — для уведомлений и подтверждений действий пользователя. Например, информации, что открыли ячейку, засчитан ли репост и так далее. Это позволяло максимально быстро сориентировать пользователя, какие ему нужно ещё предпринять шаги в игре.
- Ещё одна сложность, с которой мы столкнулись — как показать полное изображение на мобильных устройствах. Мы использовали специализированные библиотеки, чтобы картинку можно было увеличивать, уменьшать и перемещать, а сайт при этом работал стабильно.
- На бэкенде использовали PHP. Он позволил нам быстро реализовать необходимую серверную логику без лишних усложнений.
Результат
За три недели создали полноценную мобильную игру, которая привлекла 17 тысяч человек
к новому шоу.
Игра подогрела внимание к новому шоу и помогла пользователям почувствовать себя причастными к проекту. Пользователи активно участвовали: открывали ячейки и делали репосты, чтобы выиграть главный приз.
Проект получил хорошие отзывы как от зрителей, так и от команды «СТС». Игра стала отличным инструментом для вовлечения аудитории и повышения интереса к шоу.
Результаты в цифрах
- 3 недели — период, когда можно было поиграть в игру;
- 17 000+ уникальных игроков;
- 70% пользователей, открывших игру, вовлеклись в механику
и начали играть; - >1 минуты в среднем пользователи проводили в игре. Значит игроки не только открывали свои ячейки, но и исследовали общий прогресс игры.
Фронтенд
Vue.js
Бэкенд
PHP
Клиент
Год
2024
Кейсы
Рекомендуем
Следующий
