Новогодний спецпроект для WWF России. Адвент-календарь от белого медведя

У нас в Магвай появилась такая традиция: в преддверии Нового года создавать что-то интересное вне рамок нашей стандартной проектной работы. В прошлом году это была цифровая стена Digital Wall 2020, в этом — спецпроект в поддержку белых медведей, созданный для Всемирного фонда дикой природы (WWF). Рассказываем подробности и делимся победой.

Знакомимся с заказчиком

Всемирный фонд дикой природы — одна из крупнейших независимых международных природоохранных организаций, объединяющая около пяти миллионов постоянных сторонников и работающая более чем в 100 странах. Миссия WWF — предотвращение нарастающей деградации естественной среды планеты и достижение гармонии человека и природы. Главная цель — сохранение биологического разнообразия Земли.

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

Формулируем проблематику и определяем цель проекта

Рассказывает Михаил Волков, руководитель digital-проектов WWF России.

«Ежегодно в декабре мы проводим акцию „Новогодняя благотворительность“, в рамках которой собираем средства на один из природоохранных проектов. В этом году мы сфокусировали внимание на проекте по предотвращению конфликтов между белым медведем и человеком.

Цель проекта „Арктика: Безопасный дом для каждого“ заключается в поддержке „Медвежьего патруля“ в посёлке Амдерма.

„Медвежий патруль“ — группы волонтёров, созданные при поддержке WWF России 15 лет назад. Патрульные отгоняют медведей от населённых пунктов, защищают их от браконьеров, собирают информацию о белых медведях.

На собранные средства для патруля в посёлке Амдерма купят необходимое оборудование и мотовездеходный транспорт, который помогает быстрее реагировать на вызовы, и при этом не повреждать хрупкий растительный покров тундры.

Для посадочной страницы мы выбрали формат адвент-календаря, который помогает природе. Такой онлайн-календарь привлекателен по нескольким причинам:

1. Вовлечение аудитории партнёров. Нам важно обратиться не только к своим сторонникам, но и к аудиториям СМИ, медиасервисов, бизнеса. Формат адвент-календаря предполагает возможность эксклюзивной коллаборации с каждым партнёром.

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

3. Ассоциация с Новым годом — временем, когда люди, как правило, чаще готовы заниматься благотворительностью».

Прорабатываем идеи и механику

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

Заказчик пришёл с уже готовыми идеями контента. В результате обсуждения мы разбили его на несколько типов:

• Информационные карточки. Интересные факты о белом медведе, изменении климата, истории из жизни «Медвежьего патруля».

• Подарки от WWF России и партнёров Фонда. Контент, направленный на поощрение пользователей — промокоды на скидку, zoom-фоны, электронные открытки.

• Эко-задания. Важные и несложные правила, которые может соблюдать каждый человек, чтобы внести свой вклад в сохранение планеты.

• Подкаст. В рамках проекта запущен подкаст «Как я встретил белого медведя». Это первый арктический подкаст, созданный WWF России.

• Интерактивы. Мультфильмы и видео, интерактивный квест и чатбот, поздравления знаменитостей.

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

Разрабатываем дизайн-концепции

В разработке дизайн-концепций участвовала без преувеличения вся студия! Каждый сотрудник проникся темой проекта и предложил своё ви́дение будущего сайта.

Было много классных идей, которые было бы здорово реализовать. Например, классический календарь с нестандартной типографикой и интересными анимациями:

Или сказочные 3D-домики с открывающимися дверцами:

Или карта с пометками полярников и разбросанными крафтовыми коробочками-подарками:

Или волшебное северное сияние и путешествующий по карточкам адвент-календаря белый медведь:

Внутристудийный отбор прошли две концепции: про трёхмерные домики и северное сияние.

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

При этом пользователю сразу должно быть понятно, что этот продукт связан с Крайним Cевером, с его невероятной красотой, и, конечно, с белыми медведями, ради которых всё замышлялось.

Для презентации идей заказчику мы накидали концепты в виде прототипов — как должны выглядеть главный экран и контентная карточка.

