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

Упрощение понимания большого количества данных

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

AdWords

Этот подход требовал слишком многого от рекламодателей. И, в результате многие рекламодатели испытывали трудности с рекламно-баннерной сетью. Проект Display summary должен был решить эту проблему путем создания сводной страницы, содержащей визуальное отображение самых ключевых данных. Меня назначили разрабатывать UX для него.

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

сбор отзывов пользователей
Подготовительные исследования для отображения сводного экрана. Мы использовали такой концепт для сбора отзывов пользователей.
Так как UI, основанный на карточках, был предложен впервые в AdWords, мне было необходимо создать фреймворк для AdWords таким образом, чтобы определенные элементы закладывали основу для внедрения этого элемента.
AdWords
Разнообразные карточки на вкладке после некоторых изменений
Для развития этого проекта потребовалось много этапов пользовательских тестов и правок. На протяжении этого времени, я поработал над визуализацией данных с командой инженеров. Я им объяснял, какие инструменты необходимо внедрять. Например, возможность показа круговой диаграммы. В результате получилась простая, четкая и визуально понятная сводная страница, которая показывала самые важные аспекты и предоставляла возможность копнуть глубже в случае необходимости. Также, это решение в дальнейшем вдохновило на переход AdWords на Material design.

AdWords на Material design

AdWords на Material design
Запуск сводного окна, отдых для глаз после предыдущего табличного интерфейса

Упрощенное создание кампаний

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

AdWords

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

Перед нами стояли две основные задачи:

  1. определить общий набор целей, необходимых рекламодателю;
  2. создать максимально удобный UX для выбора целей

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

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

Различные исследования маркетинговых запросов

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

Также нас преследовали технический сложности. Например, имея 4 категории целей, у рекламодателей была возможность выбора только в одной. Более того, внутри категорий были взаимоисключающие варианты выбора. Для решения первой проблемы, я сделал переходы и анимировал элементы для возможности сброса выбора, в случае, если пользователь пытался выбрать несколько значений. Для решения второй, я прибегнул к необычному методу с использованием разделительных полос и надписью «или» чтобы показать, что эти параметры могут быть выбраны вместе. Использование радио-кнопок усложнило бы восприятие. Оба этих подхода пользователи оценили по достоинству.

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

Вклад в особенности material design

Создание кампании — это поэтапный процесс. В то время, как создавался новый дизайн процесса создания кампаний, я выделил небольшую группу дизайнеров и разработчиков прототипов, которые создали спецификацию для Material Design stepper компонента, позже вошедшего в библиотеку material design

f4192a40172681.5774a65c9012c
Особенности Stepper компонента, часть библиотеки material design

Создание более красивой (и более эффективной) рекламы

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

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

4 новых шаблона для AdWords
Я создал эти 4 новых шаблона для AdWords
В добавок к этим концептам, команда, работающая над форматами рекламы, продолжала работу над проектом по автоматической конвертации текстовой рекламы в полноценные баннера. Это делалось при помощи логотипа рекламодателя, отбора подходящих изображений из других его объявлений, и затем объединением этого с сообщением из текстовой рекламы.
Конвертация текста в баннер
Конвертация текста в баннер
Не раскрывая подробностей, просто отмечу, что сбор этих логотипов и изображений, является искусством разработки, а объединение их программно в прекрасный креатив, было очень сложной задачей.

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

c20f5b40172681.5774a65c916cc

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

Помощь рекламодателям в понимании своей целевой аудитории

Также, одним из моих проектов, был AdWords Audience Insight. Для запуска успешной кампании, рекламодатель должен не просто знать, кто является его целевой аудиторией, но и понимать, кто будет воспринимать посыл рекламы. AdWords Audience Insight ответит на эти вопросы.

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

Заключение

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