СБЕР квиз

Клиент

Сбербанк — крупнейший банк России.

Задача

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

Решение

Мы спроектировали механику квиза, разработали интерфейсы и реализовали систему игровых комнат с синхронным взаимодействием участников. Пользователи могли:

• создать комнату.
• отправить друзьям ссылку-приглашение.
• подключиться к игре прямо в браузере.
• вместе проходить квиз в реальном времени.

В одной игровой сессии участвовало от 2 до 10 человек.

Сценарий квиза

1. Создание комнаты

Один из пользователей создавал игровую комнату: выбирал аватар, вводил имя и телефон, придумывал название. После короткого онбординга попадал в лобби и отправлял друзьям ссылку-приглашение.

2. Подключение игроков

Остальные участники переходили по ссылке, выбирали имя и аватар, проходили онбординг и подключались к игре. Когда все игроки собирались в лобби, администратор запускал квиз.

3. Игровая механика

Квиз состоял из 20 вопросов. В каждом раунде система случайным образом выбирала игрока, который отвечает следующим. Все участники синхронно видели:

• кто отвечает.
• вопрос и варианты ответов.
• таймер.
• результаты ответа.

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

1. 01Frontend — Next.js
2. 02Backend — Laravel
3. 03Real-time взаимодействие — WebSocket

4. Финальный экран

В конце игры участники получали результат квиза и предложение от Сбера с возможностью перейти по ссылке и поделиться своим счетом.

Дизайн и концепция

В начале работы клиент прислал референсы идеи и иллюстрации.

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

В итоге остановились на концепции домашнего новогоднего вечера.

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

Позже адаптировали дизайн под фирменную палитру Сбера и доработали детали интерьера.