Genium Pub Quiz — интерактивная квиз-игра для клуба интеллектуальных игр | ROXL's Blog

Технологии

VueWordPressPHPGeolocationQuizFrontend

Ссылки

https://www.genium-quiz.com/

Услуги

→Визуальный редизайн — атмосфера паба и UI в фирменном стиле
→Разработка интерактивной квиз-игры на VueJS
→Интеграция с админкой WordPress для управления контентом квиза
→Модуль геолокации для показа контента по городу
→Регистрация на мероприятия без трения (без аккаунта)

Результаты

✓Обновлённый сайт с визуальной айдентикой паб-вечера
✓Квиз-игра на VueJS — полностью управляется через админку WordPress
✓Модуль геолокации — расписание и галерея по городу в один клик
✓Бронирование мероприятий без регистрации

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

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

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

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

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

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

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

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

Решение

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

Реализация

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

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

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

Результат

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