Genium Pub Quiz - интерактивная квиз-игра для клуба интеллектуальных игр

С какой задачей столкнулись

Genium проводил живые паб-квизы в нескольких городах. Их сайт перечислял мероприятия, но не давал посетителям причин остаться - низкое время на сайте било по позициям в поиске, а бронирование игры требовало слишком многих шагов. Задача: сделать так, чтобы сайт ощущался как сама игра, удерживать посетителей и свести трение при записи к нулю.

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

Исследование

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

1. Нулевой интерактивный крючок - посетители читали страницу и уходили. Ни повода кликнуть, ни повода остаться.
2. Трение с городом - пользователям приходилось искать мероприятия в своём городе вручную, что убивало конверсию на мобильных.

Рассмотренные варианты

1. Полная переработка на новом стеке - отклонено. Сроки и бюджет не позволяли начинать с нуля, а накопленный SEO-капитал был бы потерян.
2. Готовый плагин квизов для WordPress - отклонено. Доступные плагины были слишком жёсткими для нужного игрового UX и не поддавались оформлению под атмосферу паба.
3. VueJS-виджет, встроенный внутрь WordPress - выбрано. Дал кастомный, полностью оформленный интерактивный опыт без вмешательства в существующую структуру CMS. Vue отвечал за реактивное состояние игры; WordPress оставался единственным источником истины для контента и настроек через админ-панель.

Решение

Проект разбили на три независимых результата, которые можно было выпускать и проверять по отдельности: визуальный редизайн, квиз-игра на VueJS и модуль геолокации. Это позволило существующему сайту оставаться в работе на протяжении всей разработки без простоев и потери функционала.

Реализация

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

Квиз-игра построена как самодостаточное VueJS-приложение, смонтированное внутри шаблона страницы WordPress. Вопросы и варианты ответов полностью управляются через админ-панель WordPress - для обновления контента участие разработчика не нужно. Игровая механика проста по замыслу: один вопрос, четыре варианта, мгновенная обратная связь. Результат - вовлекающая петля, которой можно делиться и которая держит среднее время сессии заметно выше базового.

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

Результат

Посетители, вовлекающиеся в квиз, проводят на сайте существенно больше времени, напрямую улучшая SEO-сигнал. Регистрация на мероприятия перешла в формат одного касания - без аккаунта, без формы сверх имени и телефона. Модуль геолокации устранил трение навигации по городам для мультигородских посетителей. Весь существующий функционал был сохранён без единого регресса, о котором сообщили после запуска.

Обзор сайта

Genium Quiz

Genium Sprint

Главная страница

Возможности

Квиз-игра на VueJS

Модуль геолокации

Бронирование без регистрации

Быстрые действия с учётом города

Видеообзоры

Процесс бронирования

Загрузка фото

Позиции в SEO и совместимость с Firefox

Бета-вёрстка и адаптивный дизайн

Genium-спринт - новый формат игры

На сайт добавили новый формат игры, genium-спринт, с описанием и карточками примеров конкурсов. Дизайн согласовали с заказчиком.

Закрытый показ переработанного дизайна

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

Письмо-подтверждение бронирования