Тестовое для стажировки в Авито

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

В этой статье расскажу, как выполнил тестовое задание для стажировки в дизайн-команде Авито на позицию дизайнера продукта.

Передо мной стояла задача: разработать свой вариант карточки объявления в категории «Телефоны». Обязательно для десктопа и опционально для приложения.

Что важно для человека покупающего телефон? Фото, цена и его характеристики. Пример карточки объявления в задании был разрешением 1440*900, по этому я решил делать новый дизайн под это же разрешение. Сейчас при таком разрешении на главной странице видно только фото и цену.

Такой тип размещения блоков с фото и характеристиками на экране — определённый паттерн. Люди привыкли покупать технику в том числе и телефоны в таком интерфейсе.

Блок с характеристиками

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

Блок с кнопками над фото

Следующие изменения коснулись верхнего над фото блока с кнопками. Первым делом я добавил кнопку «сравнить», потому что это удобно:)

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

Чтобы не сильно увеличивать количество кнопок я оставил эту фичу, но вместо блока сравнения при нажатии на лайк появилась возможность «добавить заметку». Эта функция ранее была реализована по кнопке справа от кнопок «добавить в избранное».

Также в верхнем блоке кнопок появилась ещё одна кнопка — «Поделиться»
В текущей версии кнопки находились в самом низу и чтобы добраться до них или до кнопки пожаловаться, нужно было скролить.

Блок под фото

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

Теперь все действия связанные с объявлением оказались доступны на первом экране.

Блок контактов

Следующие изменения коснулись блока с информацией о продавце.

На макете к заданию этого нет, но в реальной версии Авито над кнопкой подписаться есть кнопка с количеством объявлений пользователя, она ведёт на карточку профиля продавца. Таким образом избавились от дублирующей кнопки и подсветили возможность перехода к объявлениям пользователя через клик по аватару. Место кнопки с объявлениями заняла кнопка с продавцами из этой категории.(Опять же, этого нет на макете, но изучая сайт в браузере я заметил такой блок и добавил кнопку для перехода к продавцам.)

Блок с информацией

Блоки информации растянулись и получили названия

Похожие объявления

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

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

Карточка объявления для компании

На этом основная часть тестового задания была закончена.

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

Ограничения и особенности реализации

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

Нельзя так просто взять и поменять дизайн карточки в категории мобильные телефоны. Затрагивая эту карточку, мы по сути, меняем дизайн у всех карточек в разделе «Бытовая электроника». Иначе объявления в этом разделе будут выглядеть не консистентно и сбивать с толку. Варианты для реализации остальных категорий из этого раздела тоже нужно прорабатывать. А конкретно — смотреть, какие характеристики для каждой категории товара необходимо указать.

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

Спасибо, что дочитали. Буду рад комментариям и фидбэку :)

Контакты для связи:
Telegram
Facebook
Behance