Продуктовый дизайн — Веб-дизайн — Моушн
«Проектная исповедь» Ростелекома
Задача: сделать дизайн самой дерзкой IT-конференции
«Проектная исповедь» — это ежегодная конференция Ростелекома, на которой IT-специалисты откровенно рассказывают о своих провалах и предлагают решения. В 2020-м она впервые проходила онлайн, и это был вызов.
Команда проекта
Активно участвовали на всех этапах проекта и не боялись смелых экспериментов
РОСТЕЛЕКОМ
Компания
ИГОРЬ
моушн-дизайнер
Оформлял графику и монтировал ролик, разработал набор сплит-экранов трансляций
ДАША
UI/UX дизайнер
Работала над лендингом и верстала веб-платформу «Проектной исповеди»
Доработала фирменный стиль конференции, подобрала ключевые образы нарратива
ДИНА
Графический дизайнер
Разрабатывала общую концепцию нарратива и проектировала путь пользователя
САША
Арт-лид
Следил за сроками и общался по организационным вопросам
НАИЛЬ
Проджект менеджер
Проблема
Как перенести конференцию в онлайн и не наступить на типичные грабли
Главная беда онлайн-мероприятий — теряется неформальная атмосфера. Все прячутся за чёрными экранами и слушают говорящие головы. Спикерам тяжело работать без обратной связи, а участники становятся пассивными.
Ростелеком
Нам хочется сделать конференцию, которая точно запомнится! Люди привыкли общаться вживую, и нам важно сохранить эту атмосферу: человечную, немного «гиковскую», неформальную. И мы готовы экспериментировать.
Саша
Ни слова больше, работаем!
Решение
Дизайн платформы, дерзкий нарратив и сквозная история, которая связывает всю конференцию
Конференция называется «Проектная исповедь» и проходит в пятницу 13. Мы использовали это, чтобы создать запоминающуюся метафору и превратить конференцию в историю.
Чтобы сохранить вовлечённость, протянули сюжет в дизайн трансляций, добавили в дизайн мелочи, которые «скрепили» историю.
Сквозная история
Придумали метафору и визуальные образы под тематику конференции. Так как тема острая, сохранили баланс религиозных мотивов и фантастики.
Нарратив в стиле Light Religious
Вместе с партнёрами-разработчиками из Center-Game спроектировали путь пользователя и задизайнили платформу.

UX и дизайн платформы
Шаг первый
Проектируем платформу по результатам UX-тестов
Наиль
Совместно с партнёрами из Center-Game мы разрабатываем платформу для онлайн-мероприятий — Цифровой двойник TWIN. У платформы несколько типовых решений с точки зрения набора модулей и логики пути пользователя, а набор экранов и дизайн всегда уникальный. Проще говоря, есть схематичный «скелет», на который натягивается дизайн.
Саша
Выясняем, какая логика работы с платформой будет интуитивно понятна пользователям. В «Проектной исповеди» 4 параллельные секции на разные темы: есть несколько способов вести пользователей на таких мероприятиях. Параллельно думаем над метафорой, но о ней — дальше.
Саша
Сначала пробуем проверенный вариант: после начала мероприятия пользователи расходятся по трекам, которые им интересны. Дальше платформа помогает сохранить внимание на выбранном треке, не потерять фокус и посетить только выступления по своей теме.
Ростелеком
Это нам не подходит. Мы хотим, чтобы люди могли свободно перемещаться по тематическим трекам и не ограничиваться только одним.
Саша
Без проблем! Можно сделать по-другому.
Саша
В новой логике конференция делится на последовательные «акты», которые открываются по времени. Внутри акта пользователи могут выбрать одну из 4 трансляций и если захотят — перемещаться между ними.
Ростелеком
Отлично, это то что нужно! Давайте сделаем так.
Саша
Дальше проверяем, будет ли пользователям понятно, как переходить между актами и выбирать трансляцию, сможем ли мы за руку провести их через всю конференцию и удержать внимание в течение трёх часов. По результатам тестов доводим до ума экраны и приступаем к дизайну.
Платформа сделана для людей и помогает им ориентироваться в конференции
Благодаря UX-тестам и тесному общению с заказчиком спроектировали интуитивно понятный пользовательский путь. Это самый важный этап продуктового дизайна.
Шаг второй
Придумываем метафору и нарратив «Проектной исповеди»
Наиль
Типичная онлайн-конференция — это набор трансляций, объединённых темой. Их можно смотреть в любом порядке, слушать вполуха или бросить на середине.

Для «Проектной исповеди» используем нарративный подход: превращаем конференцию в историю. Это помогает сохранить внимание.
Саша
«Ростелеком» хочет, чтобы конференция запомнилась, называет её «Проектной исповедью», проводит в пятницу 13 и даёт нам карт-бланш на метафору. Они хотят конкретный и дерзкий нарратив. Есть 4 тематических направления.

Начинаем собирать мудборды на темы исповеди, религии, апокалипсиса.
Саша
Предлагаем разные варианты стилистики: от религиозного киберпанка до апокалиптичного мира Diablo II. Вместе с заказчиком ищем впечатление, которое хотим оставить у зрителя конференции. Останавливаемся на Light Religious: приключения и немного юмора, как в сериале «Благие знамения», чтобы оттенить религию.

