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

Рассказывает директор департамента дизайна Mail.

Mail провел редизайн сервисов и инструментов продуктивности. О ключевых изменениях: логотипе, палитре, нейминге сервисов и коммуникации, а также о самом процессе работы над обновлениями рассказывает Саша Ермоленко.

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

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

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

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

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

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

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

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

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

Дополнительный бонус салатового — он обеспечивает более высокую контрастность, чем оранжевый. А значит, поможет повысить читаемость и доступность для людей, которые испытывают проблемы со зрением. Цифровая доступность — это важный аспект, который мы учитываем при работе над дизайном и пользовательским опытом продуктов Mail.

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

Из менее очевидного для обычного человека, но заметного для дизайнера — обновилась типографическая база. Мы перешли на шрифт VK Sans в логотипе и всех интерфейсах.

Это решение было сугубо прагматичным. Сервисы Mail часто интегрируются с другими продуктами и технологиями VK. До этого мы уже сближали визуальный код Mail и VK на уровне дизайн-систем Paradigm и VKUI, а в рамках ребрендинга решили отказаться от поддержки двух шрифтов и перейти на общий VK Sans Display.

Чтобы логотип и типографика выглядели единообразно, мы внесли в них небольшие изменения. Доработали футурообразную литеру «a», а с помощью TypeType добавили в основной шрифт дополнительные альтернативные литеры для еще нескольких букв, создающих визуальную рифму с новой «a».

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

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

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

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

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

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

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

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

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

Большое спасибо всем командам дизайна и маркетинга, работавшим над этим проектом!

Саша подробнее расскажет о редизайне Mail на конференции VK Design Conf x VK JT. Регистрируйтесь и присоединяйтесь — офлайн или онлайн.