the-better-creative-case
16 августа 2023

Кейс: Как ведущее агентство email-дизайна улучшило разработку писем с помощью Stripo

Создать привлекательный дизайн писем
Оглавление
  1. О компании The Better Creative Agency
  2. Задача: выбор лучшего инструмента для создания писем
  3. Решение: как Stripo интегрирована в рабочие процессы агентств
  4. Рабочий процесс агентства в дизайне писем
  5. Результаты: преимущества и сильные стороны работы со Stripo 
  6. Бонус: ТОП-5 возможностей Stripo с примерами от The Better Creative Agency
  7. Планы на будущее и новые разработки
  8. В завершение
1.
О компании The Better Creative Agency

Команды графических дизайнеров, активно работающие над дизайном в сфере email-маркетинга, особенно требовательны к технологическому стеку, поскольку правильно подобранные инструменты могут значительно повысить эффективность работы. И наоборот, неправильно подобранные инструменты могут снизить качество дизайна и скорость работы.

Ивона Джорджевич из The Better Creative Agency

Ивона Джорджевич из The Better Creative рассказывает о том, как Stripo стала важной частью их рабочего процесса по разработке дизайна в области email-маркетинга, помогая быстро обеспечивать клиентов большим количеством отличных дизайнов писем.

О компании The Better Creative Agency

The Better Creative Agency специализируется исключительно на дизайне и разработке писем. Такая узкая специализация была выбрана совершенно сознательно и родилась из конкретной «зудящей» потребности.

Обнаруженная проблема

Изначально компания The Better Creative была частью Essence of Email, агентства стратегического email-маркетинга полного цикла. Essence of Email с самого начала осознала, что многие ее клиенты нуждаются как в стратегии, так и в ее реализации, а именно в разработке и запуске рассылок для них.

В поисках оптимального варианта для дизайна писем команда Essence of Email перепробовала множество комбинаций, таких как:

  • фрилансеры на заказ;
  • услуги по дизайну «на все случаи жизни»;
  • дизайнерские агентства.

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

Структура агентства, которая стала лучшим решением проблем

Поэтому в 2021 году они решили вынести услуги по дизайну писем в отдельный бизнес, и на свет появилась компания The Better Creative. Это позволило достичь оптимального качества услуг обоих агентств, поскольку Essence of Email может сосредоточиться на стратегии, в то время как потребности в дизайне писем могут быть легко удовлетворены The Better Creative.

С тех пор команда выросла до 11 человек:

  • 2 senior дизайнера;
  • 6 junior дизайнеров;
  • 2 QA тестировщика;
  • креативный директор.

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

Ивона Джорджевич, The Better Creative

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

Основные клиенты агентства делятся на две категории:

  1. Внутренняя маркетинговая команда бренда, которая хочет ускорить разработку, увеличить кликабельность и освежить дизайн.
  2. Другие digital-агентства и агентства email-маркетинга, такие как BellCurve и ForestCityDigital, которые хотят передать разработку дизайна писем на аутсорсинг, чтобы добиться ускорения сроков выполнения заказа, стабильно высокого качества и экономии средств.

Около 60% клиентов — представители индустрии eCommerce, остальные — B2B и SaaS бренды/агентства. В настоящее время компания занимается разработкой email-дизайна для 20 с лишним постоянных клиентов, и ежедневно к ним присоединяются новые.

Задача: выбор лучшего инструмента для создания писем

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

Они уже имели опыт работы со стандартными drag-n-drop редакторами в различных ESP, и основной трудностью, с которой они столкнулись, была недостаточная функциональность встроенного редактора для создания привлекательных и разнообразных писем.

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

Поэтому основными критериями, по которым они искали инструмент, были:

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

Решение: как Stripo интегрирована в рабочие процессы агентств

После тщательного поиска в январе 2021 года агентство остановило свой выбор на Stripo и с тех пор использует его.

«Мы изучили некоторые другие конструкторы, чтобы посмотреть, что они изменили с 2021 года, но ни один из них не соответствует уровню Stripo».

Ивона Джорджевич, The Better Creative

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

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

Рабочий процесс агентства в дизайне писем

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

Вот карта текущей схемы работы:

Карта рабочего процесса агентства

Определение

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

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

Клиенты заполняют типовой бриф, который рассматривается креативным директором или senior дизайнером агентства. Если задание достаточно четкое и подробное, оно передается на этап разработки с внутренними комментариями. В противном случае у клиента могут быть запрошены уточнения.

Создание и доработка

Затем дизайнер приступает к работе над первым проектом в Adobe XD, популярном инструменте графического дизайна. После завершения работы дизайнер воспроизводит визуальный дизайн в Stripo. Благодаря широкому набору возможностей Stripo этот этап не вызывает проблем, и таким образом преодолевается разрыв между «сырым» графическим дизайном письма и его оптимальным вариантом.

После завершения работы над проектом в Stripo он проходит этап проверки дизайна на соответствие креативному брифу. Затем следует QA, в ходе которого проверяются синтаксические проблемы и рендеринг, доступность, темный режим и мобильная оптимизация с помощью Email on Acid (EoA).

Кстати, Stripo интегрирован с Email on Acid, и вы можете проверять и просматривать свои письма прямо в нашем редакторе. Это удобно и позволяет еще больше ускорить процесс подготовки писем, поскольку вся проверка выполняется сразу после создания.

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

Stripo хорошо интегрирована в этот процесс, поскольку ссылка на Stripo передается внутри компании и клиенту во время прохождения проверки.

