Уложитесь в мой дедлайн?
Oops! Something went wrong while submitting the form.
Команда видеоблогера Славы Бустера решила запустить на YouTube новое шоу: игрок должен за тысячу секунд ответить на все каверзные вопросы ведущих. Фишка в том, что у игрока измеряют пульс — и чем учащение бьется сердце, тем быстрее сгорают секунды.
Как реализовать эту игровую механику, чтобы и пульс измерить, и секунды отнять, и получить эффектную картинку для зрителя? Ребята решили сделать специально для шоу отдельное приложение. Искали IT-команду, которая справится с задачей качественно и в супер-сжатые сроки — нужно было запустить видео-продакшн как можно скорее. И нашли нас, Purrweb :)
В этом кейсе расскажем и покажем, что получилось в итоге, и какое решение мы нашли, чтобы всего за месяц сделать готовый для продакшна продукт.
Прежде чем погрузимся в кейс, пара слов о нашем заказчике. Слава Бустер — популярный российский стример и видеоблогер. У Славы 4,5 млн подписчиков на твиче, 3,7 млн на YouTube, и еще несколько млн в разных соцсетях :) Сейчас он с командой выпускает разный контент, в том числе развлекательные шоу. За приложением для одного из них к нам и обратились.
Шоу «Пульс» — это викторина, где игрок должен успеть ответить на все вопросы за 1000 секунд. Участник побеждает, если в конце игры на его счету остается хотя бы одна секунда. Главная фишка шоу такая: датчик измеряет пульс игрока, и чем он выше, тем быстрее сгорают секунды. А значит, меньше времени остается на ответы. Только спокойный человек может выиграть, ведь чем больше волнуешься, тем чаще бьется сердце.
Нужно было, чтобы зрители видели и пульс, и таймер, и экран с вопросами. Изначально делали так: в кадре показывалось несколько экранов — с вопросами и «пульсом» игрока. Но тогда отображалась просто анимация, а не реальный пульс.
Для большей вовлеченности зрителей все-таки лучше показывать настоящие данные, а не имитацию. Поэтому решили сделать отдельное приложение, в котором:
Приложение нужно было ребятам как можно скорее, чтобы запустить процесс съемок. Еще огромное значение, кроме функциональности, играл дизайн. Хотели красивые эффекты и анимации.
О Purrweb команда Славы Бустера узнала благодаря приложению «Мотиваторы!», которое мы задизайнили и разработали для звезд шоу «Импровизаторы». Понравился яркий и стильный дизайн приложения, да и сработала рекомендация :)
А супер-сжатые сроки проекта нас не напугали. Мы умеем делать цифровые продукты быстро и для стартапов, и для корпораций, и знаем, как найти идеальное техническое решение, чтобы успеть даже к самому жесткому дедлайну и при этом не потерять в качестве и бизнес-ценности.
Правда, кроме сроков, на этом проекте был еще один челлендж — бюджет. Но и тут мы придумали, как помочь Славе и реализовать задумку.
Разработка полноценного веб-приложения с глубокой интеграцией датчиков и сложной игровой механикой потребовала бы больше времени и ресурсов, чем позволяли сроки и бюджет. Поэтому мы предложили оптимальное решение — технический прототип, способный закрыть все задачи шоу на этапе съемок.
Главная цель проекта — дать зрителю убедительную картинку в кадре, а не создавать полнофункциональный продукт для широкого использования. Для этого не нужно сложное приложение — достаточно продуманного прототипа с настоящей логикой работы.
В отличие от интерактивных макетов, наш прототип реализован на уровне кода:
Такой вариант полностью устроил заказчика и отлично подходил под нашу задачу: добиться нужного визуального и технического эффекта в кадре. И конечно, остаться в рамках ограниченного бюджета и соблюсти жесткий дедлайн.
<div class="post_divider"></div>
Многие считают, что прототип — это сырой, примерный макет. На самом деле уровень его проработки зависит от задачи и сроков.
🔹 Графический прототип (вайрфрейм) — это схематичный набросок без визуальной проработки.
🔹 Интерактивный прототип — уже готовый дизайн, имитирующий работу продукта: он показывает основные пользовательские сценарии, хотя под капотом — никакого кода.
🔹 Технический прототип — более продвинутая версия: есть и дизайн, и частичная функциональность. Он не просто выглядит как готовый продукт, но и работает.
В этом проекте мы реализовали именно технический прототип. Он дешевле и быстрее в производстве, чем MVP, а для задачи, с которой пришел клиент, подходил идеально.
Подробно о видах прототипов рассказали в этой статье. Там же ответили на важный вопрос: чем прототип отличается от минимально жизнеспособного продукта.
<div class="post_divider"></div>
Хотя проект был небольшим по срокам, в плане задач он оказался очень насыщенным. Вот что наши ребята сделали за месяц:
Работает приложение так. В нем предусмотрены две роли:
Все начинается с подключения пульсометра. Далее декодер расшифровывает сигнал и передает данные в приложение. Чтобы все работало корректно, у датчика и приложения должен быть одинаковый API.
Игровой процесс построен на трех основных экранах:
Здесь анимация без отсчета секунд: их добавили уже на этапе разработки.
Так выглядит фоновая анимация:
Когда игрок ошибается, админ вручную отнимает секунды — но даже если ошибок нет, пульс сам может «съедать» время: чем он выше, тем быстрее убывают секунды.
Игра завершается, если у игрока заканчиваются секунды или админ вручную завершает раунд.На экране «Game Over» показываются максимальный и средний пульс игрока, а также число пройденных раундов.
Финальное демо получилось нестандартным 🙂 Обычно мы шарим экран, чтобы клиент мог видеть работу приложения. Но в данном случае это не имело смысла: ведь у нас целых три экрана, просто демонстрация их по очереди получилась бы не очень наглядной. Поэтому разработчик устроил мини-студию: поставил камеры, подключил пульсометр и взял на себя обе роли — игрока и админа.
Он был спокоен и невозмутим. Все могли в реальном времени наблюдать его пульс и видеть, как анимации и таймер реагируют на изменения. Получилось очень наглядно и весело!
.svg)
