Как сократить затраты на email-маркетинг при помощи дизайн-системы и мастер-шаблона

Объясним, что такое дизайн-система рассылок и мастер-шаблон. Как они влияют на экономику рассылок. Почему это доступно не только большим компаниям. Сколько времени занимает сборка рассылки и куда делся верстальщик.

Привет. Меня зовут Никита. Я развиваю агентство email и CRM-маркетинга ollo. Помимо разработки стратегии, настройки в платформе и аналитики, немалую часть нашей работы занимает создание дизайн-систем рассылок и последующая сборка мастер шаблона на их основе.

За это время мы столкнулись с двумя мифами, которые хотим развеять в этой статье:

• Дизайн-система – это сложно. Чтобы собрать рассылку нужен специалист извне, а это значит👇
• Дизайн-система – это дорого. Мы сейчас не готовы к таким вложениям, может быть когда-то потом.
  

Несмотря на слово “дизайн” в заголовке, это статья написана не для дизайнеров. В ней не будет речи о пошаговом создании ДС в Figma.

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

Для простоты мы будем использовать аббревиатуры ДС и МШ для дизайн-системы и мастер-шаблона соответственно.

О чем поговорим

1. Немного матчасти: что такое ДС и МШ;
2. Почему разработка ДС и МШ – это несложно;
   
3. Экономика рассылок с учетом ДС/МШ и без нее;
   
4. Как понять: вам нужны ДС/МШ или нет;
   
5. Как мы разрабатываем ДС и МШ.
   

Для тех, кто не любит лонгриды, я подготовил пару слайдов с краткими выводами, велком.

Дизайн-система — набор базовых стилей, таких как: цвета, шрифты, иконки, иллюстрации. Плюс правила оформления, расположение элементов. Все это мы на старте проекта собираем в Figma и используем в дальнейшем.

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

Концепция ДС стала особо популярна 5-6 лет назад с развитием продуктовых интерфейсов, мобильных приложений и технологических стартапов. Основная задача, которую она решала – оптимизация работы для дизайнера и стандартизация интерфейса для продукта.

Потом эта концепция перешла во все смежные сферы в том числе и емейл-рассылки. Дизайнер также тратит меньше времени на сборку рассылки, а письма имеют общую стилистику. Есть лишь одно отличие: в случае с рассылками не обязательно быть дизайнером, чтобы собрать письмо. По сравнению с веб-интерфейсами, рассылки более простой формат.

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

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

Получается что ДС создается на самом старте проекта. Дизайнер в фигме собирает все составляющие ДС, а затем на их основе создает блоки для мастер шаблона (тоже в фигме). Как только согласуется дизайн блоков мы переходим к разработке МШ в блочном редакторе или HTML.

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

Звучит сложно, но на деле это не так. Расскажем почему.

Поскольку ДС пришла в рассылки из разработки сложных (и не очень) интерфейсов, остается ощущение, что это тоже что-то сложное. В работе над веб-интерфейсами или мобильными приложениями ДС часто создается с нуля. Над ней работают сразу несколько человек и она имеет свойства масштабироваться и адаптироваться под новый функционал продукта.

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

Получается что в 90% случаев дизайнер не изобретает ДС с нуля. Он адаптирует существующие стили под формат рассылок. Так как в рассылках есть свои особенности: ограниченное количество используемых шрифтов, ширина письма в 600px, скупой выбор интерактивных элементов и тд.

Бывает что сайт морально устарел, но письма хочется сделать под стать новым трендам. Не проблема. В таком случае мы делаем ДС максимально универсальной и подходящей под характер компании, продукта и аудитории.

Это что касается ДС. С мастер-шаблоном немного другая история. Основная проблема, с которой часто сталкивается клиент — нехватка блоков для сборки новых писем.

Например, в начале проекта мы сделаи мастер-шаблон исходя из контента для 3-4 видов писем: простое welcome-сообщение, письмо с сеткой товаров, письмо с акцией и транзакционное письмо (чек). Спустя пару месяцев клиент хочет отправить пользователям письмо с акцией к празднику, а в мастер-шаблоне нет нужных блоков.

