Привет, меня зовут Максим Аксёнов, я дизайнер интерфейсов в Авито. Осенью 2020 года я начал работу над проектом Брендспейса. Это конструктор лендингов на платформе Авито, который помогает производителям продвигать товары. 

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

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

Какие задачи решает Брендспейс

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

Бизнесу Брендспейс помогает сэкономить на разработке и поддержке отдельного лендинга для рекламы товаров. Компании сами собирают страницу из готовых блоков, оформляют и наполняют контентом. Авито даёт инструмент-конструктор для этого, консультирует по дизайну и помогает редактировать тексты.

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

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

Конструктор работает на десктопе, мобильных устройствах и в приложении. Если пользователь смотрит товары на Авито через приложение, то страницу бренда сможет открыть там же — ему не нужно будет переходить в мобильный браузер.

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

Я работал над проектом в три этапа: 

1. Создал первую версию дизайна.

2. Переделал его, чтобы адаптировать под Авито Недвижимость.

3. Стал продакт-оунером Брендспейса и редизайнил его целиком.

Первый этап: разработка дизайна с нуля

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

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

К концу второй недели подготовил первый вариант дизайна. В него вошли 9 модулей:

• главный баннер;

• категории товаров;

• блок изображений;

• блок с видео;

• модуль для акций с изображением и текстом;

• сравнение товаров;

• товарные описания;

• новостной или статейный блок;

• простой блок с текстом.

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

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

Брендспейс получился визуально непохожим на Авито. Например, я изменил размер шрифта и принципы отступов. Экспериментировать стало возможно потому, что на тот момент дизайн Авито устарел.

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

Второй этап: слияние Брендспейса и Авито Недвижимости

К началу 2021 года появилась новая задача: в проект Брендспейса нужно было добавить страницы компаний, которые публикуют объявления на Авито Недвижимости. Модули из первого варианта дизайна не подходили для страниц застройщиков и жилых комплексов, потому что в них нельзя было разместить, например, блок с расчётом ипотеки. На работу снова было только две недели.

Сложностей на этот раз было три:

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

2. Дизайн Авито Недвижимости команда разработчиков делала с нуля, а не на конструкторе. Некоторые их решения не получалось перенести на Брендспейс. Например, нужно было сделать так, чтобы размер модулей автоматически подстраивался под размер экрана. Готовые модули от Авито Недвижимости при этом отображались неправильно, поэтому их нужно было создать заново. 

3. Первый вариант Брендспейса я делал только для веб- и мобильной версии сайта. Новый дизайн нужно было адаптировать для приложения Авито так, чтобы у пользователя не было ощущения, что на сайте и в приложении он видит совсем разные страницы. 

Слияние с Авито Недвижимостью сделало Брендспейс визуально похожим на другие проекты Авито. Получилось улучшить решения из первого варианта дизайна.

Модуль сравнения товаров изменился целиком.

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

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

Третий этап: полный редизайн

С начала 2021 года над проектом Брендспейса работали поочерёдно два разных дизайнера. В какой-то момент стало понятно, что слияние Недвижимости и конструктора лендингов прошло не так хорошо, как хотелось бы.

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

Следующий год я консультировал разработчиков, проводил ревью. Например, отвечал на вопросы о том, как должны располагаться модули и элементы, проверял, чтобы дизайн отображался верно. Работать нужно было одновременно с двумя командами разработки — мобильной и веб-версии Брендспейса. Мы пытались оперативно исправить все проблемы, поэтому на развитие продукта не хватало времени.

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

Мы решили полностью редизайнить Брендспейс и визуально приблизить страницы к основному продукту Авито. За основу взяли все кейсы бизнес-клиентов, которые были на тот момент, продумали возможные проблемы с контентом и пути развития проекта. 

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

Модули ипотеки и слайдер сториз тоже обновил:

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

К проблемам и решению о новой доработке привели несколько ошибок на первых двух этапах:

• мне пришлось работать быстро, не хватало времени на то, чтобы найти лучшее решение;

• не было чёткого понимания, какой результат должен получиться;

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

Что я понял, пока работал над Брендспейсом

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

За время работы над проектом Брендспейса я сделал такие выводы:

• Если из-за спешки пытаться адаптировать старые модули, а не делать новые, получается ерунда.

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

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

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

• Документация нужна и для разработчиков, и для бизнес-клиентов. Без неё получается плохо и не так, как ожидалось.

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

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

Брендспейс интересен бизнес-клиентам, есть хорошие примеры страниц. Понимание этого помогло мне довести важные этапы до конца.