Cобираем письма как конструктор и экономим полмиллиона рублей

Кейс Ситидрайва.

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

CRM-менеджер отправляет одно-два письма в неделю пользователям Ситидрайва. В предпраздничную пору или во время акций это количество может возрастать до восьми-десяти — например, если предусмотрено несколько призов или подарков для разных категорий пользователей.

Сперва письма для Ситидрайва верстали специалисты агентства-подрядчика, руководствуясь брендбуком. Подготовка одного письма с учётом всех правок могла занимать до двух недель. И каждое письмо стоило Ситидрайву несколько тысяч рублей. Платить приходилось не только за дизайн, но и за вёрстку простых блоков. Это объяснимо: в агентстве свой поток задач, спринты, скорость работы и правила. Но результат нам не всегда подходил.

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

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

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

Сейчас в каждом письме есть четыре основных блока: заголовок (Lead), первый абзац (Header), основная часть (Body) и футер со ссылками на социальные сети (Footer).

Lead. Это постоянный, фиксированный блок с логотипом. Мы сделали два варианта выключки (расположения текста): влево и по центру.

Header. Если проще — это микс из картинки, заголовка, абзаца и кнопки. Мы сделали несколько вариантов этого блока: стандартные и поярче для промо-рассылок. Любой из элементов, например, кнопку, можно выключить при необходимости. Header может быть как с белым, так и с цветным фоном: фирменным зеленым или фиолетовым.

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

Footer. Блок с копирайтами и ссылками на социальные сети, гиперссылка для отписки.

После проработки всех блоков у нас получилось:

— 6 вариантов баннеров (lead-блоки);

— 6 вариантов хедеров;

— 30+ вариантов контентных блоков (с картинками/промокодами/кнопками и другими элементами);

— 2 варианта футера.

Все эти блоки сверстали в html-страницу.

Блоки Header и Body всегда фиксированы по ширине и расположению, но «резиновые» по высоте. Мы решили ввести простую систему отступов в контенте, кратную 8px. Если нужно больше, то отступ может быть 16, 32, 40 или 64px. Чётные цифры в этом пункте важны, чтобы было проще масштабировать блок. Например, если нужно уменьшить стандартный отступ в два раза, мы сокращаем его до 4px. С нечётным числом деление было бы дробным, и это может осложнить работу. Отступы между блоками — только 32px, исключение — отступ между Header и первым блоком, который всегда равен 0px.

Шаблоны писем мы разбили на блоки таким образом, чтобы из них можно было «собрать» любое послание за считанные минуты. Все шаблоны продублировали и для мобильной версии.

В результате мы получили шаблоны с выверенными до последнего пикселя размерами и шрифтами. Теперь исключена ситуация, когда письмо в почте у пользователя на десктопе или на смартфоне, например, не помещается в экран. Также удалось решить проблему с тёмной темой. Раньше блоки с логотипом на фиолетовом фоне непредсказуемо конвертировались в разных почтовых клиентах. Порой логотип было просто не видно. В новых шаблонах проблему решили: вместо HEX-кода (обозначение цвета вида #000000) стали использовать фон с картинкой нужного цвета.

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

На изготовление писем с помощью конструктора Ситидрайв перешел в начале 2022 года. Мы всё ещё экспериментируем с блоками и обновляем их раз в 1-3 месяца по необходимости, а также продолжаем оптимизировать работу в модульном редакторе.

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

Ещё мы совместили три блока в один — логотип, заголовок, картинка. Вроде, мелочь, но при изготовлении писем также можно сэкономить время на сборке этих трех составляющих.

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

Уже год письма Ситидрайва создаются быстро, просто и с предсказуемым результатом. Над макетами работают четыре дизайнера. У кого меньше загрузка, тот и подключается к задаче. А собирает письма в модульном редакторе CRM-менеджер самостоятельно — для работы теперь не нужно знать html. Также доступ есть у копирайтера — он может поправить текст конкретного письма при необходимости. Ему в помощь в редакторе есть встроенная проверка орфографии и ссылок.

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

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

А главное — срок подготовки любого, даже самого сложного письма сократился с двух недель до 1-2 дней, а иногда удаётся управиться и за час. Один дизайнер может подготовить в день десяток писем. Благодаря этому мы отказались от агентства в части дизайна и верстки писем и сэкономили минимум полмиллиона рублей только за 2022 год.

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

Чтобы работа с конструктором была эффективной, советую придерживаться нескольких принципов: