Презентация маркетинговых исследований

Исследование Google о том, какие поисковые запросы по устранению неполадок в доме популярны в разных странах. Например, «Как починить стиральную машинку?» или «Как вкрутить лампочку?».

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

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

Авторы: Google News Lab, Xaquín G.V.
Проект: How To Fix a Toilet

#pr

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

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

Основное в этих примерах — не собрать как можно больше лидов, а понятно и нативно объяснить читателю все возможности и плюшки продукта.

А если нужно продать продукт через эмоции, то подойдет интерактив. Например, можно вовлечь клиента через видео-историю, как «Poltrona Frau», смотрите со звуком.

Интерактивная игра-учебник по финансовой грамотности для американской инвестиционной компании Invesco. Механика игры основана на взаимодействии с персонажами, каждый из которых рассказывает одну тему. После обучающего видеоролика у пользователя есть возможность сохранить pdf-конспект урока. Можно не логиниться, а поиграть как гость.

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

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

Авторы: Invesco QQQ
Проект: How not to suck at money

Донести информацию до сотрудников

Интерактивный документ от The Economist. На странице содержится весь текст Парижского соглашения об изменении климата. Круто то, что сделана навигация по всем важным тезисам. По каждому из них есть поясняющая аннотация. Проект выглядит аккуратно и понятно. Есть удобная мобильная версия с сохранением функциональности.

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

Авторы: The Economist
Проект: What’s in the Paris agreement on climate change?

#hr

Проект про исчезновение тропических лесов. Ключевой приём: по скроллу на иллюстрации визуализирована средняя скорость исчезновения лесов — какое количество леса погибает в единицу времени. Такая анимация вызывает эмоции у читателя.

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

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

Авторы: Reuters Graphics
Проект: Vanishing tropical rainforests

Сайт о девяти ключевых событиях Второй мировой войны. Компактный проект, девять событий – девять коротких историй. Интересен картой мира в виде глобуса. По скроллу карта изменяет масштаб и прокручивается как глобус. Отражает масштабность и мировое значение события.

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

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

Авторы: National Geographic
Проект: See maps of nine key moments that defined WWII

ВИЧ остается проблемой в России, потому что о нем стесняются говорить. Но мы хотим изменить ситуацию.

В этом сторилендинге совместно с экспертами фонда «СПИД.ЦЕНТР» рассказываем о популярных заблуждениях и отвечаем на основные вопросы о ВИЧ.

Наша цель — чтобы как можно больше людей сделали тест и узнали свой ВИЧ-статус.

#pr_кейс

Крутой проект ко дню рождения Достоевского. Ребята из Embacy рассказали о том, как образы Достоевского используют в поп-культуре.

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

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

Авторы: Embacy
Проект: 21 Reflections of Dostoevsky in Pop Culture

Корпоративный портал компании

Новогодний рекламный проект галереи Лафайет. Пользователям нужно найти предмет на большой детализированной анимированной картинке, как в детской книге «Где Уолли?». У проекта классная стилистика, новогодняя музыка и оформление.

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

Автор: Galeries Lafayette
Проект: 1,2,3, Noël!

#hr

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

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

Карта Нью-Йорка с историческими и социологическими данными. Можно прочитать несколько интерактивных рассказов об истории города.

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

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

Авторы: Columbia University’s Department of History and the Center for Spatial Research at the Graduate School of Architecture Planning and Preservation
Проект: Mapping Historical New York

NASA хочет запустить ракету, чтобы сбить астероид 💁🏻‍♂️

Они сделали сторилендинг, где визуализировали все известные астероиды и сравнили их размеры на карте. Показывают размер астероида рядом с Белым домом — провокационно, но доходчиво.

В конце есть история про сам модуль, с помощью которого будут сбивать астероид.

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

Сайт с историей компании

Варшавский музей городского транспорта можно посетить виртуально.

Экспозиция музея — это таймлайн с историей развития городского транспорта. Понятная горизонтальная структура, разбитая на периоды. Факты, анимация, фотографии, видео, аудиоэффекты, 3D панорамы — удерживают внимание, задают контекст и проводят читателя через 100 лет истории транспорта в Варшаве.

У проекта есть недочёт. Когда читатель открывает 3D панораму автобуса, его перебрасывает в самый конец страницы. Но нет возможности вернуться, приходится скроллить всю страницу.

Классный референс таймлайна для проектов, где много материала. Можно брать для сайта истории компании. У нас есть несколько подобных проектов. Например, юбилейная страница МНПЗ и сайт к дню рождения КуйбышевАзот.

#hr

Онбординг сотрудников

30 — столько раз можно посмотреть «Игру в кальмара», вместо одного года поездок на работу.

Авторская колонка в The Washington Post как раз о том, сколько времени мы проводим в дороге до работы, и что можно сделать за это время.

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

Похожий приём есть в статье Т-Ж об инфляции и уровне жизни. Сначала вводим данные, а ниже смотрим, как изменилась наша покупательская способность за несколько лет.

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

#hr

«Процесс» — проект ТАСС про историю Международного Военного Трибунала в Нюрнберге глазами журналистов. Это таймлайн, разделенный на 6 актов. Читатель движется по дням и подробно изучает события.

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

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

Таймлайн можно смело брать за основу в исторических проектах.

Проект Social mobility in the digital age сделан консалтинговым агентством, которое прогнозирует мировое будущее. Проект о несправедливостях, связанных с социальными классами.

Эффектные анимации и иллюстрации. Например, 3D-анимация разлетающихся игральных карт, как метафора того, какие «карты» человеку выпадают в начале жизни, и как он их использует.

Интересный реф для социальных проектов. В проекте можно найти идеи метафор и визуализаций социальных проблем.

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

У авторов есть проект про капсулу Zero Impact — пример хорошего сторилендинга с визуальными эффектами и механиками не для того, чтобы кого-то удивить, а для того, чтобы подчеркнуть информацию и выявить преимущества продукта.
Посмотреть разбор этого референса можно в нашем инстаграме →

Проект «КБ Стрелка» рассказывает о реках Москвы, которые скрыты в подземных коллекторах. Сторилендинг о нарушении гидрологического цикла и его восстановлении. Авторы предлагают вернуть изначальную речную структуру Москвы.

В проекте крутая работа с картами и скроллом. Хорошо проработана визуальная составляющая.

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

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

Устройство производства или офиса компании

Проект от The Washington Post о том, как жили горожане в Нью-Йорке 19 века. Красивый 3D-тур по реально существующему многоквартирному дому. По скроллу эскиз дома превращается в фотографию, а затем становится объёмным.

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

Похожий интерактивный проект есть у The New York Times про Эмпайр-стейт-билдинг. На 3D-модели можно посмотреть, как выглядит подсвеченные офисы изнутри.

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

#hr
#ir

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

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