Отправляйте красивые письма, делитесь классным контентом, привлекайте больше платящих клиентов. До 1 500 писем бесплатно.

Кейс 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.
Переосмыслили форматы. Ещё один архаизм блога — рубрики «Идеи» и «Советы» (мы и сами в них путались, что уж говорить о читателях). На заре блога они были понятны и просты: советы — о том, как писать письма, настроить рассылки или собрать базу контактов; идеи — примеры чужих рассылок, которыми можно вдохновляться. Сейчас таких форматов нет — они превратились в «Разборы» и «Подборки».
Реструктуризация блога — в рамках подготовки к дальнейшему редизайну — оказалась интересным, но непростым проектом. Ведь нам пришлось, например:
Не обошлось и без факапов.
Я попросил команду разработки сделать временную рубрику, куда сложили часть статей, где нельзя было переназначить рубрику автоматически. Чтобы не задерживаться сейчас, а потом спокойно верстальщику / редактору зайти в админку и внести нужные изменения на каждой странице.
Но разработка поняла меня не совсем верно — и скрытой от чужих глаз и от индексации оказалась не только сама страница временной рубрики, но и все статьи, туда входящие. Хорошо, что это вовремя заметил SEO-специалист — и мы срочно вернули доступ ко всем материалам.
Массовые изменения адресов и редиректы — это тоже всегда риски потерять позиции и трафик. И действительно, сразу после реструктуризации посещаемость блога снизилась примерно на 10%. Но много не потеряли, через пару месяцев вернулись к прежним показателям.
После того, как мы перепридумали структуру блога и реализовали эти изменения в CMS с помощью разработчиков, можно было приступать к редизайну.
Начали с составления подробного документа, в котором отразили видение того, как должен выглядеть «Конверт»: не только технические нюансы и какие макеты на выходе хотим получить, но и в целом описали ситуацию в бизнесе, что происходит с продуктом и как блог с ним связан, какие сложности и ограничения есть в продукте и почему важно их учесть.
В Студии есть чек-лист, по которому мы проверяем каждую заявку, чтобы принять решение, браться за проект, интересен и выгоден ли он для нас. Когда мы получили заявку и увидели Google-документ на 13 страниц, мы сразу поняли: это наш заказчик. Из опыта мы знаем, если заказчик проделал домашнюю работу, значит, он чётко понимает, зачем ему нужна помощь Студии, и не будет говорить с нами абстрактными фразами вроде «сделайте красиво».
Вдобавок, все в Студии знают Unisender: наши разработчики настраивали интеграцию с рассыльщиком Unisender на других проектах, я не раз создавал в нём цепочки писем, ещё будучи фрилансером, а позднее несколько раз давал интервью и комментарии для статей Unisender. Когда мы пришли на первый созвон, я знал как минимум трёх человек из команды Unisender и сразу понял: всё получится.
Помимо того, что должно быть в «Конверте», было важно заранее определиться с тем, чего в нём быть не должно — т. е. со списком ограничений. Эти нюансы и сложности также внесли в ТЗ и обговорили со Студией Лепёхина до начала работы.
Стиль сайта Unisender. Было решено оставить «Конверт» по прежнему адресу — т.е. на одном домене с сайтом сервиса. Это создало самые большие сложности. С одной стороны, обновлённый дизайн помог бы новому бренд-медиа выделиться на фоне остального сайта и привлечь внимание пользователей. С другой, мы не хотели, чтобы фирменный стиль «Конверта» разительно отличался от стиля компании. Именно поэтому наш маскот Гудбой появился в логотипе «Конверта», а общее впечатление от журнала соответствует архетипу бренда Unisender.
Про наш архетип я бы сказал так: Заботливый, перетекающий в Славный малый. Или наоборот. Это как раз характер Гудбоя, который неплохо описывает наш подход к созданию контента, где в центре — забота о читателе. Мы тебе объясним, мы тебя проводим, мы уже знаем, с какими проблемами сталкиваются другие, и тебе покажем, как их решить. Вот по таким лекалам пишутся статьи.
Требования SEO. Органика всегда была главным каналом трафика и конверсий в блоге — поэтому было крайне важно соблюсти требования SEO-команды Unisender. Например, хедер и футер должны остаться сквозными на всём сайте Unisender, шрифт не может быть полупрозрачным или слишком мелким, а контент мобильной версии должен полностью повторять десктопный.
Пропорции обложек. Примерно за год до ребрендинга мы провели частичный редизайн, изменив стилистику, а также размеры изображений в обложках статей. При масштабном редизайне было важно сохранить размеры и пропорции обложек — иначе редакции пришлось бы перерисовывать и перезагружать больше 1500 изображений в уже опубликованных статьях.
Мы передали техзадание Студии Лепёхина — и перед началом работы дополнительно несколько раз созвонились с командой подрядчика, чтобы составить понимание задачи.
Мы уделяем большое внимание предпроектной подготовке. Ни один проект не начинается, пока мы не убедимся, что верно понимаем задачу заказчика, а он понимает, что мы будем делать и как дойдём до цели.
В случае с Unisender, несмотря на детальный документ, который ребята подготовили для нас, очень много вопросов остались неразрешёнными. Как подружить логотипы Unisender и «Конверта»? Как быть со шрифтами в блоге? Переносить ли блог на отдельный домен? Что важно сохранить и улучшить, а что устарело и больше не нужно? Кто принимает решения на проекте? Как происходит оплата?
Мы уточнили все важные детали и написали два документа с пониманием задачи: один про логотип «Конверта», а второй — про сайт. В каком-то смысле понимание задачи даже важнее договора, в нём описано будущее решение и требования к нему. Мы всегда пишем понимание задачи сами, чтобы у заказчика была возможность убедиться, что мы всё поняли верно и ничего не упустили.
Предпроектный этап — серьёзная менеджерская работа: разобраться в задаче, выстроить коммуникацию, согласовать договор, оговорить порядок оплаты, определиться, кто принимает решения и т.д. Эту нагрузку взяла на себя Студия: спланировала весь проект, определила порядок этапов и согласований — и затем вела проект согласно плану.
Важнее всего было договориться о процессе согласования. Со стороны Unisender в проекте участвовало 9 человек. Если бы каждый имел право голоса, проект мог бы затянуться, постоянно возникали бы конфликты. Мы договорились, что все ключевые решения принимает Саша Сараев, а если его нет, то проджект-менеджер. Это позволило нам сократить количество замечаний и избежать конфликтных ситуаций, когда решение отдельного человека тормозит весь процесс.
О том, как придумывали и создавали логотип журнала «Конверт», рассказывает Евгений Лепёхин, арт-директор Студии:
На встрече с командой Unisender мы обсудили пожелания к логотипу и выделили четыре самых важных, исходя из которых определили будущее решение.
Начали мы с того, что изучили, как вообще используется маскот, посмотрели на цветовую палитру. И потом стали думать над вариантами, собрали много разных референсов, сгруппировали их по типам. Рассматривали самые разные — даже абстрактные, 3D, прозрачные, динамические… Когда все эти варианты мы стали перекладывать на будущий логотип, нам понравились две идеи.
1. Прикольный вариант у школы «Фоксфорд», когда лиса выглядывает из-за названия, — это показалось близким к Unisender по настроению.
2. Сам конверт как форма и разные варианты, как его можно обыграть. Например, конверт летит навстречу читателю:
Ещё мы сразу попытались подружить Гудбоя с конвертом.
В процессе шлифовки логотипа мы провели Гудбою своеобразный рестайлинг. На первый взгляд кажется, что маскот почти не изменился, но вот тут — в сравнении — очень хорошо видна разница:
Гудбой слева — немножко расхлябанный, с приопущенными ушами и торчащим носом. Что мы сделали? Доработали форму носа и ушей, изменили пропорции белого пятна вокруг левого глаза. И надели на Гудбоя ошейник, так у него как будто появился хозяин. Получился хороший такой, благородный пёс — послушный, воспитанный, приносит тебе новости в конверте. Кайф!
Цветовую палитру для сайта подбирали, когда логотип был уже готов. Мы взяли то, что было в палитре Unisender изначально, но освежили все цвета, осовременили, чтобы они выглядели ярко и классно.
На этом этапе Студия Лепёхина разработала макеты шаблонов для ключевых страниц «Конверта»:
Основными шаблонами стали главная страница «Конверта» и страница статьи — т. к. они содержат все компоненты, из которых строятся другие страницы. С них и начали.
Мы уделили внимание аналитике: смотрели метрики посещения, думали, от каких элементов при редизайне страниц можно отказаться или сделать их менее заметными, а какие, наоборот, подсветить.
Также важно было сохранить структуру, т. к. это редизайн — и в новом виде хорошо должны были выглядеть и старые статьи, и новые. А некоторые элементы (хедер, футер) должны были быть сквозными для всех продуктов Unisender.
Шаблон статьи структурно почти не изменился. Но несколько важных правок внесли. Например, теги переехали наверх (раньше были в конце статьи). Так навигация внутри статьи стала более удобной — читатель может выбрать как интересующую его тему, так и формат публикации.
Главной проблемой была непонятная структура стартовой блога. Мы разбили её на темы, придумали «конструктор» из колонок для отображения статей и ушли от карточек, чтобы каждая тема получила более уникальный вид.
Для списка форматов, «Честно» и спецпроектов придумали уникальное отображение вне «конструктора», тем самым ещё больше разнообразив стартовую страницу.
«Честно» — это авторские колонки от экспертов из мира маркетинга. Именно поэтому здесь важно показать авторов статей, подчеркнуть их должности и регалии. Это единственный блок на главной странице «Конверта», где на превью статьи можно увидеть автора и понять, что это за специалист.
А ещё нам очень нравится, что в фирменном стиле есть классные визуальные элементы, подчёркивающие «конвертную» стилистику. Например, блок «Честно» напоминает почтовую марку. Как и рекламные баннеры в статьях:
Плашки и обводки — это про «Конверт» 😊Мы хотели добавить в айдентику элементы, перекликающиеся с новым названием. Но есть и совсем малозаметные пасхалки. Например, на главной в блоке «Дизайн» превью статей только с изображениями, а в теме SMM — только текстовые.
Обводка блока цитаты точками — тоже отсылка к почтовой тематике. Она похожа на перфорацию марок, которые наклеивают на конверты и открытки.
Для заголовков мы взяли Fact, как бы рифмуя текстовую часть логотипа «Конверта». Написание заголовков заглавными выглядит брутально и не похоже на другие медиа, даёт хороший контраст в шрифтовой паре. Для основных текстов мы оставили Inter, сохраняя преемственность, но взяли более новую версию гарнитуры — Inter Display. Она хороша для чтения, там лучше отрисована кириллица. Настроили в ней альтернативные цифры, они красивые.
Нам нравится, как цепляюще и напористо смотрятся заголовки: они привлекают внимание, и статьи словно сами зовут читателя поскорее их открыть.
После согласования дизайна оставалось дорисовать макеты в разных размерах для десктопа и мобильных гаджетов.
У меня есть правило: работать только с теми, кто может сказать тебе нет. Ценю это качество. Если работа над проектом идёт слишком гладко, без споров — есть вероятность, что вы не делаете ничего принципиально нового. Или что исполнитель, пытаясь вам угодить, отметает смелые идеи.
Для меня здоровый спор и умение сказать нет — показатели того, что людям не всё равно. Нам было важно слышать критику от Студии и самим критиковать. Были моменты, когда мы спорили и Женя Лепёхин убеждал нас, что мы выбрали не лучшее решение. И, в итоге, убедил. Мы отказались от нескольких слабых компромиссов и от попыток угодить всем: и SEO, и маркетингу, и контенту, и продукту.
После финального согласования всех макетов приступили к вёрстке — эту задачу закрывали командой разработчиков, которая много лет занимается поддержкой сайта Unisender.
Со своей стороны Студия Лепёхина обеспечила арт-надзор. Арт-директор и дизайнер Студии:
Часто клиенты не понимают, в чём смысл арт-надзора, мол, и сами всё сверстаем и внедрим. К счастью, ребята из Unisender прекрасно понимали ценность нашего участия на этапе вёрстки и были рады, что мы предложили помощь.
Мы не любим делать работу по принципу «мы своё дело сделали, а после нас гори всё синим пламенем». Нам важно знать, что всё, что мы задумали, увидит свет и будет работать, как положено. В этом плане мы требовательные задроты. В моменте это может бесить, но, в конце, когда заказчик видит результат, он понимает: всё было не зря.
Арт-надзор помогает добиться необходимого ощущения от взаимодействия с продуктом и воплотить дизайн в жизнь так, как было задумано. К слову, такая услуга существует во многих сферах, не только в дизайне. Даже мерчендайзинг в ритейле — тоже своего рода арт-надзор.
Главное, арт-надзор снимает с заказчика и разработчиков головную боль в случаях, если что-то, что мы задумали, не работает и надо найти другое решение — более простое и предсказуемое. Лучше, если это возьмут на себя дизайнеры, которые проектировали сайт или интерфейс. В конце концов, не будет же заказчик сам перерисовывать кнопки в Figma.
На этапе вёрстки часто вылезают разные сложности, которые незаметны на этапе дизайна, — так случилось и у нас.
Пожалуй, самым ярким кейсом из разряда «ожидание/реальность» стала проблема с логотипом «Конверта» в хедере. Изначально Студия Лепёхина предложила очень крутое решение, которое всем очень нравилось:
Но SEO-специалисты Unisender «зарезали» это решение: посчитали, что картинка вместо текстовой ссылки в меню может привести к рискам со стороны SEO. Поэтому совместно со Студией мы начали искать другое визуальное решение.
Нам не хотелось терять логотип журнала, но было сложно «подружить» двух Гудбоев — основного с логотипа Unisender и новенького из «Конверта». При этом идея использовать сразу двух маскотов в одном хедере не нравилась: они бы спорили друг с другом и путали читателя.
Мы собрали пять разных вариантов, а потом долго их крутили, думали, обсуждали — и все варианты один за другим отметались. В итоге пришли к решению, которое реализовано сейчас. Смотрится хорошо: есть Unisender, есть «Конверт», они друг друга дополняют. Да, в хедере нет нашего «конвертного» Гудбоя, к сожалению. Но он присутствует в начале главной страницы, встречает читателя. Думаю, что в будущем можно будет лого добавить ещё в каких-то местах, обыграть в отдельных блоках или обложках.
Это не единственная ситуация, в которой пришлось вносить изменения в уже согласованные макеты. К некоторым экранам пришлось делать по 2-3 подхода: править мелочи или что-то перепридумывать.
Каким получился «Конверт»? Классным, современным, информативным, удобным. Нам очень нравится — и надеемся, что обновлённый журнал оценят и наши читатели.
Я горжусь тем, что получилось. Когда я заходил в блог Unisender до редизайна, первое ощущение, которое я ловил было: «Блин, здесь нечего делать». Вроде бы много статей, много чего есть, но из-за однообразной вёрстки и подачи ты начинаешь там быстро скучать, хочешь поскорее уйти. Площадка не вывозила конкуренцию за внимание с другими медиаресурсами вроде YouTube или Telegram.
Сейчас, когда я вижу новый дизайн в деле, и даже когда мы смотрели макеты, такого ощущения, что мне скучно, нет. Во-первых, ты сразу понимаешь, что перед тобой классный, свежий продукт. Во-вторых, появилась навигация по темам. Видно, что их много и они упорядочены. В-третьих, новый сайт вовлекает тебя и затягивает за счёт того, что каждый новый экран не похож на предыдущий, хотя все они собраны из одного набора компонентов. Хочется всё изучать и разглядывать.
Да, что-то не получилось воплотить в жизнь по техническим причинам. Например, мы придумали кнопку с логотипом «Конверта» в верхнем меню, это выглядело очень круто и свежо. Но мы не смогли убедить SEO-специалистов пойти на такое решение. И всё же 98% наших идей увидели свет, а это большая редкость в таких сложных проектах.
Для нас редизайн блога видится как отправная точка для ребрендинга всего продукта. Мы заложили мощный фундамент для нового медиа. И приятно знать, что мы приняли в этом участие и не самое последнее.
Я доволен результатом. Итог после вёрстки не сильно отличается от макетов, а это важно для дизайнера.
Как понять, удался ли проект? У меня есть чёткий внутренний критерий: когда я открываю макет, а тем более готовую вёрстку, я забываю, что должен её окнуть и дать обратную связь. Вместо этого я, как обычный юзер, смотрю, кликаю, скроллю, читаю заголовки, разглядываю иллюстрации — живу внутри площадки. Если я забываю про роль «заказчика», если мне на площадке интересно и хорошо, значит, дизайн на меня сработал. Значит, сработает на всех.
В ходе работы я несколько раз ловил себя на мысли: да, вот это ровно то, что мы хотели. Хотели, но не могли чётко сформулировать, а ребята из Студии в итоге считали и дали идее правильную форму. Так было, например, с логотипом «Конверта», с основным шрифтом, с плиткой статей.
На мой взгляд, работа удалась. Я счастлив.
Всего на редизайн ушло 8 месяцев — от начала работ до релиза. Из них:
По срокам мы уложились в то время, на которое рассчитывали. Тем не менее, работы по редизайну ещё не закончены. В ближайшее время нам предстоит:
Оценить performance-показатели ресурса после обновления. Нам важно не потерять органический трафик, не уронить конверсию и не ухудшить другие KPI, которые стоят перед редакцией «Конверта». А в идеале — улучшить их.
Доработать некоторые мелочи в обновлённом дизайне. Эти незначительные правки — своеобразный косметический ремонт, который мы сознательно отложили на первую итерацию после релиза.
Какие-то мелкие, почти незаметные глазу читателя недочёты будут вылезать уже в процессе работы — когда мы начнём полноценно верстать и публиковать статьи в обновлённом дизайне, привыкать к нему.
Например, на этапе вёрстки внезапно поняли, что хотим сделать симпатичную заглушку на место блока с YouTube-видео — когда оно не прогружается у юзера.
Или вдруг при обновлении очередной статьи обнаружится старый блок, про который мы давно забыли и поэтому не отрисовали в новом дизайне.
Так что работы впереди ещё очень много.
Новый дизайн — не просто красивый и удобный. Он полностью соответствует нашему видению, стратегии и редполитике; хорошо отражает процессы трансформации из корпоративного блога в полноценное медиа, которые начались еще несколько лет назад.
Но расслабляться рано. У нас много идей по дальнейшему развитию, новым разделам, монетизации и дистрибуции. Также обсуждаем возможный переезд на отдельный домен (у решения немало плюсов, но и серьезные риски).
Как любитель аналитики очень жду, когда наберётся достаточно данных, чтобы можно было оценить влияние редизайна на разные показатели.
А ещё ребрендинг «Конверта», возможно, станет отправной точкой для масштабного редизайна бренд-платформы всего Unisender. Но это будет совершенно новая история.
Читайте только в Конверте
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно)