Редизайн своими силами

Как Яндекс.Директ обновил продукт и сделал ребрендинг впервые за 20 лет. Илья Наринский, арт-директор рекламных продуктов Яндекса, рассказал о ребрендинге Яндекс.Директа: почему команда сервиса решилась на обновления, что изменилось и как создавали новый дизайн.

Зачем нам ребрендинг

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

Постепенно среди наших пользователей стало больше представителей малого и среднего бизнеса, которые заводят рекламу самостоятельно. Иными словами, в b2b-продукте проявились b2c-клиенты, которые спотыкаются об непонятные интерфейсы, уходят или совершают ошибки при заведении рекламы.

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

Изменения в продукте

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

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

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

Если вы дадите дизайнеру больше власти, то у него повысится и ответственность, что приведет к повышению качества проработки макетов. Полномочия заставляют дизайнера быть более вовлеченным, следить за метриками продукта и бизнеса в целом. Из «рисовальщика» он становится продакт-оунером.

Мы разделили работу менеджеров и дизайнеров:

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

2. Дизайнер исследует проблему, ищет и предлагает варианты решения. Вместе с менеджером прорабатывает решения и тестирует гипотезы. Он тесно общается с разработкой: консультируется по поводу решений.

3. Менеджер доводит решение до продакшена, отвечает за запуск.

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

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

Я советую избегать «коллективного дизайна».

Коллективный дизайн — это ситуация, когда разные люди в команде смотрят на черновики (или итерации) и дают советы.

Дизайнер (да и любой исполнитель) должен на 100% понимать, почему принято то или иное дизайн-решение. Не менять макет просто потому что кто-то попросил. Нужно разобраться, что даст это изменение, а не делать так просто потому что кому-то показалось, что так будет лучше.

В Директе дизайнер — единственный, кто несет ответственность за все дизайн-решения. Поэтому он не может просто принять чей-то совет, досконально не разобравшись в его пользе.

Изменения в айдентике

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

Вместе с фирменным стилем решили обновить и логотип. Хотя смена логотипа — это больше идейная, чем практическая история. Но наш старый логотип изображал бумажное объявление. Нам был нужен новый знак: современный, технологичный и имеющий в метафоре что-то связанное с рекламой. Первые подходы были с разными студиями и агентствами. Ребята приносили хорошие варианты, но они были либо слишком технологичными, либо слишком абстрактными, либо плохо сочетались с большим брендом Яндекса. Все варианты могли бы быть логотипами чего угодно — любого современного продукта.

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

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

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

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

В какой-то момент мы поняли, что логотипом должна стать стрелка. У нее правильные метафоры: это курсор, стрелка с кнопки «перейти», ну и позитивное движение графика. Этот знак отражает базовые задачи сервиса и сопоставим с его названием, он символизирует простоту, рост и развитие. К тому же, стрелка проста, а чем проще знак, тем он сильнее. Единственное, что простые знаки могут использовать только популярные продукты. Если вы небольшая компания, у вас может не получится «застолбить простой знак за собой».

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

Что получилось в итоге

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

0
45 комментариев
Написать комментарий...
Sergey Korol

Красивый дизайн от красивого дизайнера!

(этот комментарий заряжен на доброту, а не как обычно тут бывает).

Ответить
Развернуть ветку
Семен Переделкин

Доброта угробит дизайн. Говори правду, а не подхалимничай, будь мужиком, блеать!

Ответить
Развернуть ветку
Слава Коженевский

Правда такая что всем похуй на лого директа, пусть там хоть эмодзи какашки будет. Это рабочий инструмент, им все равно будут пользоваться.

А ребята сделали красивый лого, намного лучше чем был раньше. Хотя могли бы и не делать или сделать легкий редизайн . Ребята большие молодцы 👏👏👏

Ответить
Развернуть ветку
Семен Переделкин

Ты прав в одном - что всем похуй на лого директа. Но не прав в том, что этот лого красивый, лучше, чем старый.

Ответить
Развернуть ветку
Слава Коженевский

Серьезно? Отрывные объявления в 21 веке, с хуевой геометрией и неправильной сеткой, лучше, чем лаконичная стрелочка, с хорошей метафорой роста.
Старый лого выглядел также кринжово, как любят региональные магазины сантехники захуячить картинку с унитазом вместо нормального знака.

Ответить
Развернуть ветку
Семен Переделкин

Вот эта жирная стрелка, которая даже не влезла полностью в иконку, и которая вообще хуй знает каким боком к теме объявлений (её с таким же успехом можно подогнать по смыслу к чему угодно - от каких-нить компьютерных игр, текстовых редакторов до порносайтов), лучше понятной каждому пиктограммы, которая однозначно символизирует тему доски объявлений?

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

Ответить
Развернуть ветку
Александр

Очень толсто, попробуйте тоньше

Ответить
Развернуть ветку
Александр

Не гуглите "реклама унитазов", не повторяйте моих ошибок

Ответить
Развернуть ветку
Ilya Narinsky
Ответить
Развернуть ветку
Vyacheslav Teplyakov

