Эволюция дизайна Авито: к чему мы пришли за 17 лет работы

Привет! На связи дизайн-команда Авито. Компании исполнилось уже 17 лет, и мы решили вспомнить важные этапы развития нашего дизайна. В статье расскажем, с чего всё начиналось, и к чему мы пришли сейчас: как трансформировался продукт, дизайн, вклад нашей команды и с какими вызовами мы сталкиваемся сегодня.

2007 — основание компании

2010 — экстенсивный рост

2012 — первое мобильное приложение

2013 — начало дизайн-отдела

2014 — ребрендинг

2016 — UX-исследования

2017 — дизайн-система

2018 — продуктовые редакторы и Авито Доставка

2019 — вертикализация

2020 — работа в пандемию

2021 — взрывной рост команды

2022 — редизайн продукта

2023 — креативная лаборатория и новые продукты с ярким визуалом

2024 — внедрение ИИ и зрелая дизайн-культура

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

Забавный факт: основатели компании нашли первого дизайнера в клубе, где он работал диджеем.

В 2007 году на главной странице висела большая карта. Она решала несколько задач:

1. Коммуникационная — картой мы демонстрировали широту географии и показывали, что Авито есть в разных уголках России.

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

В 2010 году мы запустили масштабную федеральную рекламную кампанию. Мы были первой IT-компанией, которая так активно зашла на ТВ. Реклама помогла резко вырасти, и это было хорошо видно по трафику.

В 2012 году Авито делает шаг в сторону мультиплатформенности и начинает разработку мобильного приложения. Компания продолжала активно расти, но в штате по-прежнему был один дизайнер. Разработку мобильного приложения заказывали у агентства.

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

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

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

В 2014 году Авито — крупная IT-компания с большой аудиторией. Самое время обновить визуальный стиль, чтобы соответствовать новому состоянию.

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

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

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

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

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

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

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

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

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

Ещё одно важное событие — появление Авито Доставки. Она была большим шагом для Авито: мы перестали быть только доской объявлений и начали частично работать по транзакционной модели. Раньше пользователям нужно было самостоятельно договариваться о передаче товара, и если они жили в разных городах, это приводило к дополнительным расходам.

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

К этому моменту Авито уже состоял из пяти крупных бизнес-направлений: Недвижимость, Товары, Услуги, Авто и Работа. Это автономные продукты со своими моделями поведения пользователей и разными бизнес-требованиями. Поэтому компания пошла по пути вертикализации продукта, и у каждого направления появились свои команды.

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

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

Например, наши исследования изменились раз и навсегда. Мы не могли приглашать пользователей в закрытый офис, поэтому нашли новые форматы для работы: интервью по Zoom, быстрые тесты вроде first click и side-by-side.

После локдауна почти все UX-исследования так и остались в онлайне: оказалось, что это экономит время и расширяет их географию. Например, так можно легко провести интервью с жителями Владивостока.

👉 Статья на Хабре: Зачем Авито «облачные» UX-исследователи и как с ними работать

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

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

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

В этом году команда сильно выросла: дизайнеров стало на 50% больше, а продуктовых редакторов — почти в два раза.

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

👉 Статья на Хабре: Как дизайнеру и редактору работать вместе

С ростом команды у департамента возникла потребность в новых руководителях. Так за год у нас появилось 15 тимлидов — половина из них выросла из дизайнеров, которые уже работали в Авито.

Часть руководителей мы наняли с рынка, а для этого пришлось быстро научиться эффективно привлекать сильных соискателей. Поэтому в 2021-м мы стали активно инвестировать в HR-бренд — начали с того, что запустили собственные дизайн-митапы.

👉 Первый митап Avito Design Talk

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

Вместе с дизайном продукта обновился и брендинг: мы поменяли логотип, цветовую палитру и типографику. Сделали бренд современнее, заметнее и конкурентоспособнее.

👉 Статья на Sostav: Притяжение шаров и всплеск цвета: Авито обновил дизайн-систему

У нас впервые появляются шоурилы с интерфейсами. Эти короткие ролики помогали нам презентовать идеи внутри команды и на внешнюю аудиторию. Всё-таки шоурилы воспринимать легче, чем презентации с десятками макетов.

У Авто, Недвижимости, Товаров, Услуг и Работы появляются свои арт-директора. Усиление вертикалей отражается и на бренд-архитектуре — к основному логотипу добавляются соответствующие экстеншены:

Мы запускаем новые продуктовые инициативы со своим ярким визуальным языком. Например, Авито Премиум — для люксовой одежды и аксессуаров и Авито Молл — для новых товаров с доставкой от продавцов с хорошей репутацией.

В Авито появляется инхаус-студия «Стилет». Она отвечает за креативный ресурс для решения нестандартных задач: фирменная графика, брендинг, шоурилы, оформление мероприятий, мерч. А ещё — выступает как продюсерский центр для работы с различными дизайн-контрибьюторами.

👉 Выпуск подкаста «Дизайн прост» с директором креативной студии Димой Салливаном

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

👉 Новая графика на Авито: технологичный визуальный стиль для мультипродуктовой компании

▶ Смотреть шоурил за 2023-й

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

👉 Как мы сделали 1000 картинок с помощью нейросети

Запустили генеративную модель, которая помогает продавцам готовить описания товаров по фото. Её уже можно протестировать, например, в объявлениях с одеждой.

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

Но люди всегда важнее роботов 🤖

В 2024 году мы сфокусировались на развитии нашего человеческого капитала — команды и культуры её работы.

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

Про трансформацию дизайн-культуры Авито за последние несколько лет можно больше узнать в отдельной статье:

👉 Статья про дизайн-культуру в Авито

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

👉🏻 Подписаться на «Любовь, дизайн и метрики»