Вдохновились Гарри Поттером и создали для ASK Studio мини-игру к запуску нового сайта
A Secret Knowledge, или просто ASK Studio — российский бренд сумок-конструкторов из Санкт-Петербурга. За шесть лет он вырос из маленькой мастерской в команду, которая сама проектирует и шьёт сумки, активно взаимодействует с комьюнити и продолжает делать то, что любят.
Зарождение идеи
Уже на этапе погружения в бренд дизайн-команда айти-агентства Фьюче начала подмечать, как клиент подходит к созданию креативов на разных площадках. Только к открытию корнера в Цветном была подготовлена серия активностей, начиная с турнира в бильярдном клубе и заканчивая концепцией магазина в стиле оммажа бильярдному бару. Запомнился образ Розовой Девочки с розовым айподом и верой в себя, а ещё новогодний дроп с кайфовым адвент-календарём.
Такой подход к каждому событию стал для нас эмоциональным драйвером и на дейликах накидывали интересные мысли, которыми приятно поделиться с клиентом. Так, собственно, и родилась идея сделать что-то особенное к запуску сайта.
Как только стартует работа над проектом, подписывайтесь на социальные сети бренда. Так вы лучше поймёте бизнес клиента и почувствуете его специфику.
Вместо банального новогоднего поздравления решили анонсировать коллегам интерактив, а внимание к сообщениям привлечь с помощью 3D-графики. Хотелось не просто запустить сайт, а создать событие, которое подарит эмоции и оставит у покупателей приятное послевкусие!
Брейншторм
Решили не откладывать на потом и закрылись в переговорке для мозгового штурма. Это был настоящий двухчасовой марафон креативных решений! Придумали 36 идей, но сразу выбрать лучший и перспективный вариант оказалось непростой задачей. Чтобы не устраивать жарких споров, перешли к голосованию.
У каждого участника 10 меток. Идеи с наибольшим количеством меток считаются приоритетными и переходят на 1 этап голосования. Повторным голосованием с ограничением в 3 метки оставляем самое интересное для подготовки к презентации.
В итоге у нас осталось 5 фаворитов с подробным описанием, которые точно не оставят аудиторию равнодушной.
Наши фавориты
Мемори — игра с узнаваемыми символами бренда
Мир ASK — интерактивная вселенная с сюрпризами
Крылатые ключи — механика поиска скрытых элементов на сайте
Какая ты сумочка ASK? — вовлекающий тест с персонализированным результатом
A Secret Code — загадка, раскрывающая концепцию бренда
… и ещё 31 идея
Ребята, посмотрела всёёё и я в восторге! Мне нравится первые три варианта, но выигрывают ключи, потому что у нас есть похожая оффлайн-активность 🙂
Крылатые ключи
Как уже понятно из названия статьи, кто-то из нас пересмотрел Гарри Поттера. Особенно запомнился момент, когда ключи оживают и парят в воздухе. Ведь чтобы открыть дверь, нужно не просто поймать ключ, а найти подходящий. Мы вспомнили недавнюю зимнюю коллекцию, которая возвращает в детство, а также летнее открытие флагмана A Secret Hotel, где ключи стали важным символом, а концепция отсылает к «Гранд Будапешту», создавая тот самый яркий и волшебный мир Уэса Андерсона.
Эти пересечения вдохновили нас на переосмысление образа ключа — привычного для бренда символа, который хотели дополнить отсылками, детскими мечтами и каплей магии.
Первые наброски
Описали механику игры, прикинули трудозатраты и собрали скетчи, чтобы было видно, как всё работает и насколько эффектно могут выглядеть ключи.
Идея с самого начала оставалась простой. В углу сайта парит ключ, и по нажатию появляется короткий свод правил, а спустя время начинается сама игра. Нужно поймать как можно больше ключей, чтобы получить промокод на скидку.
Были и другие интересные варианты, но мы быстро поняли, что они только усложнят реализацию и не дадут нужного эффекта. Решили приберечь их на будущее. Пусть ждут своего часа.
После обратной связи доработали механику, оформили финальное описание и положили в основу ТЗ. Оставалось только выбрать момент для запуска, чтобы всё совпало с релизом сайта.
Коллеги, привет! И вас с праздником 💗 Cпасибо за суперпредложение и подробную механику! По бюджету будем думать и согласовывать)
Так мы поняли, что крылатым ключам быть!
Конструктор ключей
Для отображения оффлайн-магазинов на карте мы уже делали 3D-элементы. Поэтому решили, что и ключи будем дизайнить в Spline. А чтобы выдержать всё в единой концепции, создали объёмные цифры для отображения результата.
❤︎ Как прокачать 3D в Spline, собирая праздничные логотипы
Довольно быстро пришли к тому, что проще всего собрать ограниченный набор деталей, из которых можно миксовать и получать большое количество образов. Получилось 4 варианта каждой части: головки, хвостика, коронки, шейки, воротника и крыльев. Нам хватило 16 крылатых ключей, чтобы избежать частых повторов на экране.
Техническая часть
Одним скучным вечером дизайн-лид загорелся идеей проверить механику игры через нейронку. Два часа ушло на составление правильного промпта, чтобы в ответ получить рабочий код. В итоге у команды оказался не только прототип в Фигме, но и сырая версия мини-игры с пометкой «Сделать что-то похожее». Так началась работа над простой и понятной игрой на чистом JS, HTML и CSS.
Скорость. Вся логика отрабатывалась прямо в браузере. Даже при большом наплыве пользователей сайт не падал. А чтобы старт игры был мгновенным, заранее загрузили изображения ключей, и в момент запуска они не «догоняли» игрока. Сервер отправлял уникальный промокод и сообщение, исходя из уровня.
Адаптив. Игра ощущалась комфортной и на смартфоне, и на десктопе. Хватило стандартных media queries для автоматического масштабирования под любое соотношение сторон. Единственное, во время тестов заметили, как легко ловить ключи в мобильной версии. Пришлось вручную балансировать уровни сложности, чтобы у всех были одинаковые ощущения от игры.
Анимация. Самая интересная часть мини-игры. Взяли requestAnimationFrame для непредсказуемого и плавного полёта ключей. Браузер сам подсказывал, когда перерисовывать кадры, и нагрузка распределялась оптимально. Алгоритм рандомизации движения ключей упростили до O(n), чтобы даже слабые устройства справлялись. Так вычисления росли линейно от числа объектов на экране. Для игрока ключи просто не тормозят, а для гика плюсик к уважению.
В следующий раз можно было бы поиграться с алгоритмами рандомизации, сделать их более функциональными, базирующимися на тригонометрических вычислениях. Одним словом совершенствовать движок игры можно вечно, было бы время.
Немного цифр
За месяц 1 136 человек показали себя настоящими ловцами крылатых ключей и никто не остался без награды. Каждый 103-й покупатель уже успел активировать промокод и получить приятную скидку, а цифры продаж оставим за кадром. Главное, что клиент заметил рост конверсии на новом сайте.
Подписывайтесь на Телеграм, следите за нашими проектами, активностями и внутрянкой агентства.