Во первых не первый раз за 20 лет. Еще не обсохли слёзы таргетологов после смены "синего" интерфейса на "новый". =)
Ну стало посимпатичнее, на компе.
Мобильное приложение как было почти бесполезное так и осталось.
Страницы кампаний на компе как открывались невероятно долго, так и открываются. Блок стратегий на этих станицах как грузился невероятно долго и не всегда с первого раза, так и грузится. По авто стратегиям на стадии обучения, как не было на виду важной информации, так и нет. Компактный вид списка кампаний как не был по настоящему компактным так и остался.
Отчеты как сохранялись не понятно куда, так и сохраняются. Кто вообще мне объяснит в какую Вальхаллу попадает отчет после того как его сохранили и дали ему имя? Как его по этому имени и откуда теперь можно вызывать? В мастере отчетов его нет. =)
Мордашку подтянули, а внутри все по старому, не то чтобы оно плохо и прям вот жить невозможно, но просто не понятно зачем тогда все затевалось. Логотипчик перекрасили, ну ок развлекайтесь. Только не "улучшайте" коммандер.

Ответить
Развернуть ветку
Слава Коженевский

У меня в новом интерфейсе вообще не отображаются количество конверсий на уровне компаний. Уже месяца 2 как, я думал пофиксят, но пока нет.

Ответить
Развернуть ветку
Дмитрий Тенетович

2 месяца? Ха! В вебмастере внешние ссылки с января сломаны ).

Ответить
Развернуть ветку
Слава Коженевский

Они заняты были, рисовали лого ) ща пофиксят

Ответить
Развернуть ветку
Дмитрий Тенетович

Так это другая команда, полагаю. Возможно, у них корпоративное соревнование такое )

Ответить
Развернуть ветку
Яндекс Реклама
Автор

Станислав, здравствуйте! Конверсии по кампании вы можете увидеть в Мастере отчётов, либо настроив вид списка колонок. Для этого, на главной странице, нужно нажать на шестерёнку в правом верхнем углу и выбрать интересующие, включая поля конверсии и % конверсий. Если что-то не получится, напишите нам в личные сообщения номер кампании — поможем разобраться :)

Ответить
Развернуть ветку
Слава Коженевский

Так в этом и дело, что они на уровне компаний не отображаются, если "провалиться" внутрь компании (скриншот 2) то они отображаются корректно.
И это не только на этом аккаунте, а на всех. Это, конечно, вообще не проблема, так как всё равно мы смотрим статистику через мастер отчетов и метрику. Просто не очень удобно.

Кстати вот у второй компании у которой 1 конверсия, там тоже не одна конверсия их несколько. Там явно какой-то косяк.

Ответить
Развернуть ветку
Яндекс Реклама
Автор

Проверьте, не включен ли у вас показ конверсий в таблице только по целям из стратегии кампании. Сделать это можно, кликнув по кнопке «Конверсии» над таблицей (показываем на скриншоте).

Чтобы отображались все конверсии, эту галочку нужно убрать.
Если она не стоит, пожалуйста, напишите нам в личные сообщения ваш логин в Директе. Проверим, почему видны не все конверсии.

Ответить
Развернуть ветку
Vyacheslav Teplyakov

А вот эту финтифлюшку с конверсиями вы когда ввели, вообще очень большому количеству людей мозги раком поставили 😁

Ответить
Развернуть ветку
Слава Коженевский

О, прикол, да, теперь всё корректно показывается.
Я просто не знал, про то что нужно включать отдельные конверсии.

Ответить
Развернуть ветку
Яндекс Реклама
Автор

Отлично! Рады, что помогли разобраться.
Если будут ещё вопросы — пишите :)

Ответить
Развернуть ветку
Konstantin K.

Почему у вас «Я» в на аватаре старая?

Ответить
Развернуть ветку
Яндекс Реклама
Автор

Уже новая :)

Ответить
Развернуть ветку
Konstantin K.

Оперативно вы сработали... :)

Ответить
Развернуть ветку
ivan krapivin

Вячеслав, здравствуйте. Обсушить слезы вы можете феном Dyson, %реферальная ссылка на маркет%

Ответить
Развернуть ветку
Яндекс Реклама
Автор

Вячеслав, здравствуйте! Сохранённые отчеты вы можете увидеть в выпадающем списке, как на скриншоте.
Рассказываем об этом здесь https://clck.ru/YtHuS

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Влад Цыплухин

Стало лучше

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Anna Kryukova

очень уж стойкая ассоциация от последней картинки с икеей и их лабиринтами)
в остальном годно!

Ответить
Развернуть ветку
Виктор Гусев

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

Ответить
Развернуть ветку
Vladimir Mirolubow
Ответить
Развернуть ветку
Natalja

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

Ответить
Развернуть ветку
Ilya Narinsky

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

Ответить
Развернуть ветку
Natalja

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

Ответить
Развернуть ветку
Ilya Narinsky

Я обычно прихожу ко всем (прости господи) стейкхолдерам и рассказываю, что мол у нас тут дизайн и нам нужно будет принимать решения. Спрашиваю прямо у человека, как он обычно оценивает дизайн, на какие факторы смотрит.

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

Ответить
Развернуть ветку
Natalja

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

Ответить
Развернуть ветку
Ilya Narinsky

Спасибо) Напишу. Сейчас есть кусками у меня в канале https://t.me/narinsky

Ответить
Развернуть ветку
Алексей Морозов

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

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

3й сезон 9я серия silicon valley

Ответить
Развернуть ветку
Товарищ

Может быть логотип больше подошел бы для сервиса Яндекс Объявления.

Ответить
Развернуть ветку
Елена Щербакова

Кстати, да. Сразу проассоциировала с Яндексом!

Ответить
Развернуть ветку
Татьяна Жильцова

Клевый дизайн! Вы AB тестами проверяли его крутость?

Ответить
Развернуть ветку
Alina Kvitkova

Отличный дизайн!

Ответить
Развернуть ветку
42 комментария
Раскрывать всегда