Роботи/26/ 26

Gainers City

Наша студія · Гра-портфоліо

Наше портфоліо як гра: сім районів пластилінового міста — сім справжніх проєктів, у кожному міні-гра на 30 секунд із трьома рівнями. Збирайте ◆ і вигравайте до 10 % знижки на сайт.

gainers.website/play
Gainers City: website, first screen
Gainers City: website on a phone
КатегоріяНаша студія · Гра-портфоліо
Живий сайтgainers.website/play
Блоків розібрано08
Задача

Сітку портфоліо легко прогорнути. Ми хотіли, щоб люди провели кілька хвилин із нашими справжніми проєктами, запамʼятали їх і пішли з приводом написати нам: знижкою, яку заробили самі.

Що ми зробили
  • Геймдизайн
  • 3D-місто
  • 7 міні-ігор
  • 3 мови
Блок за блоком

Блок за блоком

Справжні скріншоти живого сайту, комп’ютер і телефон. Що робить кожна частина і чому вона зроблена саме так.

01 / 08
  • UX
  • Текст

Gem пояснює гру

Перший візит відкриває навчання на три кроки від Gem, нашого пластилінового маскота: торкнись району, зіграй гру на 30 секунд, збери ◆ на більшу знижку. Воно гортається саме й пропускається, а кнопка «?» повертає його. Ми додали його після першої версії, коли логіка гри була недостатньо очевидною.

Комп’ютер · 1440Телефон · 390
gainers.website/play
Gainers City: Gem explains the game
Gainers City: Gem explains the game (phone)
02 / 08
  • Структура
  • Анімація
  • Конверсія

Місто — це портфоліо

Кожна будівля — справжній клієнт: Delishh, 108 Electriclline, Krishna Cards, Nails Star, Gainers App, Food For All, Darius Skliaudys. Світло йде від ранку до ночі, поки граєте, як день студії на нашій головній. Рядок цілі внизу завжди каже, скільки ◆ лишилось до наступної знижки, і підказує, який район спробувати далі.

Комп’ютер · 1440Телефон · 390
gainers.website/play
Gainers City: The city is the portfolio
Gainers City: The city is the portfolio (phone)
03 / 08
  • UX
  • Текст

Одне правило, показане, а не розказане

Перед кожною грою картка дає одне правило, що починається з дії, «Лови все з логотипом Delishh», легенду ✓ / ✕ з малюнків самої гри і жест. Далі «Почати» або «Обери рівень». Жодного абзацу, тож гравець у грі за кілька секунд.

Комп’ютер · 1440Телефон · 390
gainers.website/play
Gainers City: One rule, shown not told
Gainers City: One rule, shown not told (phone)
04 / 08
  • Бренд
  • Анімація

Кожна гра розповідає історію клієнта

Міні-ігри побудовані навколо того, що робить кожен бізнес. У районі Delishh ви ловите рослинні паки бренду, намальовані кодом у його бордовому й золотому, і оминаєте сірі паки без назви. Швидкість, частота і частка підробок ростуть за три рівні.

Комп’ютер · 1440Телефон · 390
gainers.website/play
Gainers City: Each game tells the client's story
Gainers City: Each game tells the client's story (phone)
05 / 08
  • Бренд
  • UX

«Every line matters», буквально

Для 108 Electriclline гра бере слоган клієнта: повертай плитки з кабелем, доки не засвітиться кожен будинок на полі. Поле росте з 4×4 до 6×6 за рівнями. Хто пройшов його, провів хвилину з кольорами, логотипом і обіцянкою бренду.

Комп’ютер · 1440Телефон · 390
gainers.website/play
Gainers City: Every line matters, literally
Gainers City: Every line matters, literally (phone)
06 / 08
  • Конверсія
  • Кнопки · CTA

Після гри — справжній проєкт

Кожна перемога закінчується карткою кейса: скріншот живого сайту, що ми зробили, у вигляді чіпів, і «Відкрити сайт». Гра — гачок, картка — портфоліо. «Назад у місто» тримає цикл.

Комп’ютер · 1440Телефон · 390
gainers.website/play
Gainers City: After the game, the real project
Gainers City: After the game, the real project (phone)
07 / 08
  • Конверсія
  • Кнопки · CTA

Знижка замикає цикл

О 23:59 місто каже «на добраніч» і показує досягнутий рівень: бронза 5 %, срібло 7 % або золото 10 % знижки на сайт чи Launch Kit, з особистим кодом. Головна кнопка — «Отримати знижку в WhatsApp», готове повідомлення студії, тож гра закінчується розмовою з нами.

Комп’ютер · 1440Телефон · 390
gainers.website/play
Gainers City: The discount closes the loop
Gainers City: The discount closes the loop (phone)
08 / 08
  • UX
  • Структура

Вихід для тих, хто поспішає

Не всі хочуть грати. «Просто показати портфоліо» на першому екрані й меню відкривають «Усі райони»: кожен проєкт із категорією, вашими зірками, «Грати» і «Відкрити сайт». Ніхто не застрягає в грі, щоб побачити наші роботи.

Комп’ютер · 1440Телефон · 390
gainers.website/play
Gainers City: A way out for the busy
Gainers City: A way out for the busy (phone)
Що всередині

Що всередині

  • 3D-місто з пластиліну на three.js, завантажується після першого кадру, тож меню працює одразу
  • Сім міні-ігор, намальованих кодом на canvas, кожна вантажиться лише коли відкривають її район
  • Звук синтезується в браузері (WebAudio), вимкнений, доки гравець його не ввімкне
  • Англійська, українська й російська; прогрес зберігається в браузері

Хочете так само?

Розкажіть про свій бізнес у WhatsApp. Ми відповімо планом і фіксованою ціною ще до початку роботи.

Наступний кейс Food For All Благодійність · Платформа й бренд