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

Меня зовут Ольга Воронина, я — старший дизайнер в Ozon. В этом кейсе хочу рассказать, как мы сделали свой конструктор писем, в чём его плюсы и почему внешние конструкторы для нас — не самый подходящий формат.

Проблема

В Ozon десятки подразделений — коммуникация между отделами требует времени, которого всегда не хватает. Унифицировать рассылки не получалось, и письма от разных отделов часто выглядели по-разному — не было ощущения, что они приходят от одной компании. Да и дизайн уже устарел. Цвета, кнопки, шапка и тональность — все это могло отличаться от письма к письму. И каждый раз работа занимала слишком много времени: от идеи до самой рассылки могло пройти две недели.

Что нужно было сделать:

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

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

Сначала сделали единый дизайн

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

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

Такая единая система ускорила процесс разработки — письма делались быстрее и у всех них был стиль Ozon.

Сначала все шло хорошо, но потом мы заметили, что отделы начали делать довольно похожие письма. Нужно было снова что-то менять.

А потом появился конструктор писем

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

В конструкторе можно было:

• Проставить тему и прехедер.
• Задать utm-метки для ссылок.
• Сверстать полностью адаптивное письмо из готовых блоков.
• Выбрать цвет блока, его размер и внести изменения, которые будут органично укладываться в общий стиль писем Ozon.
• Скачать HTML готового письма, чтобы загрузить его в сервис рассылки или CRM-систему.

Рассылку стало возможно создать за 15 минут — и для этого не нужны были дизайнеры и верстальщики. Любой менеджер может прийти в конструктор и сверстать красивое письмо в стиле Ozon.

Мы изучили отзывы коллег и уже начали работу над второй версией конструктора писем.

Вместо вывода

В каких случаях стоит задуматься о своем конструкторе писем:

1. Когда нужно придерживаться фирменного стиля. Свой конструктор подойдет большим компаниям, которым важно придерживаться в рассылках фирменного стиля . В таком сервисе просто не будет лишних элементов и цветов — менеджеры и дизайнеры будут собирать рассылки из заранее продуманных блоков. Но это не значит, что все письма будут одинаковыми — макет можно разнообразить с помощью уникальных картинок, коллажей текста.
2. Если нужно сэкономить время. Редактор тратит меньше времени на создание писем — не нужно неделями согласовывать дизайн и верстку. Можно прийти в конструктор и собрать письмо из готовых блоков. Например, у нас на сборку обычных писем сейчас уходит около 15 минут.
3. Чтобы разгрузить разработчиков. Верстка писем — довольно рутинное занятие, особенно когда макеты писем похожи. Блочный редактор поможет разгрузить верстальщиков, чтобы привлекать их для решения других задач.