История «Конверта»: как мы превратили блог сервиса email-рассылок в крутой журнал о маркетинге
Кейс Unisender и Студии Лепёхина Сообщение История «Конверта»: как мы превратили блог сервиса email-рассылок в крутой журнал о маркетинге появились сначала на Конверт, журнал Unisender.
Привет, это редакция «Конверта». Долгое время мы были блогом Unisender, а теперь выросли в полноценное медиа — журнал о маркетинге. Для этого нам понадобилось почти 10 лет, 2000+ написанных статей, 200+ авторов и признание аудитории — нас читают более 1 млн людей каждый месяц.
Постоянные читатели и клиенты Unisender уже заметили, что теперь мы выглядим совсем по-другому. Новый дизайн для «Конверта» разработала Студия Лепёхина. В этой статье расскажем, почему мы пришли к ребрендингу и как проходил редизайн.
Проблема
Изначально в блоге Unisender было две темы: рассылки и весь остальной диджитал. При этом в тему диджитала входило всё, что угодно, — это был неупорядоченный поток информации, в котором сложно ориентироваться.
Постепенно о диджитале мы писали всё больше и больше, и блог стал превращаться в мультитематическую площадку: появилось много материалов по контент-маркетингу, SEO, дизайну, рекламе и другим направлениям. В какой-то момент мы поняли, что необходимо навести порядок в этой массе контента, сделать площадку более понятной и привлекательной для читателя.
Но только редизайна показалось мало. Мы решили не просто остаться блогом Unisender, а трансформироваться в отдельное бренд-медиа со своим названием и фирменным стилем. Не потому что бренд-медиа это модно, а потому что фактически мы и так к этому пришли: к концу 2024 года у нас было две тысячи опубликованных статей и большая редакция, состоящая из главреда, шеф-редактора, 8 «тематических» редакторов и более 10 внештатных авторов, с которыми мы постоянно сотрудничаем.
Так блог Unisender превратился в журнал «Конверт».
Наш ребрендинг — это выход за рамки темы email-маркетинга в более крупную тему. Как Unisender из сервиса email-рассылок вырастает в серьёзную платформу для автоматизации маркетинга, так и блог превращается в полноценное медиа, которое собирает внутри себя максимум полезной информации для тех, кто работает в маркетинге. И в «Конверт» мы положили самое главное, тщательно отобранное, с любовью, с заботой, со знанием дела.
Медиаменеджер, редактор, писатель
Важно, что мы остались контент-маркетинговым проектом, не инди-медиа, существующим само по себе. Нам важно работать на цели бренда: вести трафик на основной сайт, приносить регистрации в сервис рассылок и смежные продукты, окупаться. Важно не терять связь с брендом. «Конверт» в том числе и поэтому.
Цель и задачи
Главная цель редизайна — увязать большое количество тем и форматов контента так, чтобы дать всем материалам равную возможность быть просмотренными читателем.
Чтобы этой цели достичь, поставили задачи:
- на главной странице нового медиа показать максимальное количество тем, на которые мы пишем, выделить те, которые считаем ключевыми, а также подсветить все имеющиеся форматы материалов;
- реализовать удобную навигацию с помощью хлебных крошек, кликабельных тегов и других визуальных элементов.
С точки зрения визуала у нас не было запроса на радикальное обновление. Например, стилистика обложек осталась прежней. Но хотелось освежить внешний вид страниц, сделать его более современным.
Кроме того, из самого факта ребрендинга вырастала задача разработать фирменный стиль «Конверта» как отдельного медиа — ведь раньше блог соответствовал брендбуку Unisender.
Выбор подрядчика
Редизайн назревал долго, и всё это время мы размышляли, делать его своими силами или доверить стороннему агентству. Штатный дизайнер, как нам казалось, сможет более глубоко погрузиться в задачу — потому что лучше знаком с продуктом и работает над разными дизайнами именно для Unisender.
Но перевесили преимущества другой стороны — у агентства, специализирующегося на дизайне, больше опыта и насмотренности, причём в разных проектах, в том числе контентных. И мы рассчитывали, что подрядчик сможет взглянуть на наш продукт свежим взглядом и предложить те решения, которые мы сами можем просто не разглядеть.
Медиаменеджер, редактор, писатель
По каким критериям выбирали студию
Опыт в медиа. Медиа сильно отличаются от корпоративных сайтов или интернет-магазинов. Другой опыт взаимодействия, другие источники трафика, другие метрики. На лету всю специфику не поймёшь, надо быть в теме.
Причастность к рассылкам. Unisender — сервис рассылок, и, в конце концов, именно сервис — главный заказчик дизайна. Нам нужны были люди, которые понимают, кому и зачем нужен email как канал. Кто любит и, возможно, сам использует рассылки.
Классное портфолио. Команда Unisender с нуля построила несколько контент-проектов. Мы имели опыт редизайна до этого и теперь хотели поработать с дизайнерами намного сильнее и насмотреннее нас. Редизайн медиа-миллионника — трудная задача. Работа вместе с сильным агентством помогает всей команде перейти на новый уровень.
В каком-то смысле редизайн должен был подтолкнуть нас переосмыслить то, чем мы занимаемся. Стать на голову выше.
Редакция Unisender давно знакома с Евгением Лепёхиным: он неоднократно давал экспертные комментарии для статей блога и Словаря маркетолога, писал колонки для рассылки «Честно». А ещё Женя давно ведёт авторскую email-рассылку — а мы давно её читаем.
10 авторских email-рассылок, которые вдохновляют
Пожалуй, наша общая любовь к рассылкам и стала ключевым доводом в пользу Студии Лепёхина.
Начало работы
Ещё до того, как приступить к редизайну, мы провели важные подготовительные работы.
Навели порядок в тегах. Теги — это темы, на которые мы пишем. Перед редизайном мы убрали слишком узкие, например, «отписка от рассылки» или «сегментация базы». Они были актуальны, когда 90% контента в блоге было посвящено рассылкам. Сейчас необходимости в них нет, и статьи, которые были помечены такими тегами, находятся в большом разделе Email.
Переосмыслили форматы. Ещё один архаизм блога — рубрики «Идеи» и «Советы» (мы и сами в них путались, что уж говорить о читателях). На заре блога они были понятны и просты: советы — о том, как писать письма, настроить рассылки или собрать базу контактов; идеи — примеры чужих рассылок, которыми можно вдохновляться. Сейчас таких форматов нет — они превратились в «Разборы» и «Подборки».
Главный редактор журнала «Конверт»
Реструктуризация блога — в рамках подготовки к дальнейшему редизайну — оказалась интересным, но непростым проектом. Ведь нам пришлось, например:
- Массово поменять URL всех статей блога и настроить сотни редиректов (вроде blog/sovety/article → blog/article).
- Пройтись по каждой статье, опубликованной за последние несколько лет, и указать там новые теги.
- Починить пагинацию, которая сломалась из-за изменения адресов страниц.
- Перенастроить блоки, связанными со старыми рубриками, на главной блога.
- Поправить вручную настроенные редиректы в блоге, которые сломались после автоматических перенаправлений, и т.д.
Не обошлось и без факапов.
Я попросил команду разработки сделать временную рубрику, куда сложили часть статей, где нельзя было переназначить рубрику автоматически. Чтобы не задерживаться сейчас, а потом спокойно верстальщику / редактору зайти в админку и внести нужные изменения на каждой странице.
Но разработка поняла меня не совсем верно — и скрытой от чужих глаз и от индексации оказалась не только сама страница временной рубрики, но и все статьи, туда входящие. Хорошо, что это вовремя заметил SEO-специалист — и мы срочно вернули доступ ко всем материалам.
Массовые изменения адресов и редиректы — это тоже всегда риски потерять позиции и трафик. И действительно, сразу после реструктуризации посещаемость блога снизилась примерно на 10%. Но много не потеряли, через пару месяцев вернулись к прежним показателям.
После того, как мы перепридумали структуру блога и реализовали эти изменения в CMS с помощью разработчиков, можно было приступать к редизайну.
Начали с составления подробного документа, в котором отразили видение того, как должен выглядеть «Конверт»: не только технические нюансы и какие макеты на выходе хотим получить, но и в целом описали ситуацию в бизнесе, что происходит с продуктом и как блог с ним связан, какие сложности и ограничения есть в продукте и почему важно их учесть.
Руководитель Студии Лепёхина
В Студии есть чек-лист, по которому мы проверяем каждую заявку, чтобы принять решение, браться за проект, интересен и выгоден ли он для нас. Когда мы получили заявку и увидели Google-документ на 13 страниц, мы сразу поняли: это наш заказчик. Из опыта мы знаем, если заказчик проделал домашнюю работу, значит, он чётко понимает, зачем ему нужна помощь Студии, и не будет говорить с нами абстрактными фразами вроде «сделайте красиво».
Вдобавок, все в Студии знают Unisender: наши разработчики настраивали интеграцию с рассыльщиком Unisender на других проектах, я не раз создавал в нём цепочки писем, ещё будучи фрилансером, а позднее несколько раз давал интервью и комментарии для статей Unisender. Когда мы пришли на первый созвон, я знал как минимум трёх человек из команды Unisender и сразу понял: всё получится.
Сложности и ограничения
Помимо того, что должно быть в «Конверте», было важно заранее определиться с тем, чего в нём быть не должно — т. е. со списком ограничений. Эти нюансы и сложности также внесли в ТЗ и обговорили со Студией Лепёхина до начала работы.
Стиль сайта Unisender. Было решено оставить «Конверт» по прежнему адресу — т.е. на одном домене с сайтом сервиса. Это создало самые большие сложности. С одной стороны, обновлённый дизайн помог бы новому бренд-медиа выделиться на фоне остального сайта и привлечь внимание пользователей. С другой, мы не хотели, чтобы фирменный стиль «Конверта» разительно отличался от стиля компании. Именно поэтому наш маскот Гудбой появился в логотипе «Конверта», а общее впечатление от журнала соответствует архетипу бренда Unisender.
Медиаменеджер, редактор, писатель
Про наш архетип я бы сказал так: Заботливый, перетекающий в Славный малый. Или наоборот. Это как раз характер Гудбоя, который неплохо описывает наш подход к созданию контента, где в центре — забота о читателе. Мы тебе объясним, мы тебя проводим, мы уже знаем, с какими проблемами сталкиваются другие, и тебе покажем, как их решить. Вот по таким лекалам пишутся статьи.
Требования SEO. Органика всегда была главным каналом трафика и конверсий в блоге — поэтому было крайне важно соблюсти требования SEO-команды Unisender. Например, хедер и футер должны остаться сквозными на всём сайте Unisender, шрифт не может быть полупрозрачным или слишком мелким, а контент мобильной версии должен полностью повторять десктопный.
Пропорции обложек. Примерно за год до ребрендинга мы провели частичный редизайн, изменив стилистику, а также размеры изображений в обложках статей. При масштабном редизайне было важно сохранить размеры и пропорции обложек — иначе редакции пришлось бы перерисовывать и перезагружать больше 1500 изображений в уже опубликованных статьях.
Мы передали техзадание Студии Лепёхина — и перед началом работы дополнительно несколько раз созвонились с командой подрядчика, чтобы составить понимание задачи.
Руководитель Студии Лепёхина
Мы уделяем большое внимание предпроектной подготовке. Ни один проект не начинается, пока мы не убедимся, что верно понимаем задачу заказчика, а он понимает, что мы будем делать и как дойдём до цели.
В случае с Unisender, несмотря на детальный документ, который ребята подготовили для нас, очень много вопросов остались неразрешёнными. Как подружить логотипы Unisender и «Конверта»? Как быть со шрифтами в блоге? Переносить ли блог на отдельный домен? Что важно сохранить и улучшить, а что устарело и больше не нужно? Кто принимает решения на проекте? Как происходит оплата?
Мы уточнили все важные детали и написали два документа с пониманием задачи: один про логотип «Конверта», а второй — про сайт. В каком-то смысле понимание задачи даже важнее договора, в нём описано будущее решение и требования к нему. Мы всегда пишем понимание задачи сами, чтобы у заказчика была возможность убедиться, что мы всё поняли верно и ничего не упустили.
Предпроектный этап — серьёзная менеджерская работа: разобраться в задаче, выстроить коммуникацию, согласовать договор, оговорить порядок оплаты, определиться, кто принимает решения и т.д. Эту нагрузку взяла на себя Студия: спланировала весь проект, определила порядок этапов и согласований — и затем вела проект согласно плану.
Руководитель Студии Лепёхина
Важнее всего было договориться о процессе согласования. Со стороны Unisender в проекте участвовало 9 человек. Если бы каждый имел право голоса, проект мог бы затянуться, постоянно возникали бы конфликты. Мы договорились, что все ключевые решения принимает Саша Сараев, а если его нет, то проджект-менеджер. Это позволило нам сократить количество замечаний и избежать конфликтных ситуаций, когда решение отдельного человека тормозит весь процесс.
Основные этапы работы
Этап 1. Разработка логотипа и визуальной концепции
О том, как придумывали и создавали логотип журнала «Конверт», рассказывает Евгений Лепёхин, арт-директор Студии:
На встрече с командой Unisender мы обсудили пожелания к логотипу и выделили четыре самых важных, исходя из которых определили будущее решение.
- Связь с головным брендом должна считываться молниеносно, без особых усилий.
- У Unisender есть маскот — Гудбой. Хочется, чтобы «Конверт» не противоречил этому образу доброй и милой собачки, а дополнял основной бренд.
- Хочется, чтобы люди увидев новый дизайн и лого сказали: «Так мог сделать только Unisender. Это про них!»
- Хочется увидеть перспективность идей на мокапах, чтобы было ясно, как стиль будет развиваться за пределами веба.
Начали мы с того, что изучили, как вообще используется маскот, посмотрели на цветовую палитру. И потом стали думать над вариантами, собрали много разных референсов, сгруппировали их по типам. Рассматривали самые разные — даже абстрактные, 3D, прозрачные, динамические… Когда все эти варианты мы стали перекладывать на будущий логотип, нам понравились две идеи.
1. Прикольный вариант у школы «Фоксфорд», когда лиса выглядывает из-за названия, — это показалось близким к Unisender по настроению.
2. Сам конверт как форма и разные варианты, как его можно обыграть. Например, конверт летит навстречу читателю:
Ещё мы сразу попытались подружить Гудбоя с конвертом.
Мы заметили, что в основном у бренд-медиа используются шрифтовые логотипы, очень мало у кого есть какой-то визуал или маскот. И это нас привело к мысли, что вообще не нужно ориентироваться на логотипы других бренд-медиа и их опыт, потому что это сложно переложить на Unisender.
У этих площадок бренд-медиа — как будто что-то отдельное, какой-то самостоятельный продукт, он напрямую не связан с головным брендом. Например, «Кинжал». Здесь написано, что это журнал Яндекс Практикума, но из логотипа этого вообще не понять. Если убрать подпись, то и не ясно, что это за «Кинжал». У Unisender всё иначе, есть тесная, неразрывная связь с основным брендом. И один из ключевых запросов — эту связь сохранить.
Поэтому основной концепцией был выбран Гудбой, который как-то взаимодействует с конвертом.
В процессе шлифовки логотипа мы провели Гудбою своеобразный рестайлинг. На первый взгляд кажется, что маскот почти не изменился, но вот тут — в сравнении — очень хорошо видна разница:
Гудбой слева — немножко расхлябанный, с приопущенными ушами и торчащим носом. Что мы сделали? Доработали форму носа и ушей, изменили пропорции белого пятна вокруг левого глаза. И надели на Гудбоя ошейник, так у него как будто появился хозяин. Получился хороший такой, благородный пёс — послушный, воспитанный, приносит тебе новости в конверте. Кайф!
Цветовую палитру для сайта подбирали, когда логотип был уже готов. Мы взяли то, что было в палитре Unisender изначально, но освежили все цвета, осовременили, чтобы они выглядели ярко и классно.
Этап 2. Дизайн страниц: разработка макетов и подготовка адаптивов
На этом этапе Студия Лепёхина разработала макеты шаблонов для ключевых страниц «Конверта»:
- главной страницы;
- страниц рубрик и форматов;
- страницы статьи;
- страниц редакции и автора.
Основными шаблонами стали главная страница «Конверта» и страница статьи — т. к. они содержат все компоненты, из которых строятся другие страницы. С них и начали.
Дизайнер Студии Лепёхина
Про начало работы
Мы уделили внимание аналитике: смотрели метрики посещения, думали, от каких элементов при редизайне страниц можно отказаться или сделать их менее заметными, а какие, наоборот, подсветить.
Также важно было сохранить структуру, т. к. это редизайн — и в новом виде хорошо должны были выглядеть и старые статьи, и новые. А некоторые элементы (хедер, футер) должны были быть сквозными для всех продуктов Unisender.
Шаблон статьи структурно почти не изменился. Но несколько важных правок внесли. Например, теги переехали наверх (раньше были в конце статьи). Так навигация внутри статьи стала более удобной — читатель может выбрать как интересующую его тему, так и формат публикации.
Дизайнер Студии Лепёхина
Про проблемы
Главной проблемой была непонятная структура стартовой блога. Мы разбили её на темы, придумали «конструктор» из колонок для отображения статей и ушли от карточек, чтобы каждая тема получила более уникальный вид.
Для списка форматов, «Честно» и спецпроектов придумали уникальное отображение вне «конструктора», тем самым ещё больше разнообразив стартовую страницу.
«Честно» — это авторские колонки от экспертов из мира маркетинга. Именно поэтому здесь важно показать авторов статей, подчеркнуть их должности и регалии. Это единственный блок на главной странице «Конверта», где на превью статьи можно увидеть автора и понять, что это за специалист.
А ещё нам очень нравится, что в фирменном стиле есть классные визуальные элементы, подчёркивающие «конвертную» стилистику. Например, блок «Честно» напоминает почтовую марку. Как и рекламные баннеры в статьях:
Дизайнер Студии Лепёхина
Про прикольные фишечки
Плашки и обводки — это про «Конверт» 
Читать Далее
