Кейс · Банки и страховые

ОТП Банк: детский квиз и запись видеообращений

ОТП Банк — проект ITLabs: веб-квиз для детей и их родителей.

Интерактивная викторина

Готовый ролик: кнопки «Отправить по почте», «Показать всем», «Сбросить»

Коротко о проекте

ОТП Банк — проект ITLabs. Веб-квиз для детей и их родителей. Ребёнок отвечает на несколько простых вопросов, узнаёт, в чём его сильная сторона, и забирает подарок — файл скачивается прямо с экрана результата. Вопросы и оформление меняются из админ-панели, поэтому механику легко перенастроить под новую тему или событие. В поиске такое решение называют и по-другому: сенсорная игра, квиз на терминале, интерактивная игра.

Описание проекта

Как устроено решение

Для ОТП Банка — российской дочерней компании венгерской банковской группы OTP, заметного игрока в розничном кредитовании, — ITLabs сделала не только детский квиз, но и сценарий записи видеообращения на вертикальном экране с камерой. Посетитель подходит к экрану в фирменном оформлении банка — белый фон, логотип сверху, крупные салатовые кнопки, — записывает короткое видео, сразу пересматривает его и решает, что с ним делать дальше. Весь путь занимает пять экранов и не требует помощи сотрудника: на каждом шаге одна главная кнопка, а после записи — три понятных действия.

Заставка с надписью «Запишите своё обращение» показывает пример кадра и одну кнопку «Начать». Дальше включается камера: пока она готовится, на кнопке крутится индикатор загрузки, затем посетитель видит себя в кадре и нажимает запись. Во время записи кнопка становится «Стопом», а кольцо вокруг неё заполняется по ходу записи. Готовый ролик тут же проигрывается в рамке с полосой перемотки, поверх видео выводится текст. Под роликом три кнопки — «Отправить по почте», «Показать всем» и «Сбросить», чтобы записать заново — неудачный дубль не приходится оставлять.

Что сделали

Как проходит квиз

Ребёнок отвечает на несколько простых вопросов, узнаёт свою сильную сторону и забирает подарок — файл скачивается прямо с экрана результата.

Прохождение

Промо-страница: кому квиз адресован, как проходить и что будет в конце
Один вопрос на экран, дальше — только после выбора ответа
Результат считается на сервере по набору ответов
Подарок за прохождение: файл отдаётся сервером и сохраняется на устройстве
Повторное прохождение с первого вопроса без перезагрузки страницы

Содержание и оформление

Вопросы и варианты ответов приходят с сервера — сценарий меняется без переделки страницы
Адаптивная вёрстка: отдельные раскладки для большого экрана и для телефона
Оформление под детскую аудиторию: анимированная бегущая строка, звёзды, фирменные цвета

Что ещё в решении

Сценарий записи видеообращения на вертикальном экране с камерой
Заставка «Запишите своё обращение» с примером кадра и кнопкой «Начать»
Индикатор подготовки камеры прямо на кнопке записи
Живое превью: посетитель видит себя в кадре до начала записи
Кнопка «Стоп» с кольцом прогресса во время записи
Просмотр готового ролика в плеере с полосой перемотки
Текст поверх записанного видео
Отправка записи по электронной почте
Кнопки «Отправить по почте», «Показать всем» и «Сбросить» под роликом
Сброс и повторная запись одной кнопкой
Фирменное оформление ОТП Банка: логотип и салатовые кнопки

Как выглядит интерфейс

Экраны решения

Заставка: приглашение записать обращение и кнопка «Начать»

Камера включается: индикатор загрузки на кнопке

Посетитель в кадре, кнопка записи готова

Идёт запись: кнопка «Стоп» с кольцом прогресса

Вопросы и ответы

Частые вопросы о проекте

Что за квиз сделан для ОТП Банка?

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

Как устроено прохождение?

Пошагово: один вопрос на экран, переход дальше только после выбора ответа. Ребёнок не теряется в длинной анкете, а промо-страница заранее объясняет, кому квиз адресован и что будет в конце.

Кто считает результат?

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

Что получает ребёнок в конце?

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

Квиз рассчитан на телефон?

Вёрстка адаптивная: для большого экрана и для телефона сделаны отдельные раскладки. Оформление подобрано под детскую аудиторию — анимированная бегущая строка, звёзды и фирменные цвета банка.

Можно ли перезапустить квиз с другими вопросами?

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

Можно ли пересмотреть видео перед отправкой?

Да. Сразу после записи ролик проигрывается в плеере с полосой перемотки, и посетитель решает, отправить его по почте, показать всем или сбросить. Неудачный дубль стирается одной кнопкой, и запись можно сделать заново.

Как посетитель забирает свою запись?

По электронной почте: на экране с готовым роликом есть кнопка «Отправить по почте». Так запись может остаться у посетителя на память, а не только на терминале банка.

Нужен ли сотрудник банка, чтобы записать обращение?

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

Похожие проекты