История «Конверта»: как мы превратили блог сервиса email-рассылок в крутой журнал о маркетинге

Привет, это редакция «Конверта». Долгое время мы были блогом Unisender, а теперь выросли в полноценное медиа — журнал о маркетинге. Для этого нам понадобилось почти 10 лет, 2000+ написанных статей, 200+ авторов и признание аудитории —  нас читают более 1 млн людей каждый месяц.

Постоянные читатели и клиенты Unisender уже заметили, что теперь мы выглядим совсем по-другому. Новый дизайн для «Конверта» разработала Студия Лепёхина. В этой статье расскажем, почему мы пришли к ребрендингу и как проходил редизайн.

Проблема

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

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

Но только редизайна показалось мало. Мы решили не просто остаться блогом Unisender, а трансформироваться в отдельное бренд-медиа со своим названием и фирменным стилем. Не потому что бренд-медиа это модно, а потому что фактически мы и так к этому пришли: к концу 2024 года у нас было две тысячи опубликованных статей и большая редакция, состоящая из главреда, шеф-редактора, 8 «тематических» редакторов и более 10 внештатных авторов, с которыми мы постоянно сотрудничаем.

Так блог Unisender превратился в журнал «Конверт».

Наш ребрендинг — это выход за рамки темы email-маркетинга в более крупную тему. Как Unisender из сервиса email-рассылок вырастает в серьёзную платформу для автоматизации маркетинга, так и блог превращается в полноценное медиа, которое собирает внутри себя максимум полезной информации для тех, кто работает в маркетинге. И в «Конверт» мы положили самое главное, тщательно отобранное, с любовью, с заботой, со знанием дела.

Цель и задачи

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

Чтобы этой цели достичь, поставили задачи:

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

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

Кроме того, из самого факта ребрендинга вырастала задача разработать фирменный стиль «Конверта» как отдельного медиа — ведь раньше блог соответствовал брендбуку Unisender.

Выбор подрядчика

Редизайн назревал долго, и всё это время мы размышляли, делать его своими силами или доверить стороннему агентству. Штатный дизайнер, как нам казалось, сможет более глубоко погрузиться в задачу — потому что лучше знаком с продуктом и работает над разными дизайнами именно для Unisender.

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

Редакция Unisender давно знакома с Евгением Лепёхиным: он неоднократно давал экспертные комментарии для статей блога и Словаря маркетолога, писал колонки для рассылки «Честно». А ещё Женя давно ведёт авторскую email-рассылку — а мы давно её читаем.

10 авторских email-рассылок, которые вдохновляют

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

Начало работы

Ещё до того, как приступить к редизайну, мы провели важные подготовительные работы.

Навели порядок в тегах. Теги — это темы, на которые мы пишем. Перед редизайном мы убрали слишком узкие, например, «отписка от рассылки» или «сегментация базы». Они были актуальны, когда 90% контента в блоге было посвящено рассылкам. Сейчас необходимости в них нет, и статьи, которые были помечены такими тегами, находятся в большом разделе Email.

Переосмыслили форматы. Ещё один архаизм блога — рубрики «Идеи» и «Советы» (мы и сами в них путались, что уж говорить о читателях). На заре блога они были понятны и просты: советы — о том, как писать письма, настроить рассылки или собрать базу контактов; идеи — примеры чужих рассылок, которыми можно вдохновляться. Сейчас таких форматов нет — они превратились в «Разборы» и «Подборки».

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

Начали с составления подробного документа, в котором отразили видение того, как должен выглядеть «Конверт»: не только технические нюансы и какие макеты на выходе хотим получить, но и в целом описали ситуацию в бизнесе, что происходит с продуктом и как блог с ним связан, какие сложности и ограничения есть в продукте и почему важно их учесть.

Сложности и ограничения

Помимо того, что должно быть в «Конверте», было важно заранее определиться с тем, чего в нём быть не должно — т. е. со списком ограничений. Эти нюансы и сложности также внесли в ТЗ и обговорили со Студией Лепёхина до начала работы.

Стиль сайта Unisender. Было решено оставить «Конверт» по прежнему адресу — т.е. на одном домене с сайтом сервиса. Это создало самые большие сложности. С одной стороны, обновлённый дизайн помог бы новому бренд-медиа выделиться на фоне остального сайта и привлечь внимание пользователей. С другой, мы не хотели, чтобы фирменный стиль «Конверта» разительно отличался от стиля компании. Именно поэтому наш маскот Гудбой появился в логотипе «Конверта», а общее впечатление от журнала соответствует архетипу бренда Unisender.

Требования SEO. Органика всегда была главным каналом трафика и конверсий в блоге — поэтому было крайне важно соблюсти требования SEO-команды Unisender. Например, хедер и футер должны остаться сквозными на всём сайте Unisender, шрифт не может быть полупрозрачным или слишком мелким, а контент мобильной версии должен полностью повторять десктопный.

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

Мы передали техзадание Студии Лепёхина — и перед началом работы дополнительно несколько раз созвонились с командой подрядчика, чтобы составить понимание задачи.

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

