Спецпроект по созданию новогодних открыток
На кануне 2016 года мы с командой EMAILMATRIX создали маленькое чудо — новогоднюю кампанию для «Райффайзенбанка». В этой статье я поделюсь опытом и идеями реализации интерактивной открытки, которая подарила много радости под Новый год!
Об идее
Модными трендами позапрошлого года стали тесты, рассказы о том, как прошёл год с компанией, генерация открыток и поздравление ими своих друзей, коллег по цеху, родственников. Среди банков наблюдалось негласное соревнование, кто креативнее поздравит своих клиентов. Так, например, команда Сбербанка предлагала пройти тест, чтобы определить, какой новогодний бизнес вам подходит. «Тинькофф банк» предлагал занимательный калькулятор расходов/доходов за год в весёлой, шуточной форме.
Мы разработали интерактивный конструктор открыток, и меньше чем за месяц было создано более 10000 открыток!
О реализации
Конструктор открыток позволял создать открытку-поздравление на Новый год и отправить её по почте другу.
Мы определили 3 стиля для открыток: аппликация, хипста-стиль и привычный фотоколлаж.
Сначала мы задумали, что на открытках пользователи будут менять персонажей и фоны, но потом мы предусмотрели возможность перемещать и масштабировать все объекты, а также добавлять музыкальное сопровождение и визуальные эффекты. Особенно хочется отметить стиль фотоколлажа, где мы сделали размещение изображений по сетке (drag&drop).
Что в итоге получилось
Попадая в конструктор, пользователь выбирает стиль открытки, которую он хочет создать. Призыв «Создать шедевр» манит всех ценителей творческого процесса:
Открытку можно было просматривать на компьютерах и планшетах. При меньшем разрешении мы показывали «заглушку»:
Нашей задачей было получить больший охват всевозможных браузеров.
Элементы масштабировались, и большая часть из них представляли из себя векторные (а не фотографические) изображения, первоначально мы думали использовать svg-графику, что позволило бы без потери качества управлять размерами, однако на практике оказалось, что svg с большим числом узлов «вешают» компьютер, делая работу сайта неплавной и не очень комфортной. Поэтому svg мы оставили лишь для простых элементов, для остальных же использовали png.
Далее пользователю предлагалось выбрать один из понравившихся стилей: фотоколлаж, аппликация или хипста-стиль.
Проработанная нами механика была аналогична для всех стилей.
Наполнение открыток отличалось набором размещаемых на них элементов:
Для большей прозрачности интерфейса мы добавили экран навигации по каждому стилю, чтобы пользователь мог быстро сориентироваться, с чего начать создание своего шедевра:
Рассмотрим каждый стиль в деталях.
Фотоколлаж
Пользователь составлял коллаж из заготовленных элементов, выбирал фон. Отличие его от других элементов в том, что фоны замещали друг друга, а не накладывались:
Для удобной работы мы предусмотрели возможность перемещения объекта drag&drop и добавления с помощью клика на желаемом объекте.
Необходимо было выбрать сетку, в которую перетягивались объекты из раздела «украшения», они появлялись при переходе на следующий шаг. Наряду с украшениями были доступны различные формы внутри коллажа, в которых размещался поздравительный текст, который возможно было форматировать.
Пользователь мог выбрать готовые варианты открыток из раздела «заготовки». В любой момент можно было очистить холст и наполнить его новым содержимым, а также изменить текущий стиль на другой из трёх представленных.
Выбираем эффекты и музыкальные дорожки — и до отправки открытки остаётся финальный шаг.
Кнопка «Отправить» вызывала окно с финальным вариантом открытки, который можно посмотреть в режиме «предпросмотр», ввести емейл друга, отправить по почте или в социальных сетях:
При разработке стиля «фотоколлаж» были заложены общие принципы работы, но вместо фонов мы использовали набор модульных сеток. Важно было учесть то, что все фотоэлементы должны находиться строго внутри сетки, не выходя за границы. При перетаскивании элемента из одной ячейки сетки в другую нужно было очищать ячейку от старых фотографий и пересчитывать размер и положение для вставляемого изображения, чтобы он максимально эффективно занимал площадь.
Аппликация
Здесь был весёлый Дед Мороз, подарки, ёлки.
Пользователи перебирали элементы и накладывали музыку:
В предпросмотре также доступна полная версия открытки с эффектами и музыкальным сопровождением:
Хипста-стиль
Открытки создавались по такому же принципу, но отличались стилистикой — для особых гурманов и ценителей бород, очков и клетчатых рубашек:
Результаты
Конструктор был запущен за две недели до Нового Года. В момент запуска проекта было отправлено письмо по базе «Райффайзенбанка» с поздравлением и CTA «Создать шедевр открытки».
Продвижение происходило в соцсетях и c помощью емейл-канала.
Пользователи делились открытками в Fb и во «ВКонтакте», отправляли их по электронной почте.
- Всего было создано 11830 открыток.
- Всего было осуществлено переходов с почтовых рассылок — 53,1 %
- Внутренние переходы — 4,7 %
- Переходы из соцсетей — 11,5 %
- Прямые заходы — 30,3 %
Самым популярным стилем стала аппликация, на втором месте хипста-стиль, третье место — фотоколлаж.
Чаще всего пользователи делились открытками в ВК.
Диаграмма открытий по типу устройств показала, что чаще всего пользователи заходили с персональных компьютеров:
Весь процесс создания открытки стал хорошим опытом и очень приятным проектом под Новый год! С радостью поможем разработать новогоднее поздравление для вашего бренда к следующим праздникам. C наступившим!
Посмотреть, как создать шедевр, с самого начала можно в видео.
