Собрали 300 миллионов кликов в механике по мотивам Лиги Чемпионов!

Реализовать игру к плей-офф Лиги Чемпионов.

Игра должна:

- быть легко масштабируема на разные виды спорта;

- удерживать интерес пользователей в течение всего проекта;

- при необходимости возвращать их в игру;

- конвертировать пользователей в новых клиентов PARI.

Брифинг: от идеи к концепции.

Идея клиента для обсуждения: запуск параллельной Лиги чемпионов, связанной с любовью и преданностью болельщиков. В качестве референса клиент предложил хайповую на тот момент кликер-игру “Монета Дурова”.

Итоговая концепция игры: пользователь выбирает клуб, тапает за него – чем больше тапов, тем выше шанс выиграть. Пользователи, чей клуб по итогам игры наберёт максимальное количество тапов, делят между собой 1 000 000 фрибетов.

Сроки реализации были ограничены, поскольку к моменту брифинга плей-офф Лиги Чемпионов уже стартовал. 

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

Что дал такой подход:

- мы отказались от авторизации пользователей через id PARI из-за большого отвала на старте в тестовой группе; 

- сделали авторизацию в проекте через почту без верификации; 

- убрали личный лидерборд пользователей и оставили только командный; 

- личный зачёт кликов вынесли на экран игры. 

Согласованный прототип и пользовательский путь легли в основу дизайна.

На основе прототипа и референсов по стилю от клиента мы создали 3 варианта визуальных решений:

1) лендинг, который будет напоминать футбольную трибуну; 

2) дизайн стадиона, на котором будут находиться логотипы футбольных команд-участниц плей-офф Лиги Чемпионов; 

3) часть стадиона "Уэмбли", на котором проходил финал Лиги Чемпионов, с размещением самолёта с изображением команд. 

С незначительными доработками с первого раза согласовали идею с Уэмбли. 

Для экрана выбора было создано 8 уникальных стилизованных эмблем команд.

На экран игры добавили визуал мяча, создав таким образом ещё одну отсылку к футболу. По идее автора проекта при тапе должна возникать анимация набивания мяча ногой (в последствии эта идея доставила нам немало хлопот!)

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

Для реализации проекта мы использовали свой стандартный стек: React + Laravel.

Сборка высоконагруженных проектов с БД , лидербордами, защитой от фрода не вызвали затруднений на этапе разработки и вёрстки – в этом у нас большой опыт.

Неожиданно сложной задачей для нас стала синхронизация анимации мяча и клика пользователя, так как клик занимает доли секунды, а анимация длится около 1 секунды. 

Но решение оказалось простым: мы увеличили скорость перезагрузки анимации и стали подгружать её по окончании предыдущего кадра. Получили гармоничную картинку без задержек. 

Как только удалось решить задачу с анимацией, к проекту подключились тестировщики. Их основной задачей было “сломать” проект и его логику. Разработчики провели нагрузочное и функциональное тестирование. 

После успешных тестов продукт выкатили на бой.

Мы получили классную механику, в которую были вовлечены 39 192 пользователя. Всего за время проекта пользователи совершили более 30 миллионов кликов за свои команды. Победителем стала команда Manchester City – более 8 миллионов кликов! А самый активный пользователь кликнул целых 225 869 раз!