В этом случае у нас есть 2 опции:

• При создании МШ мы создаем несколько “лишних” блоков на потом, исходя из специфики компании и нашего опыта.
• Если их тоже недостаточно, предлагаем клиенту добавить эти блоки на платной основе. По итогу это все равно получается дешевле, чем сделать письмо целиком.

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

Чтобы понять, насколько письмо с учетом МШ/ДС дешевле, сначала разберем сколько стоит среднестатистическое письмо. Возьмем по минимальному прайсу на рынке, исходя из часовой ставки специалиста. Для того чтобы собрать и запустить рассылку на нужно:

• Текст - 2ч - 3000
• Дизайн - 2ч - 3000
• Верстка - 2ч - 3000
• Настройка/тест/отправка - 1ч - 1500
• Аккаунтинг - 1ч - 1500
• Итого: 12000 руб.
  

И это простое письмо, без креатива и многочисленных согласований.

Мастер-шаблон позволяет сэкономить на верстке и дизайне. На вёрстке мы экономим за счет того, что собираем письмо в блочном редакторе или выгружаем архивом через плагин Figma, который генерит нам готовый HTML-код. А в дизайне мы экономим на времени. Дизайнеру в этом случае не нужно сильно креативить, стоит лишь собрать письмо из готовых блоков.

В этом случае получаем примерно следующее:

• Текст - 2ч - 3000
• Дизайн - 1ч - 1500
• Верстка - 1ч - 1500
• Настройка/тест/отправка - 1ч - 1500
• Аккаунтинг - 1ч - 1500
• Итого: 9000 руб.
  

Казалось бы, разница всего в 3000. Но с бюджетом 36000 без МШ мы можем сделать 3 письма, а с МШ – 4. Если учесть, что у нас несколько цепочек сообщений, в каждой из которых минимум по 3 письма, мы можем сэкономить на целой цепочке. Это уже ощутимый результат.

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

В этом разделе мы приведем по два примера, кому нужно использовать МШ, а кто может обойтись без него.

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

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

А теперь расскажем, кому точно нужен мастер-шаблон.

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

Работа в долгую подразумевает несколько сценариев рассылок и последующее добавление новых писем.

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

Шаг 1: Первым делом мы запрашиваем у клиента исходные материалы: брендбук, UI-кит в фигме или просто ссылку на диск со всем тем, что можно как-то использовать в работе. Если ничего из этого нет, идем на его основе начинаем работу над ДС.

Шаг 2: Приступаем к созданию ДС. Прописываем заголовки, цвета, иллюстрации, изображения, сетку, систему отступов. Параллельно с этим согласовываем с клиентом контент первых писем и механику рассылок.

Шаг 3: Как только все готово и согласовано, начинаем собирать блоки мастер шаблона. Часто, первые пару писем мы собираем без блоков и показываем клиенту. Это позволяет “примериться” и понять что попали в ожидания клиента. Да и в целом, когда есть несколько примеров, легче собирать блоки для МШ.

Шаг 4: Согласуем все блоки в дизайне, а затем переносим в верстку. Если верстать будем через блочный редактор — собираем блоки там. Если не через блочный, выгружаем HTML-верстку и загружаем архивом в платформу.

Шаг 5: Пишем инструкцию для клиента и проводим обучение по платформе + отдельное обучение по использованию МШ. Даже если клиент в будущем собирать и отправлять письма самостоятельно, первые несколько писем помогаем собирать руками.

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

У нас есть проекты, где мы не делали мастер-шаблон, но все равно получили хороший результат. Как для бренда одежды и аксессуаров Captain's Mate. Кстати, после этого проекта мы сделали еще и мастер-шаблон. Теперь клиент самостоятельно собирает рассылки.

Кейс Captain’s Mate: Как рассказывать о бренде в приветственном письме

А если вам захочется узнать больше о email или crm-маркетинге, приходите в наш тг-канал. Там мы простыми словами рассказываем об этой сфере и показываем, как работаем над проектами.