«Редизайн сделано.медиа». Как переупаковать сайт и улучшить статистику

12 лет назад сайт сделано.медиа (тогда он назывался newmediaedu.ru) задумывался как библиотека кейсов мультимедийных проектов и инструментов и методов, которыми пользовались авторы этих проектов.

— Задумка была такая: есть проекты, есть инструменты и между ними — то, что я называю перелинковкой. Планировалось, что пользователь открывает кейс и получает к нему список инструментов. И наоборот. Это была корневая идея, которая в 2012 году легла в основу сайта. Затем менялись внешний вид, расположение блоков, наполнение. Но первоначальная идея оставалась и остаётся до сих пор, — рассказывает Оксана Силантьева, руководитель Лаборатории Silamedia.

Технические обновления

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

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

То, что мы легко сейчас делаем на этом дизайне, было невозможной и долгой ручной работой на предыдущих. Я уже работала раньше на контент-проекте, который был построен на тесной увязке различных материалов и форматов. Поэтому использовала опыт, полученный ранее в «Электронном городе» в Новосибирске для переосмысления проекта сделано.медиа.

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

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

Переупаковка

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

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

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

Следующим этапом стала переупаковка «старых» материалов под новые редакционные стандарты, которые были разработаны в процессе этого же редизайна.

— Сейчас все примеры проектов оформлены одинаково: заголовки по одному формату, паспорт проекта, «Подводя итоги», фотографии и скриншоты. В «Инструкциях и обзорах» — тоже единое оформление. У сайта было несколько редакторов, но не было сквозного документа редакционных стандартов, которые позволяли бы передавать сайт от одного редактора к другому. Поэтому у каждого редактора была своя стилистика заголовков, свой подход к структуре материала. Но в нашем формате для пользователя смена редактора не должна быть заметна, потому что мы формируем энциклопедию. И те материалы, которые написаны в 2015 году, они не менее интересны и должны быть похожи на те материалы, которые мы пишем в 2024 году. Во время редизайна мы это все стандартизировали и упорядочили, — отмечает Оксана Силантьева.

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

В карусели на первой картинке — паспорт кейса сейчас, на второй — вариант из прошлого дизайна.

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

Внешний вид

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

От некоторых элементов пришлось отказаться. Раньше контентная часть размещалась в две колонки: в основной был кейс, а в узкой боковой — ссылки на инструменты. Метрики показали, что по «боковушке» не кликали, поэтому в новой версии сайта второй колонки нет.

— Как бы мне ни хотелось сохранить эту идею, надо было признать, что она не работает. В итоге «Инструменты» переехали в паспорт проекта, потому что хочешь—не хочешь надо следовать тому, как люди пользуются, а не как хочется нам. И это первый дизайн, в котором нарушена первоначальная идея, где с одной стороны кейсы с другой — инструменты, — рассказывает Оксана Силантьева.

Метрики также показали, что пользователи не скроллят до конца главную страницу. Поэтому она стала вдвое короче.

«Красивенькое»

Дизайн — это не про красивенькое, дизайн — это про полезненькое. Это не всегда цвет. Это не всегда фотографии или иллюстрации. Дизайн — это, в первую очередь, конструирование пути пользователя. У вас есть цель: куда нужно привести пользователя, чтобы он что-то для вас сделал.

Шрифтовые пары и цветовое кодирование рубрик было подобрано, исходя из фирменного стиля Лаборатории мультимедийного опыта Silamedia.

— Со шрифтами все просто. Это шрифты, которые мы когда-то подобрали, купили и активно начали использовать как фирменные. Тогда выбор был в пользу комфорта: широкий набор, округлый, но при этом не мягкий, удобный для глаз, приятный в дизайне. Что касается цветов, то базовым остался оранжевый, дополняющий — бирюзовый. Это яркие, чистые и ясные цвета. Они задали выбор остальных цветов: появились фуксия, весёлый салатовый, голубой, — рассказывает дизайнер Ольга Филиппова.

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

Макет обновлённого сайта в трёх версиях — десктопной, мобильной и планшетной — дизайнер собрала в Figma.

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

Результат

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

Также значительно вырос мобильный трафик. Если в 2019 году на мобильные устройства приходилось только 40%, то после редизайна показатель вырос до 61%. За счет переупаковки сайт теперь адаптирован для любых устройств.

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

Сайт получился систематизированным, он разговаривает с пользователем понятно: здесь у нас про это, здесь — про то… Ты зашёл на одну страницу, и куда бы твой интерес ни направился, ты прямо с этой страницы получишь то, что хочешь. Мне казалось, что именно это моя цель — чтобы люди не искали, а пришли и изучили всё в одном месте, собрали всё нужное. Пользователь зашёл и «провалился».

Редизайн привёл нас ещё и к написанию редакционных стандартов. Это заняло у меня несколько месяцев. И теперь у нас есть рабочий документ, в котором прописано всё от и до: на какие вопросы автор текстов должен получить ответы, какой визуал запросить, как оформить текст, в каком виде его сдать, какие обвесы нужны и пр. С такими редстандартами можно запускать конвейер: условно, мы можем нанять 15 авторов, и они все будут выдавать по этому стандарту приемлемый контент.

Пересмотр

После завершения процесса редизайна работа не прекращается. Каждые три месяца на основе метрик команда экспериментирует с названиями, формулировками, расположением ключевых элементов. Например, название раздела «Инструменты» изменили на более привычное слуху «Инструкции и обзоры». А когда тепловая карта показала, что раздел «Навыки» не популярен (на фото), придумали новую формулировку — «Психология и практика медиа».

— Редизайн — это не та история, когда мы один раз сделали и до следующего редизайна сидим и терпим. Это гибкая структура. И как раз эта схема пересборки позволяет гибко на это всё реагировать, — говорит Оксана Силантьева, руководитель Лаборатории Silamedia.