Содержание

    Создали единый стиль рассылки и удвоили кликабельность

    Кейс Hasttings

    Многие компании для коммуникации с клиентами и стимулирования продаж используют емейл-маркетинг. Частота рассылок зависит от стратегии и порой может достигать нескольких десятков и даже сотен в месяц.

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

    Что такое мастер-шаблон

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

    Мастер-шаблоны могут быть разных видов в зависимости от задач клиента:

    • только дизайн;
    • дизайн + HTML-вёрстка;
    • шаблон в конструкторе или модульном редакторе (например, Ampier).

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

    мастер-шаблон для емейл-рассылки

    Клиент и задача

    Перед нами стояла задача разработать мастер-шаблон для производителя спортивных тренажёров Hasttings. Рассылки у клиента были и ранее, но каждая была выполнена в своём стиле: над ними работали разные подрядчики, у которых не было единого шаблона. Различались и цвета, и шрифты, и отступы, и визуальные материалы.

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

    Процесс

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

    • хедер (шапка письма);
    • акционный баннер;
    • подвал письма с контактами, графиком и адресом.

    Вот как эти блоки выглядели в старых рассылках Hasttings:

    Устаревшая емейл-рассылка

    Список остальных блоков для новых рассылок помогли составить наши эксперты.

    1. Определяем цветовую гамму

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

    цветовая гамма емейл-рассылки

    2. Работаем со шрифтами

    В фирменном стиле Hasttings используются два шрифта: Artegra Sans Extended SC и Open Sans. Но при создании писем важно использовать для основного текста безопасные стандартные шрифты. Они есть в системе всех устройств, это гарантирует их корректное отображение.

    Для основного текста мы решили использовать Arial (из стандартных шрифтов он наиболее схож по начертанию с фирменным Open Sans). Для заголовков оставили фирменный Artegra Sans Extended SC, отлично передающий визуальную связь с сайтом.

    Набор шрифтов для емейл-рассылки

    Для удобного восприятия текста важно использовать ограниченное количество стилей шрифта.

    пример использования шрифтов в рассылке

    3. Дизайним кнопки и ссылки

    Мы предусмотрели несколько вариантов СТА:

    • акцентный контрастный вариант на чёрном фоне;
    • более спокойный на белом или сером (в зависимости от фона блока);
    • отдельный стиль кнопки с указанием цены на жёлтом фирменном фоне;
    • компактный вариант: ссылка с нестандартным оформлением.
    примеры CTA для емейл-рассылки

    4. Определяемся с визуалом

    Для баннеров мы разработали лаконичный дизайн с однотонным фоном фирменных цветов и фотореалистичными изображениями, также разработали вариант и с 3D-изображениями. Подобрали иконки, соответствующие гайдам.

    баннеры для емейл-рассылки
    иконки для емейл-рассылки

    Также мы учли технический момент, связанный с retina-дисплеями. Дело в том, что они обладают высоким разрешением и изображения фактической ширины письма (600 px) выглядят на них размыто. Чтобы картинки выглядели чётко, необходимо готовить их в двойном размере относительно фактического.

    5. Продумываем универсальные блоки

    Мы предусмотрели два варианта хедера:

    • с логотипом, телефоном, графиком работы и меню со ссылками на самые востребованные разделы сайта;
    • более лаконичный: с логотипом, телефоном и графиком работы.

      Хедер емейл-рассылки

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

      Футер емейл-рассылки
    Контентные блоки
    дизайн контентных блоков для емейл-рассылки
    дизайн контентных блоков для емейл-рассылки
    дизайн контентных блоков для емейл-рассылки
    Товарная сетка
    дизайн товарной сетки для емейл-рассылки
    дизайн товарной сетки для емейл-рассылки
    Промоблоки
    дизайн баннеров для емейл-рассылки
    дизайн баннеров для емейл-рассылки
    дизайн баннеров для емейл-рассылки
    Списки
    дизайн списков для емейл-рассылки
    Блок с графиком работы и контактами
    дизайн графика работы для емейл-рассылки

    Также мы предусмотрели несколько вариантов блока с цитатами и блок с видео.

    6. Адаптируем шаблон под мобильные устройства

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

    мобильная адаптация емейл-рассылки
    мобильная адаптация емейл-рассылки

    7. Учитываем тёмную тему

    Многие подписчики предпочитают тёмную тему на устройствах. По данным Litmus, её выбирают около 40% пользователей.

    Адаптация емейл-рассылки к тёмной теме

    Шаблон получился разнообразным, но в то же время выдержан в рамках фирменного стиля. В нём учтены все модели поведения современного пользователя (мобильная адаптация, тёмная тема, retina-дисплеи). Клиент остался доволен. Задача выполнена!

    Результат

    Мастер-шаблон помог Hasttings упростить создание писем и привести их все к единому стилю. Вот примеры рассылок, собранных по шаблону:

    пример емейл-рассылки для магазина
    пример емейл-рассылки для магазина
    пример емейл-рассылки для магазина

    Отзыв клиента

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

    • формирование узнаваемого стиля;
    • ускорение подготовки новых рассылок;
    • повышение вовлечённости читателей: средние показатели открытия писем и кликов выросли в два раза.

    Создание мастер-шаблона также совпало с разработкой нового сайта компании, и мы успешно подружили их друг с другом, выдержав единую стилистику в каждой детали.

    Готовые блоки помогли упростить работу над каждым новым письмом и сделать минимальным порог вхождения в работу для новых сотрудников. Мастер-шаблон однозначно был лучшим решением в 2022 году для выхода на новый уровень емейл-маркетинга.

    Ксения Шкляренко
    руководитель отдела маркетинга HASTTINGS

    КОМАНДА
    ПРОЕКТА

    Валерия Вернигора
    дизайнер
    Елизавета Тимонина
    менеджер проекта

    Что прокачает вашу рассылку?

    Расскажите о задаче — мы найдём решение
    Имя
    Корпоративный email *
    Array
    (
        [0] => WP_Term Object
            (
                [term_id] => 1475
                [name] => Кейсы
                [slug] => cases
                [term_group] => 0
                [term_taxonomy_id] => 1957
                [taxonomy] => category
                [description] => 
                [parent] => 1425
                [count] => 42
                [filter] => raw
                [cat_ID] => 1475
                [category_count] => 42
                [category_description] => 
                [cat_name] => Кейсы
                [category_nicename] => cases
                [category_parent] => 1425
            )
    
    )
    
    Поделиться кейсом
    Подписаться на рассылку