Выбираем лучший концепт

Команда WWF России признала обе наши концепции интересными и удачными, но нужно было выбрать что-то одно. Выбор пал на последний вариант как на самый «арктический», пронизанный северной красотой. И — что тоже немаловажно — более простой в отрисовке.

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

Важный нюанс нашей задумки — горизонтальный скролл на сайте, который создаёт эффект движения медведя. Почему это важно? Мы, как «Медвежий патруль», идём по пути животного, открывая карточки, получая важную информацию, подарки. И на каждом шагу можем поддержать проект!

Развиваем основную идею

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

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

Механика

У нашего проекта есть два основных элемента, вокруг которых строится вся история. Это карточки (дни адвент-календаря) и главный герой — гуляющий по экрану белый медведь. И больше ничего лишнего! Как и у настоящего адвент-календаря, здесь закрыты карточки дней, которые ещё не наступили. Пользователь может открыть только доступные элементы, то есть те дни, которые уже прошли.

Смыслы

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

Конструктор

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

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

Приступаем к реализации

В процессе реализации этого волшебного проекта мы разными способами создавали вокруг себя сказочную атмосферу Арктики и предвкушения Нового года. Например, наш фронтенд-разработчик верстал сайт под песню из мультфильма «Умка».

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

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

И немного технических нюансов

В процессе вёрстки мы оптимизировали всё, что можно было оптимизировать. Основная функциональность проекта написана на чистом JavaScript без использования фреймворков или библиотек (например, без jQuery). В карточках используется много плагинов, также написанных на чистом JavaScript — видео и аудиоплееры, фотогалерея, слайдеры.

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

JavaScript-код написан на стандарте ES6 (ES2015), что позволяет использовать технологию Tree shaking в инструменте сборки Webpack, которая исключает неиспользуемый код из итогового JS-бандла.

Эффект «путешествия» мишки по предстоящим датам календаря оказался очень интересным в плане реализации. Каждый раз при прокрутке сайта берутся координаты каждой карточки, затем на основании этих координат выводится нужный кусочек видео (скроллим на одну карточку в сторону — расчёты производятся заново, а видео перерисовывается). Само собой, мы максимально оптимизировали и сам видеофайл.

Мы также сделали шаг в сторону single-page application без использования популярных для этого фреймворков. Хотя перед нами одностраничный сайт, при шаринге карточки в соцсетях мы передаём ссылку на конкретную карточку, а не на главную страницу сайта. И при переходе по ссылке мы сразу попадаем на нужную карточку, минуя главный экран.

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

• Проект работает на основе «1С-Битрикс: Управление сайтом».

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

• Для интеграции вёрстки и разработки компонентов использовали возможности нового ядра Битрикса D7.

• Чтобы добиться максимальной производительности, использовали функциональность Битрикса для работы с CSS и JS.

• Сайт протестировали и оптимизировали согласно рекомендациям Google Lighthouse.

Гордимся результатом!

Сегодня сайт запущен и функционирует, а в акции уже приняло участие множество крупных компаний и СМИ в роли информационных партнёров. Пользователи заходят на сайт и наслаждаются тёплой атмосферой, уделяя внимание важнейшей теме, участвуют в активностях и делятся информацией в соцсетях. Это ли не победа?!

• Партнёры кампании: BCG, ООО «Рош Диагностика Рус», Lessar, «Ант Япы», HSBC, Dunlop, P&G, Магвай.

• Информационные партнёры: «Вокруг света», The Challenger, The Village, TikTok, VK, MEGOGO Audio, Magwai, Storytel, URBANTIGER, Тинькофф.

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

Мы счастливы, что смогли поучаствовать в создании этого проекта. И если в этот раз мы вместе с WWF России спасём хотя бы одного заплутавшего мишку, значит, всё было не зря!

Хотите рассказать на Коссе о своих продуктах или услугах? Изучите наш прайс и напишите на sales@cossa.ru — поможем выбрать подходящий формат и выпустить сильный текст.