Дизайн-система — для быстрой сборки писем
Дата: 21 марта 2023
Задача
Изменить дизайн всех писем на проекте группы «Самолет» — федерального девелопера, который строит жилые комплексы по всей России.
Срок
Один месяц
Результат
Дизайн-система, которая помогает быстрее собирать не только письма, но и другие визуальные продукты.
Команда проекта
Даниил Свистунов
дизайнер
Владимир Балакин
CRM-маркетолог
Клиент обратился к нам с запросом сделать несколько промописем и освежить дизайн. Мы решили, что оптимально будет смэтчить визуал с сайтом. Собрали несколько первых писем, дизайн клиент одобрил.
Клиент попросил раскатать новый дизайн на все остальные письма, и мы начали работать над массовыми рассылками. Поняли, что нас ожидает и работа над всеми триггерами, добавление новых писем и обновление других цепочек.
Решили делать не письма, а дизайн-систему
В процессе мы поняли, что письма по структуре однообразны, и мы можем унифицировать процесс, а именно: собрать дизайн-систему — библиотеку блоков, которые часто используем. Так создание писем в будущем будет проходить быстрее, а верстать их будет проще.
В целом, дизайн-система — это набор правил и компонентов, собранных в единую библиотеку.
Клиенту нужно было запустить проект как можно скорее, поэтому мы предложили согласовать основные элементы и блоки, а дальше вносить мелкие коррективы в вёрстку.
Анализ
Собрали в одном макете все письма, которые были сделаны в новом дизайне. Этот шаг нужен, чтобы видеть сразу все блоки, сравнить друг с другом элементы в разных письмах и понять, какие оставляем. Обсудили, как и что будет лучше ложиться на вёрстку, стандартизировали типографику, отступы, цвета и положение элементов.
UI-кит
Из всего этого подготовили UI-кит — те элементы, из которых собирают готовый дизайн-продукт.
UI-кит из дизайн-системы для «Самолета»
Реализация
Продолжили работу над письмами: в готовых макетах выделили все повторяющиеся блоки и собрали их в единой библиотеке.
Баннеры и информационные блоки из дизайн-системы «Самолета»
Со временем на проектах может меняться команда, поэтому с такой библиотекой или дизайн-системой намного проще ввести в курс дела нового дизайнера и передать ему работу.
Вывод
Главная задача состояла в том, чтобы сделать большое количество писем за короткий промежуток времени, и только подобный подход — стандартизировать и согласовать ключевые элементы и блоки, позволил быстро и качественно собрать письма на потоке.
Решение экономит время исполнителей и заказчика — не нужно согласовывать визуал каждого письма, а согласованный с клиентом текст можно вставлять сразу в вёрстку.
За месяц собрали библиотеку элементов, которые можно использовать не только только в email-маркетинге, но и собирать с их помощью дизайн сайта, внедрять в систему мессенджер-маркетинга и других диджитал-проектов.
Подписывайтесь на обновления
Узнавайте об обновлениях в блоге первым
Отправляем только свежие статьи и кейсы