Как рассказ об офисе компании может мотивировать сотрудников? Три подходящих референса

У нас в «Инфографике» есть этап пресейла: клиент приходит с задачей, а мы подбираем несколько референсов и через них показываем, что тут можно сделать. Задачи повторяются, поэтому мы решили делиться своими референсами — думаем, многим они помогут нащупать идею и понять, в какую сторону двигаться. Дальше — три референса для реальной HR-задачи.

Начнем с HR-задачи одного из наших клиентов, дословно она звучала так:

У задачи две аудитории, поэтому цели у проекта тоже две:

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

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

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

Первый референс — рассказ «Нью-Йорк Таймс» об Empire State Building:

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

Этот референс нам понравился простым взаимодействием с информацией: пользователь сначала видит здание в городе, потом по скроллу, шаг за шагом изучает его устройство, например отдельные этажи. А в тексте слева читает истории и факты.

Устройство этажа в разрезе: пользователь видит, что есть на этаже, — так же можно показать этаж офиса с переговорками, кухней и комнатой отдыха:

Текст слева разбавляется фотографиями — они привносят ощущение реальности: пользователь видит не только нарисованное здание, но и настоящие снимки. В проекте с офисом можно так же добавить фотографии или видео с сотрудниками и их истории:

Здесь показано устройство подвала, а в проекте об офисе так можно показать отдельную комнату, например корпоративный фитнес-клуб, столовую или конференц-зал:

Этот референс подходит под нашу задачу по трем причинам:

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

Офис здесь — главный действующий герой, и мы шаг за шагом рассказываем, как он устроен и что в нем классного.

Второй референс — рассказ BBC об одном дне из жизни Лейлы после локдауна. Часть дня Лейла проводит в офисе, поэтому нам интересна эта история.

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

Этот референс хорош тем, что повествование строится от лица «реального» человека — Лейлы. Благодаря ей проект воспринимается читателями с большей эмпатией. Но можно улучшить идею под нашу задачу — добавить в начале истории выбор персонажа по полу или профессии, чтобы пользователь мог создать своего героя-аватара.

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

В этом референсе повествование строится уже по другому принципу: слева находится изометрическая модель офиса, а справа — увеличенная картинка, на которой видно, как Лейла взаимодействует с отдельными элементами:

При этом повествование складывается в историю. Например, вот Лейла зашла в офис и измерила температуру:

Вот она заходит в лифт и поднимается на свой этаж:

И так далее. История начинается с подъема Лейлы и заканчивается отправкой ко сну.

Еще в этом рефе используется микроанимация для визуализации некоторых элементов, например работы системы вентиляции:

Этот референс мы выбрали, потому что здесь:

• есть персонаж, с которым пользователь мог бы себя идентифицировать;

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

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

Третий референс — проект «Дом, в котором я живу» — рассказывает об устройстве двора, дома и подъезда. Для решения нашей HR-задачи дом меняем на офис.

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

Легко представить, что вместо подъезда у нас будет устройство офиса с пояснениями, почему компания организовала всё именно так и как это влияет на рабочие процессы:

А вместо рассказа о лифте и тарифах ЖКУ здесь могут быть преимущества одного из этажей офиса, например переговорок, копировальных центров, кухни или комнаты отдыха:

В конце есть карта — так можно показать, где именно находится офис, чтобы кандидат мог понять, удобно ли ему будет добираться:

Этот референс решает нашу задачу, потому что:

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

По логике «Дом, в котором я живу» похож на первый референс, но в реализации он обходится дешевле, потому что здесь используется не 3D-анимация, а быстрая смена статичных картинок:

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

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

А в этом примере пользователь может сам выбирать планировку квартиры. Такую механику можно использовать в нашем проекте, чтобы читатель выбирал свой этаж или конкретный кабинет:

А здесь, чтобы получить кусочек дополнительной информации, пользователю нужно навести мышку на объект:

Такие простые дополнительные механики не дают пользователю заскучать и отвлечься, поэтому их стоит включать в проект. К примеру, в проекте по третьему референсу можно не выносить информацию об элементах вправо, а добавить точки с подсказками прямо на объекты или дать пользователю возможность включить кофеварку или полить цветок:

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

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

Но какой бы референс вы ни взяли за основу, стоит продумать две вещи:

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

Читайте другие наши статьи

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

Как мы сократили этап пресейла с 3 дней до 1 часа с помощью референсов

Как управлять вниманием читателя с помощью скролла

Пять практических приемов, как улучшить читаемость документов