Как мы создали токсик-тест и сравнили людей с персонажами из “Офиса”

Идея и концепты
Мы хотели сделать что-то веселое и познавательное на тему коммуникации на рабочем месте. Это актуальная проблема для многих, не чуждая и нам. И вот мы подумали: почему бы не создать токсик-тест на основе культового сериала «Офис»? Все любят его американскую адаптацию, и он идеально подходит для изучения темы токсичной коммуникации на рабочем месте. Мы собрали брейншторм и создали три концепции.
Мы хотели сделать что-то веселое и познавательное на тему коммуникации, которая способна ухудшить рабочий процесс. Это актуальная проблема для многих, не чуждая и нам. И вот мы подумали: почему бы не создать токсик-тест, который помог бы узнать, насколько хорошо люди чувствуют разницу между здоровым и токсичным общением на работе? Чтобы тест был составлен грамотно и давал достоверный результат, который действительно может быть полезен, мы пригласили психологическую платформу Alter стать партнером проекта.
В обсуждении с коллегами из Alter родилась идея иллюстрировать тест по мотивам культового сериала «Офис». Все любят его американскую адаптацию, и он идеально подходит для изучения темы токсичной коммуникации на рабочем месте.
Мы собрали брейншторм и создали три дизайн-концепции. Мы решили оформить тест гифками из эпизодов сериала. Но хотели придать ему легкость и позитивное настроение, поэтому добавили иллюстрации в минималистичном стиле. По завершении теста пользователь видит текстовое описание своего результата и картинку к нему — собирательный образ человека, которому свойственно такое поведение. Этот вариант предоставлял вам возможность узнать, на какого персонажа из «Офиса» вы больше всего похожи в собственном офисе по манере общения. Мы добавили описание характера персонажа, а также процентное соотношение к другим героям. Но этот концепт изменился после обсуждений. Для этого варианта мы нарисовали иллюстрации с персонажами «Офиса», а гифки с кадрами из сериала использовали как сопровождение к вопросам. Пройдя тест, вы получаете свою характеристику с указанием героев ситкома, которые отличаются подобными чертами и поведением. Но и этот концепт претерпел изменения. После обсуждения с партнерами из Alter мы решили оставить только гифки из «Офиса» и убрать лица персонажей с иллюстраций, чтобы избежать проблем с авторскими правами. Это несколько упростило визуальное оформление, но позволило сохранить нужные ассоциации. Мы приступили к разработке теста: текст прислали коллеги из Alter, гифки мы подбирали с особым вниманием к деталям и создавали стильные иллюстрации в Procreate и Illustrator. Весь дизайн проекта собирали в Figma. Поставили плашки на лица персонажей, чтобы сделать дизайн более информативным. В цветах главный дизайнер проекта Мария опиралась на офисный дресс-код, поэтому на стадии концептов мы выбрали приглушенные оттенки серого. Но тест планировали разместить на веб сайте Alter, поэтому дизайнеры решили использовать и их корпоративные цвета. Чтобы раскрыть тему токсичности, негатива, был выбран темный цвет фона, а акцентный цвет — по брендбуку Alter. Верстку разработчики Spans Agency сделали сами, с помощью кода и без различных сервисов, чтобы обеспечить максимальную свободу и адаптивность под сайт Alter. Механика теста несложная: к каждому из 10 вопросов пользователь выбирает один вариант ответа, за который можно получить от 1 до 3 баллов. По сумме баллов определяется результат: насколько хорошо вы распознаете и останавливаете токсичную коммуникацию на работе — от нахождения в «зоне поражения» до «стража личных границ». Все участники получают подарок от Alter — бесплатный курс по софт-скиллам, который поможет сделать общение с коллегами более приятным и конструктивным. Проект прошел гладко и без токсика :) Проджект-менеджер Лена отметила, что это был один из самых легких проектов в истории агентства. Мы сделали полезный и важный проект, во многом благодаря поддержке специалистов из Alter. Команда Spans Agency, особенно наша COO Эля — автор идеи, очень рады, что смогли воплотить этот проект в жизнь. Мы показали, что создавать интересный и полезный инструмент в коллаборации с настоящими профессионалами — это легко и интересно. А такой подход к донесению информации позволяет совмещать обучение и развлечение, помогая развивать здоровую корпоративную культуру. Пройдите тест и узнайте, кто вы из «Офиса»!

Первый концепт: Минималистичные иллюстрации
Второй концепт: Силуэты героев
Третий концепт: Иллюстрации сюжета

Правки и окончательное решение
Разработка и дизайн

Процесс верстки и технические решения

Завершение проекта
