Привет, меня зовут Максим Аксёнов, я дизайнер интерфейсов в Авито. Осенью 2020 года я начал работу над проектом Брендспейса. Это конструктор лендингов на платформе Авито, который помогает производителям продвигать товары.
Нужно было создать универсальное решение, которое подходит для продажи чего угодно: от автомобилей до кормов для животных. В конце 2020 года в Авито запустили Брендспейс в продакшен.
В этой статье расскажу, зачем нужен был проект, как продвигалась работа над ним и что получилось в итоге.
![](https://habrastorage.org/getpro/habr/upload_files/772/52c/129/77252c129355e988a2854bb250cda1a8.png)
Какие задачи решает Брендспейс
Брендспейс — это лендинг с информацией о производителе или продавце. Он собирается из готовых модулей по типу конструктора. Бизнес-клиент Авито может показать на странице Брендспейса товарную линейку, запостить новости или полезную информацию, например пригласить покупателей на открытие нового шоурума.
Бизнесу Брендспейс помогает сэкономить на разработке и поддержке отдельного лендинга для рекламы товаров. Компании сами собирают страницу из готовых блоков, оформляют и наполняют контентом. Авито даёт инструмент-конструктор для этого, консультирует по дизайну и помогает редактировать тексты.
Если бренд уже размещает продукцию на Авито, информация о ней подтягивается в конструктор автоматически. На лендинг можно добавить новые товары, рекламные видеоролики, показать там промоакции или вакансии.
Для пользователей Брендспейс — это место, где можно узнать больше о компании, которая что-то продаёт на Авито. Потенциальному покупателю не надо уходить с платформы, чтобы побольше узнать о производителе.
Конструктор работает на десктопе, мобильных устройствах и в приложении. Если пользователь смотрит товары на Авито через приложение, то страницу бренда сможет открыть там же — ему не нужно будет переходить в мобильный браузер.
Для Авито Брендспейс стал рекламной площадкой, которая привлекла новых бизнес-клиентов. С его помощью мы планируем сформировать у пользователей привычку получать всю информацию о производителях и продавцах на Авито. Это повысит доверие к платформе: люди смогут принимать решение о покупке и при этом не станут переходить на другие сайты.
Я работал над проектом в три этапа:
Создал первую версию дизайна.
Переделал его, чтобы адаптировать под Авито Недвижимость.
Стал продакт-оунером Брендспейса и редизайнил его целиком.
Первый этап: разработка дизайна с нуля
Для меня как дизайнера Брендспейс появился внезапно. До этого проектом несколько месяцев занималась команда разработки. Ко мне обратились, когда сроки на подготовку дизайна уже горели. На то, чтобы сделать первый вариант, было всего две недели. За это время я создал десяток универсальных модулей, которые хорошо подходили под любой вид контента: фото, текст, видео.
Самым сложным было предусмотреть разные варианты наполнения для модулей. Чтобы понять, что бренды хотят показывать пользователям, я изучил лендинги конкурентов и страницы потенциальных бизнес-клиентов. Например, посмотрел рекламные страницы брендов на разных маркетплейсах, лендинги автодилеров.
К концу второй недели подготовил первый вариант дизайна. В него вошли 9 модулей:
главный баннер;
категории товаров;
блок изображений;
блок с видео;
модуль для акций с изображением и текстом;
сравнение товаров;
товарные описания;
новостной или статейный блок;
простой блок с текстом.
В части модулей оставили для клиентов возможность немного менять контент. Например, поменять местами текст и картинку, не прописывать заголовки и описания видеороликов. Это было нужно для того, чтобы представители бренда могли сами решать, как будет выглядеть их страница.
Чтобы никого не рекламировать, в примерах модулей в статье будут животные.
![Модуль с категориями «товаров». Конечно, называть так животных некорректно, но котята здесь только для примера Модуль с категориями «товаров». Конечно, называть так животных некорректно, но котята здесь только для примера](https://habrastorage.org/getpro/habr/upload_files/3d4/05c/f60/3d405cf60d083cbb926eda3554e6866c.png)
![А так в первой итерации выглядел модуль «Текст с картинкой» А так в первой итерации выглядел модуль «Текст с картинкой»](https://habrastorage.org/getpro/habr/upload_files/66c/1fc/43f/66c1fc43ff91b695676bd889bc39fd5f.png)
![Блок с видео Блок с видео](https://habrastorage.org/getpro/habr/upload_files/d50/910/537/d509105370f6524dfb0ae0aa651ba33a.png)
![Блок для сравнения «товаров». Пёсик здесь тоже только для примера Блок для сравнения «товаров». Пёсик здесь тоже только для примера](https://habrastorage.org/getpro/habr/upload_files/f68/f37/33d/f68f3733d24f563a43da291dcfa10b45.png)
Брендспейс получился визуально непохожим на Авито. Например, я изменил размер шрифта и принципы отступов. Экспериментировать стало возможно потому, что на тот момент дизайн Авито устарел.
Кроме дизайна для десктопа и мобильной версии сайта была готова спецификация и шаблоны компоновок лендингов. На этом этапе дизайн ушёл в разработку, а я вернулся к работе над другими проектами.
![Пример того, как выглядит спецификация: в ней указаны технические требования к изображениям и оптимальная длина текста Пример того, как выглядит спецификация: в ней указаны технические требования к изображениям и оптимальная длина текста](https://habrastorage.org/getpro/habr/upload_files/729/79d/052/72979d0524e2bf4e83c187511d97c496.png)
![Если вы читаете статью с компьютера, можно кликнуть на картинку, чтобы посмотреть поближе Если вы читаете статью с компьютера, можно кликнуть на картинку, чтобы посмотреть поближе](https://habrastorage.org/getpro/habr/upload_files/ef1/b29/34a/ef1b2934a428bf709c34f6c72e7243da.png)
Второй этап: слияние Брендспейса и Авито Недвижимости
К началу 2021 года появилась новая задача: в проект Брендспейса нужно было добавить страницы компаний, которые публикуют объявления на Авито Недвижимости. Модули из первого варианта дизайна не подходили для страниц застройщиков и жилых комплексов, потому что в них нельзя было разместить, например, блок с расчётом ипотеки. На работу снова было только две недели.
Сложностей на этот раз было три:
Времени хватало только на разработку пары новых модулей. Нужно было решить, какие элементы создавать заново, а какие просто переносить из старого решения.
Дизайн Авито Недвижимости команда разработчиков делала с нуля, а не на конструкторе. Некоторые их решения не получалось перенести на Брендспейс. Например, нужно было сделать так, чтобы размер модулей автоматически подстраивался под размер экрана. Готовые модули от Авито Недвижимости при этом отображались неправильно, поэтому их нужно было создать заново.
Первый вариант Брендспейса я делал только для веб- и мобильной версии сайта. Новый дизайн нужно было адаптировать для приложения Авито так, чтобы у пользователя не было ощущения, что на сайте и в приложении он видит совсем разные страницы.
Слияние с Авито Недвижимостью сделало Брендспейс визуально похожим на другие проекты Авито. Получилось улучшить решения из первого варианта дизайна.
![В модуле с категориями я убрал плашку: из-за неё контент смотрелся меньше. Модуль перестал быть адаптивным и скейлиться в зависимости от количества контента в нём, остались только колонки и скролл. Прошёлся по шрифтовым стилям, потому что клиенты писали много текста в заголовок В модуле с категориями я убрал плашку: из-за неё контент смотрелся меньше. Модуль перестал быть адаптивным и скейлиться в зависимости от количества контента в нём, остались только колонки и скролл. Прошёлся по шрифтовым стилям, потому что клиенты писали много текста в заголовок](https://habrastorage.org/getpro/habr/upload_files/e65/96d/14f/e6596d14fa11ac236b9d604bd486512c.png)
![У модуля «Текст с картинкой» я убрал фон, так как он утяжелял страницу. Раньше были проблемы в отображении контейнера в котором есть и фон, и изображение, и тексты с кнопкой У модуля «Текст с картинкой» я убрал фон, так как он утяжелял страницу. Раньше были проблемы в отображении контейнера в котором есть и фон, и изображение, и тексты с кнопкой](https://habrastorage.org/getpro/habr/upload_files/5f9/05f/b6e/5f905fb6ed26a92f27ec6905b7bbe9d3.png)
Модуль сравнения товаров изменился целиком.
![Контент сформировал в знакомые и понятные сниппеты, убрал скейл и посадил контент на статичные колонки с возможностью скролла. Я также причесал шрифтовые стили и визуально облегчил модуль Контент сформировал в знакомые и понятные сниппеты, убрал скейл и посадил контент на статичные колонки с возможностью скролла. Я также причесал шрифтовые стили и визуально облегчил модуль](https://habrastorage.org/getpro/habr/upload_files/776/867/cbe/776867cbecf6e05cb2bd91cc61b983e6.png)
![Добавилась возможность сравнить ипотечные предложения Добавилась возможность сравнить ипотечные предложения](https://habrastorage.org/getpro/habr/upload_files/fbb/8ac/bf3/fbb8acbf3d707d3c25cf087a85a61b90.png)
![И слайдер сториз И слайдер сториз](https://habrastorage.org/getpro/habr/upload_files/dbe/4b6/b06/dbe4b6b061c2b539b9e8b81895d01508.png)
Кроме самого дизайна, нужно было доработать спецификацию для разработчиков. В ней я описал все детали дизайна: отступы между элементами, шрифты, допустимые размеры изображений. Там же описал, как пользователь может взаимодействовать с модулем. Например, что будет, если человек наведёт курсор на картинку или кликнет по кнопке.
Для бизнес-клиентов я подготовил правила оформления контента. В них указал, например, какой может быть максимальная длина названия для видеоролика.
Третий этап: полный редизайн
С начала 2021 года над проектом Брендспейса работали поочерёдно два разных дизайнера. В какой-то момент стало понятно, что слияние Недвижимости и конструктора лендингов прошло не так хорошо, как хотелось бы.
Например, из-за аврального режима работы над проектом появились проблемы технического характера, артефакты дизайна. Например, модули разворачивались, скроллились так быстро, что невозможно было их прочитать. В этот момент я стал продакт-оунером Брендспейса со стороны дизайна.
Следующий год я консультировал разработчиков, проводил ревью. Например, отвечал на вопросы о том, как должны располагаться модули и элементы, проверял, чтобы дизайн отображался верно. Работать нужно было одновременно с двумя командами разработки — мобильной и веб-версии Брендспейса. Мы пытались оперативно исправить все проблемы, поэтому на развитие продукта не хватало времени.
В то же время я много общался с менеджерами, которые предлагали конструктор лендингов бизнес-клиентам. Часть брендов была недовольна страницами Брендспейса, которые у них получились. Многие из них не привлекали дизайнера со своей стороны, чтобы продумать расположение модулей на странице, подобрать подходящий контент. Или делали заголовки и описания слишком длинными. Из-за этого страницы получались некрасивыми.
Мы решили полностью редизайнить Брендспейс и визуально приблизить страницы к основному продукту Авито. За основу взяли все кейсы бизнес-клиентов, которые были на тот момент, продумали возможные проблемы с контентом и пути развития проекта.
Я взял на себя ответственность по доработке визуальной составляющей Брендспейса, потому что считал её важной и нужной для продукта. В итоге Брендспейс стал консистентным с остальным Авито. Информация на страницах брендов теперь лучше скомпонована, причёсаны кнопки относительно их первичности и вторичности, выровнены цвета и шрифтовые стили.
![Сниппеты в категориях стали консистентными сниппетам на основном Авито — повторяются шрифтовые стили. Также пришли ховер и табы из новых гайдлайнов Сниппеты в категориях стали консистентными сниппетам на основном Авито — повторяются шрифтовые стили. Также пришли ховер и табы из новых гайдлайнов](https://habrastorage.org/getpro/habr/upload_files/837/719/245/837719245ace306e1c75e44e8409af00.png)
![Причесал шрифтовые стили, выровнял отступы и добавил пару заголовочных шрифтов в гайдлайны Авито для Брендспейса. Кнопки в модулях обрели первичность и вторичность Причесал шрифтовые стили, выровнял отступы и добавил пару заголовочных шрифтов в гайдлайны Авито для Брендспейса. Кнопки в модулях обрели первичность и вторичность](https://habrastorage.org/getpro/habr/upload_files/06f/f26/2a9/06ff262a91a4c853a0000582007c1445.png)
![Галерея с видео стала динамичнее. Также стала соблюдаться колоночная статичность, сменилась иконка Галерея с видео стала динамичнее. Также стала соблюдаться колоночная статичность, сменилась иконка](https://habrastorage.org/getpro/habr/upload_files/8e9/b96/61d/8e9b9661d2e26258f98e2a062e8df207.png)
![В модуле сравнения причесал шрифтовые стили сниппетов и сделал саму таблицу более скомпонованной с ховером В модуле сравнения причесал шрифтовые стили сниппетов и сделал саму таблицу более скомпонованной с ховером](https://habrastorage.org/getpro/habr/upload_files/737/c78/006/737c780069286eb5e865054337a1447e.png)
Модули ипотеки и слайдер сториз тоже обновил:
![](https://habrastorage.org/getpro/habr/upload_files/1ef/a24/e2a/1efa24e2a5968f4f8db91122b26c9fd1.png)
![](https://habrastorage.org/getpro/habr/upload_files/b5a/f50/ad1/b5af50ad1e6b6d5755e8a97b89c9e40b.png)
Появился модуль с инфографикой и CTA-кнопка. Покажу только первый, потому что картинок и так много:
![](https://habrastorage.org/getpro/habr/upload_files/663/3ca/710/6633ca7100c24f78ca6823d8a07b4217.png)
К проблемам и решению о новой доработке привели несколько ошибок на первых двух этапах:
мне пришлось работать быстро, не хватало времени на то, чтобы найти лучшее решение;
не было чёткого понимания, какой результат должен получиться;
я пытался объединить два продукта с разными подходами к дизайну, которые сложно совместить.
Что я понял, пока работал над Брендспейсом
На дизайн такого крупного проекта точно нужно больше двух итераций по две недели. До старта проекта важно проанализировать решения конкурентов, продумать, какие проблемы могут появиться из-за интеграции с другими продуктами.
За время работы над проектом Брендспейса я сделал такие выводы:
Если из-за спешки пытаться адаптировать старые модули, а не делать новые, получается ерунда.
Для универсального конструктора лучше делать дизайн как можно проще. Чем минималистичнее, тем легче будет показать на странице любой бренд.
Нельзя закрывать глаза на мелкие технические огрехи или ошибки дизайна, чтобы быстрее запустить проект. Например, блоки, которые сместились относительно друг друга, сильно влияют на общее восприятие страницы.
До работы с дизайном нужно решить, будет ли проект самостоятельным или его нужно адаптировать к основному продукту.
Документация нужна и для разработчиков, и для бизнес-клиентов. Без неё получается плохо и не так, как ожидалось.
Первоначальная идея свободного конструктора не работает. Клиентам нужны консультации дизайнеров, редактура текстов, готовые шаблоны для размещения контента.
Для себя я понял, что переосмысление и постоянные переделки проекта плохо влияют на продуктивность. Из-за них кажется, что всё сделано не так, и работа воспринимается как провал.
Брендспейс интересен бизнес-клиентам, есть хорошие примеры страниц. Понимание этого помогло мне довести важные этапы до конца.