Основные этапы работы

Этап 1. Разработка логотипа и визуальной концепции

О том, как придумывали и создавали логотип журнала «Конверт», рассказывает Евгений Лепёхин, арт-директор Студии:

На встрече с командой Unisender мы обсудили пожелания к логотипу и выделили четыре самых важных, исходя из которых определили будущее решение.

• Связь с головным брендом должна считываться молниеносно, без особых усилий.
• У Unisender есть маскот — Гудбой. Хочется, чтобы «Конверт» не противоречил этому образу доброй и милой собачки, а дополнял основной бренд.
• Хочется, чтобы люди увидев новый дизайн и лого сказали: «Так мог сделать только Unisender. Это про них!»
• Хочется увидеть перспективность идей на мокапах, чтобы было ясно, как стиль будет развиваться за пределами веба.

Начали мы с того, что изучили, как вообще используется маскот, посмотрели на цветовую палитру. И потом стали думать над вариантами, собрали много разных референсов, сгруппировали их по типам. Рассматривали самые разные — даже абстрактные, 3D, прозрачные, динамические... Когда все эти варианты мы стали перекладывать на будущий логотип, нам понравились две идеи.

1. Прикольный вариант у школы «Фоксфорд», когда лиса выглядывает из-за названия, — это показалось близким к Unisender по настроению.

2. Сам конверт как форма и разные варианты, как его можно обыграть. Например, конверт летит навстречу читателю:

Ещё мы сразу попытались подружить Гудбоя с конвертом.

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

Гудбой слева — немножко расхлябанный, с приопущенными ушами и торчащим носом. Что мы сделали? Доработали форму носа и ушей, изменили пропорции белого пятна вокруг левого глаза. И надели на Гудбоя ошейник, так у него как будто появился хозяин. Получился хороший такой, благородный пёс — послушный, воспитанный, приносит тебе новости в конверте. Кайф!

Цветовую палитру для сайта подбирали, когда логотип был уже готов. Мы взяли то, что было в палитре Unisender изначально, но освежили все цвета, осовременили, чтобы они выглядели ярко и классно.

Этап 2. Дизайн страниц: разработка макетов и подготовка адаптивов

На этом этапе Студия Лепёхина разработала макеты шаблонов для ключевых страниц «Конверта»:

• главной страницы;
• страниц рубрик и форматов;
• страницы статьи;
• страниц редакции и автора.

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

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

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

А ещё нам очень нравится, что в фирменном стиле есть классные визуальные элементы, подчёркивающие «конвертную» стилистику. Например, блок «Честно» напоминает почтовую марку. Как и рекламные баннеры в статьях:

Обводка блока цитаты точками — тоже отсылка к почтовой тематике. Она похожа на перфорацию марок, которые наклеивают на конверты и открытки.

Нам нравится, как цепляюще и напористо смотрятся заголовки: они привлекают внимание, и статьи словно сами зовут читателя поскорее их открыть.

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

Этап 3. Вёрстка и арт-надзор

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

Со своей стороны Студия Лепёхина обеспечила арт-надзор. Арт-директор и дизайнер Студии:

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

На этапе вёрстки часто вылезают разные сложности, которые незаметны на этапе дизайна, — так случилось и у нас.

Пожалуй, самым ярким кейсом из разряда «ожидание/реальность» стала проблема с логотипом «Конверта» в хедере. Изначально Студия Лепёхина предложила очень крутое решение, которое всем очень нравилось:

Но SEO-специалисты Unisender «зарезали» это решение: посчитали, что картинка вместо текстовой ссылки в меню может привести к рискам со стороны SEO. Поэтому совместно со Студией мы начали искать другое визуальное решение.

Нам не хотелось терять логотип журнала, но было сложно «подружить» двух Гудбоев — основного с логотипа Unisender и новенького из «Конверта». При этом идея использовать сразу двух маскотов в одном хедере не нравилась: они бы спорили друг с другом и путали читателя.

Это не единственная ситуация, в которой пришлось вносить изменения в уже согласованные макеты. К некоторым экранам пришлось делать по 2-3 подхода: править мелочи или что-то перепридумывать.

Результат работы

Каким получился «Конверт»? Классным, современным, информативным, удобным. Нам очень нравится — и надеемся, что обновлённый журнал оценят и наши читатели.

Всего на редизайн ушло 8 месяцев — от начала работ до релиза. Из них:

• 1,5 месяца — разработка и утверждение логотипа «Конверта»;
• 4 месяца — дизайн компонентов и макетов страниц;
• 2,5 месяца — вёрстка, тестирование на стейдже и релиз.

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

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

Доработать некоторые мелочи в обновлённом дизайне. Эти незначительные правки — своеобразный косметический ремонт, который мы сознательно отложили на первую итерацию после релиза.

А ещё ребрендинг «Конверта», возможно, станет отправной точкой для масштабного редизайна бренд-платформы всего Unisender. Но это будет совершенно новая история.