Illustrators.ru

Иллюстрации

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

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

Авторы

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

Профиль пользователя

Страница пользователя на сайте выполняет функцию портфолио. Пользователи могут делиться ссылками на него с клиентами и потенциальными заказчиками. Премиум-пользователи могут добавить брендированную обложку профиля. По умолчанию выбран раздел «Портфолио», где отображаются последние добавленные работы. Если подключена премиальная подписка, пользователь может указать свой «Авторский порядок». Также доступны разделы: магазин (здесь отображаются работы, которые автор выставил на продажу), посты (публикации в блоге), избранное (здесь находятся разделы с понравившимися работами) и информация об авторе с описанием и ссылками на другие социальные сети. В старом дизайне была сложная структура: блок сверху, блок слева, блок справа. Чтобы пользователь мог легче считывать контент сверху вниз, мы переделали лейаут.

Свой профиль

Если пользователь не загрузил ни одной работы, то в области раздела портфолио доступна область drag and drop для загрузки. Также можно кликнуть по кнопке, чтобы вызвать системный проводник для выбора файлов. Основные действия: переход к редактированию профиля и загрузка обложки.

Работа

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

Кнопка создания новых объявлений раньше была расположена на темном баннере. Многие пользователи ее не замечали и обращались в службу поддержки с просьбой помочь создать объявление. Разместив эту кнопку на видном месте, мы увеличили количество кликов на 25%, а количество объявлений также возросло.

Конкурсы и опыт

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

Блог

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

Лента

Лента — это страница, почти идентичная блогу. В этом разделе пользователь видит контент (иллюстрации, посты, товары, объявления, конкурсы) авторов, на которых он подписан. Структура идентична блогу, за исключением способов добавления нового поста. В блоге точка входа представлена в виде кнопки, здесь же — в виде небольшого виджета.

Личные сообщения

Мы улучшили интерфейс личных сообщений: теперь страница выглядит более лаконично. Также добавлена индикация присутствия пользователя в сети и время последнего пребывания в онлайне. Для более оживленного общения добавлена поддержка эмодзи. Действия в иконке «многоточие» (в архив, спам, удалить) теперь всегда видны в сниппете пользователя.

Добавление иллюстрации

Были внесены изменения в расположение изображения: теперь оно находится слева и может быть кадрировано с соотношением сторон 1x1. Также была добавлена функция продажи иллюстраций. Раньше пользователю нужно было выбрать опцию добавления товара, теперь же достаточно активировать соответствующий чекбокс, чтобы выставить цену на свою работу. Если пользователь желает добавить новую иллюстрацию, он может перетащить файл на данный экран: прошлое изображение будет опубликовано (если соответствует правилам валидации), а для нового можно будет отредактировать информацию.

UI-kit

Работа над редизайном проводилась в Figma для быстрой и простой сборки макетов. Дизайн был построен на компонентах UI-кита.

Результат

illustrators.ru в новом дизайне увеличил показатели активности пользователей в основных разделах. Появилась гибкость во внедрении улучшений. Из минусов: к сожалению, на пользовательский опыт повлияла техническая часть. Сайт написан на Ruby, и у владельца сайта не было достаточно средств на привлечение квалифицированных специалистов на данном стеке, поэтому есть много багов, которые сейчас устраняются. Надеюсь, в будущем сайт перейдет на React с токенизированной дизайн-системой.