Как мы сделали эмоциональный дизайн для портала X5, где сидит 400 тысяч сотрудников

В процессе успели устроить маленький бунт за фиолетовый цвет в «зелёной» компании.

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

Привет, я Алексей Смоляк, и сегодня я расскажу, как мы создавали «Сферу» — наше главное внутреннее приложение, которое объединило сотни тысяч сотрудников из «Пятёрочки», «Перекрёстка», «Чижика», Х5 Tech, Х5 Import и других бизнес-единиц компании.

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

Что в статье:

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

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

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

Но одновременно с этим в компании старались отстраиваться от центральной темы еды, потому что X5 делает намного больше. Так появился новый, органичный и сильный вариант с разными семантическими оттенками – «Сфера». Это название используют в геометрии, астрономии, социально-экономическом контексте. А «Зефир» остался нашей внутренней легендой и напоминанием, что творческий поиск — это нормально.

Окей, с названием определились. Дальше — цвет. X5 — это компания с очень сильными брендами: зелёный «Перекрёсток», красная «Пятёрочка», жёлтый «Чижик». Выбери мы один из этих цветов — и приложение тут же стало бы «чужим» для сотрудников других сетей.

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

Непривычный оттенок выполнял сразу две функции:

Объединение. Фиолетовый ни с кем не спорил и символизировал, что «Сфера» — это общая территория для всех, а не приложение какой-то из бизнес-единиц группы, в которое заставили зайти всех остальных».

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

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

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

В основе дизайна главной страницы лежит принцип интуитивности. Мы проанализировали самые частые сценарии пользователей и вынесли их наверх в виде виджетов: «Задачи», «Отпуск», «Расчётный лист», «Заказ пропуска». Всё самое важное — в паре кликов.

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

Мы хотели, чтобы приложение было не просто набором кнопок, а персональным рабочим пространством.

ИИ-ассистенты, понимающие «живой» язык, – это будущее (или уже настоящее). Современные люди всё чаще используют чат-ботов вместо поиска: даже если ты не до конца уверен, как сформулировать запрос, ассистент тебя поймет и подскажет. Людям проще написать «сколько дней отпуска у меня осталось?», чем искать это в меню. Это настолько повсеместный инструмент в цифровых экосистемах, что без него приложение воспринималось бы как несовременное.

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

За его созданием мы обратились к дизайнеру, которая рисует популярные стикерпаки для Telegram (да-да, ту самую уточку). Они помогли нам создать Сферыча — милого, эмоционального и немного забавного.

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

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

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

Эмоциональность мы проявили и в логотипе. Здесь хочется сказать спасибо нашему дизайн-лиду Максиму, который набросал просто кучу вариантов, после чего мы остановились на текстовом. А также предложил сделать его динамичной толщины, чтобы легко вписывать в основной шрифт Х5 Sans.

Казалось бы, типографика очень простая. Даже те, кто не работает в компании, могли с ним сталкиваться: его примерило на себя пространство в Парке Горького, куда любому желающему можно было прийти поработать или поучаствовать в мероприятиях. Шрифт в лого немного наклонен — это динамика, но при этом палочка у «а» в конце прямая, она как бы все удерживает — это статика. Получается интересный баланс.

Создание «Сферы» — это история о том, как даже в огромной корпорации можно и нужно создавать продукты с человеческим лицом. Мы защитили огромное количество смелых идей, и это окупилось: недавно «Сфера» взяла бронзу на престижном фестивале дизайна «Среда». И ещё семь наград в разных номинациях в крупнейшей digital-премии в Европе Tagline Awards.

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

Потому что работа — это не только задачи и отчёты, но и эмоции, которые нас объединяют. И хороший дизайн помогает их создавать. Тут хочется поблагодарить всю команду «Сферы» и нашего шефа Рому Ефимова за то, что не занимается микроменеджментом и доверяет экспертизе. Что и позволяет делать такие классные штуки.