Финальная проверка

После полного одобрения клиентом проекта дизайна письма Stripo оно проходит финальную проверку качества и затем экспортируется из Stripo.

Многочисленные интеграции Stripo с популярными платформами email-маркетинга делают этот процесс очень простым. В основном агентство работает с Klaviyo и Omnisend, но также сотрудничает со многими другими почтовыми платформами, такими как SendGrid и SendPulse.

Экспорт обычно осуществляется просто: достаточно кликнуть на кнопку «Экспорт» и выбрать заранее интегрированный ESP. Эта функция оптимизирует код (минимизирует размер письма), сохраняя при этом качество. В ESP клиента письмо появляется в виде шаблона с аналогичным названием.

Иногда экспортируются варианты дизайна письма, позволяющие проводить А/Б сплит-тестирование.

В итоге клиент получает финальную тестовую версию, отправленную прямо ему на почту, и уведомление о том, что письмо полностью загружено и готово к рассылке!

Вот пример готового дизайна email-кампании:

(Источник: письмо от The Better Creative)

Такая организация рабочего процесса позволяет каждому участнику четко понимать свои задачи на каждом этапе разработки и быть эффективным. Благодаря этому команда ежемесячно выполняет более 400 дизайнов писем, причем каждый дизайнер создает 3-4 письма в день.

Важное примечание от команды Stripo

Для агентств, работающих с большим количеством клиентов в Stripo, доступно удобное хранение всех созданных писем. Stripo позволяет создать несколько проектов и хранить в них все письма. Вы можете получить к ним доступ в любое время, использовать повторно и т. д.

 

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

Результаты: преимущества и сильные стороны работы со Stripo 

После внедрения Stripo в рабочий процесс команда The Better Creative заметила увеличение кликабельности (CTR) и общее улучшение результатов кампании, в основном благодаря разнообразию контента и шаблонов, которые они могли использовать и с которыми могли экспериментировать.

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

Ивона Джорджевич, The Better Creative

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

Ключевые преимущества использования Stripo:

  1. Редактор кода очень прост в использовании, что является огромным плюсом.
  2. Мобильная версия оптимизирована лучше, чем у различных ESP.
  3. В большинстве встроенных в платформы email-маркетинга конструкторов писем нужно пройти несколько шагов, чтобы загрузить изображение, в то время как в Stripo вы можете перетащить его прямо с компьютера в редактор. Одним словом, функции, позволяющие ускорить производство.
  4. Гораздо больше возможностей для форматирования текста и надписей.
  5. Функция «Скрыть на мобильном» хорошо работает с Klaviyo и другими ESP.
  6. Наличие отдельных модульных блоков шаблона «Блок>Контейнер>Структура>Полоса» — это потрясающе, так как дает множество возможностей для настройки каждого элемента дизайна.

Бонус: ТОП-5 возможностей Stripo с примерами от The Better Creative Agency

Вот некоторые особенности Stripo, которые больше всего понравились The Better Creative Agency.

1. Отдельные закругления углов на структурах.

Пример отдельного закругления углов

(Источник: дизайн письма от The Better Creative)

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

Пример письма с фоновыми изображениями

(Источник: дизайн письма от The Better Creative)

Вот еще один пример этого функционала:

Как вставить текст поверх изображения

(Источник: дизайн письма от The Better Creative)

3. Слайдер для размера контейнера внутри структуры вместо того, чтобы просто задавать 50/50 или 25/75.

В этом примере показано, как в редакторе Stripo задать пользовательский размер контейнера.

Как настроить размер контейнера

(Источник: дизайн письма от The Better Creative)

В качестве примера можно привести 50/50, который может служить для сравнения:

Пример размера контейнера 50/50

(Источник: дизайн письма от The Better Creative)

Приведем пример с различными кастомными размерами контейнеров.

Различные кастомные размеры контейнеров

(Источник: дизайн письма от The Better Creative)

4. Отличное мобильное форматирование блоков и контейнеров.

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

Мобильное форматирование блоков

(Источник: дизайн письма от The Better Creative)

5. Rollover-эффекты в блоках товаров.

Rollover-эффекты в блоках товаров

(Источник: дизайн письма от The Better Creative)

Вот еще один пример использования rollover-эффекта:

Пример rollover-эффекта в шаблоне письма

Планы на будущее и новые разработки

На сегодняшний день The Better Creative Agency работает преимущественно в рамках основных фреймворков дизайна писем. В ближайшем будущем они планируют расширить внедрение AMP и Google Annotations, поскольку эти функции получают все большую поддержку.

В завершение

Вот некоторые ключевые моменты, которые помогли The Better Creative стать ведущим email-дизайн агентством и сделали Stripo неотъемлемой частью рабочего процесса разработки писем в агентстве:

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

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

Создавайте привлекательный дизайн писем с помощью Stripo
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
2 комментариев
Ivona Djordjevic 1 год назад
Hi Cheshire Isaacs, We don't design the whole email in XD, the designers just use XD for creating hero images/banners/product images/etc. Then we make the email in Stripo and insert those images where needed. Hopefully this explains it a bit better!
Cheshire Isaacs 1 год назад
Why use XD to start with? Why not just start with Stripo? It would save time and make sure you're not designing something that *can't* be replicated in Stripo. I don't get the advantage.
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.

Редактор Stripo

Для команд специалистов по email-маркетингу и индивидуальных разработчиков писем.

Плагин Stripo

Для продуктов, которые могут эффективно использовать интегрированный white label конструктор писем.