Параллельно ищем, с чем связать 4 темы конференции: команда, заказчик, продукт, сроки. Из тех же «Благих знамений» вспоминаем четырёх всадников Апокалипсиса: команда — Раздор, заказчик — Война, продукт — Голод, сроки — Смерть.
Ростелеком
Господи, это прекрасно! Хотим именно это!
Дина
В культуре много образов всадников: с конями и характерными символами — их легко узнать и сразу считать. Для «Проектной исповеди» хочется найти метафору, которая близка руководителям IT-команд, программистам, менеджерам IT-проектов, — и одновременно остаётся узнаваемой.

По сюжету каждое выступление — это покаяние в проектных грехах, которое прогоняет всадника и предотвращает апокалипсис. С чем обычно справляются айтишники? С ошибками, багами. Хм, а ещё bug — это жук. А что если?..
Ростелеком
Это очень круто, но нам кажется, что для участников метафора будет слишком сложной и только запутает. В итоге впечатление испортится. Может, вернёмся к обычным всадникам?
Дина
Согласна, ясность для пользователя важнее. Берём более традиционный вариант всадников, а метафору ошибок и багов сохраняем в оформлении с помощью глич-эффекта. В итоге это ляжет в основу всего оформления конференции.
У конференции появилась сильная метафора, которая запоминается и попадает в целевую аудиторию
Нашли сильный образ, который попадает в тему, программу и целевую аудиторию «Проектной исповеди». Сохранили баланс серьёзного и забавного, а ещё — запоминающегося и понятного. Следующий шаг — расшить эту историю по всей конференции, чтобы сложилось цельное повествование.
Шаг третий
Оформляем лендинг и трансляции, добавляем нарративные мелочи
Наиль
Сильный нарратив легко «сломать». Например, забыть подготовить аудиторию, не учесть людей, которые приходят позже, или вообще не использовать образы в контенте. Когда цельная картинка не складывается, аудитория не вовлекается, и есть риск её отпугнуть.
Даша
Чтобы этого не случилось, начинаем с подготовки людей во время регистрации. Нужно сделать лендинг в общей стилистике конференции: конец света, молнии, огонь, много глича, программные ошибки — чтобы с порога создать вау-эффект и заинтриговать…
Ростелеком
Подождите-подождите! Мы тут пообщались с маркетологами: они говорят, что для нас это слишком зловеще — наша аудитория к такому не привыкла, их нужно готовить постепенно. Можем сделать лендинг поспокойнее, а уже на портале отыграться по полной?
Даша
Справедливо. Когда дизайнерам дают полную творческую свободу, есть риск увлечься метафорой. Хорошо, что есть взгляд со стороны! Успокаиваем лендинг, делаем его более привычным. Апокалиптичные мотивы оставляем в образах всадников и одном смысловом блоке на странице.
До
После
Игорь
Продолжаем работать с погружением участников. Есть сценарий, в котором человек заходит на портал не с начала конференции. Если сразу отправить его изучать программу или смотреть выступление, он будет сконфужен нарративом и может уйти.

Чтобы этого избежать, делаем вводный ролик. Участник сначала увидит его, а уже после — программу и трансляции. Готовим раскадровку, дизайним графику, монтируем и встраиваем в платформу.
Игорь
Чтобы трансляции тоже дополняли историю, оформляем заставки и сплит-экраны под разные компоновки кадра. И тут понимаем, что не хватает образов для вводной части и заключения — всадники есть только у секций.
Саша
Делаем ещё один подход к культурным образам и находим тетраморфов. Если упрощать, это 4 существа, которые предвещают пришествие всадников: орёл, бык, лев и ангел. Каждый из них при появлении произносит одну фразу: «Иди и смотри». Кажется, это то что нужно!

Чтобы расширить вселенную конференции и помочь участникам разобраться в таком количестве образов, на портале оставляем подсказки с короткими справками.
Наиль
Наши партнёры из Center-Game разрабатывают интерактивы для «Проектной исповеди»: голосования, прогресс-бары внутри трансляции, реакции зрителей. Всё это тоже оформляем в стиле конференции и интегрируем в историю.

Отдельный кайф: что ведущий конференции включился в историю и развивал её. Обычно это узкое место, где нарратив может сломаться: интерфейс живёт своей жизнью, а выступающие — своей. В «Ростелекоме» этого не произошло, потому что коллеги работали с нами одной командой и «горели» историей.
ФИНАЛ
Самая смелая IT-конференция 2020-го
«Проектная исповедь» успешно прошла в онлайне: 88% участников считают, что она не уступает очному формату. Удалось сохранить вовлечённость аудитории: 30% зрителей прошли конференцию от начала до конца — это больше, чем на аналогичных мероприятиях. Нарративный подход и запоминающиеся образы помогли создать вау-эффект: 87% отозвались о нём крайне положительно.
Команда проекта
Активно участвовали на всех этапах проекта и не боялись смелых экспериментов
РОСТЕЛЕКОМ
Компания
ИГОРЬ
моушн-дизайнер
Оформлял графику и монтировал ролик, разработал набор сплит-экранов трансляций
ДАША
UI/UX дизайнер
Работала над лендингом и верстала веб-платформу «Проектной исповеди»
Доработала фирменный стиль конференции, подобрала ключевые образы нарратива
ДИНА
Графический дизайнер
Разрабатывала общую концепцию нарратива и проектировала путь пользователя
САША
Арт-лид
Следил за сроками и общался по организационным вопросам
НАИЛЬ
Проджект менеджер
Опишите свою задачу
Мы напишем или позвоним, чтобы узнать больше о вашей задаче и договориться об интервью. Если у вас остались вопросы — ответим подробно.