Кейс: кривые иллюстрации на коленке против современного дизайна
Результаты A/B-теста в конце статьи.
Я разрабатываю конструктор лендингов Creatium. Мы используем готовые шаблоны страниц и секций — это отличный инструмент для быстрого создания сайтов, который, правда, приводит к тому, что сайты получаются похожими друг на друга.
Страдают этим все конструкторы, и даже студийные сайты иногда выглядят так, слово сделаны по шаблону.
В этой статье я покажу быстрый и дешёвый способ разрушить оковы шаблонов и сделать оригинальный сайт.
Настолько плохо, что даже хорошо
Запускал небольшой бесплатный курс по программированию. Сделал сайт в своём же конструкторе, но вместо стандартных шаблонов решил нарисовать нечто этакое.
Рисовать я не умею, но это меня не остановило. На следующий день у меня был готов сайт с чудесными иллюстрациями.
Технология изготовления иллюстраций
Шаг 1. Найти лист A4 и ручку. Нарисовать иллюстрацию, не взирая на отсутствие таланта к рисованию.
Шаг 2. Сфотографировать так, чтобы свет падал равномерно.
Шаг 3. Обесцветить и максимально увеличить контраст в фотошопе.
Шаг 4. Свести фон к белому цвету инструментом «Уровни».
Шаг 5. Наложить подходящий текст.
A/B-тест
Параллельно я попросил дизайнера нарисовать вариант сайта в современном дизайне. Мы его тоже сверстали и устроили испытание лидами.
Вот вариант дизайнера.
Источник трафика — публикация в «Типичном программисте» во «Вконтакте».
Победила дружба
По итогам теста с отрывом в полтора процента победил вариант дизайнера — стильный и современный. Но кривые иллюстрации на коленке делать дешевле.
Боюсь, у вас просто получились хорошие иллюстрации.
Я старался.
Не хватает варианта вообще без картинок, просто с текстом. Может вообще ничего рисовать не надо было.
Нет. Вот эти каракули на самом деле вин. Реально
Нужно сравнивать не 2 совершенно разных лендинга, а один и тот же лендинг с разными иллюстрациями - один вариант с иллюстрациями от дизайнера, второй - рисованные.
Сейчас это сравнение несравнимых вещей.
Комментарий удален модератором
Пока не посмотрел сами тесты думал, что сравниваются варианты иллюстраций на коленке vs профессиональные. На самом же деле варианты радикально отличаются по объему и логике подачи информации причем авторский вариант в этом плане сильно выигрывает.
Интересный тест :) По расположению блоков версии совпадали? На скриншоте версии дизайнера этапы работы расположены так, что сложно понять их порядок. Возможно, подобные моменты сказались на конверсии.
Не совпадали. Разница не только в иллюстрациях, но и в структуре тоже была.
В разделе A/B тест есть ссылки на оба варианта - можно сравнить.
Точно, сразу не заметил ссылки. Похоже дело в том, что у вас значительно лучше продумана структура, проще написан текст, правильно расставлены акценты и в иллюстрациях заложены понятные метафоры. Но в целом вывод из статьи верный: жить можно и без хорошей отрисовки :)
Если бы на сайте дизайнера была отрисовка, то да. А так иллюстрации видно только у автора на сайте. :)
Вячеслав, Creatium это ребрендинг ПлатформыLP или отдельный самостоятельный конструктор?
Отдельный самостоятельный конструктор.
хм, а в чем смысл его существования, если по факту это копия редактора из Платформы LP ?
Это не копия — это и есть тот самый редактор, поскольку я являюсь его разработчиком.
Смысл в другом развитии, отличном от Платформы. Сейчас проекты похожи, но скоро все изменится.
То есть вы разошлись с платформой и теперь будете делать свой новый конструктор?
Планируется ли возможность трансфера страничек к вам?
Мы все еще дружим с Платформой, но выбрали два разных вектора развития. Я буду двигаться в сторону машинного обучения и алгоритмов автоматического повышения конверсии. На Платформе есть отдельное видение.
Типа Лилу и Ватсхэлпа?
Трансфер возможен, но с ограничениями. Нужно в поддержку написать.
О чем пост?) Как я понял просто надо было что-то написать... Ну ок.
Нативная реклама конструктора, конечно же.
Тут скорее конверсия "выплывала" из предложения, иллюстрации вряд ли влияли на это. В двух вариантах адекватная типографика, стильный шрифт, это смотрится, легко воспринимается и читается. Хотя в варианте от дизайнера серый шрифт на сером - такое себе. Мне вот больше понравился вариант "А" - иллюстрации от руки.
Я бы сделал больше демонстраций и примеров - что сможете делать, где применять, какие задачи можно решить с помощью нашего курса (и редакторов, которые мы учим делать). Думаю конверсия станет еще лучше.
Значимой разницы нет, но тут качество иллюстраций компенсируется тем, что свой вариант делал сам автор. Автор гораздо лучше доносит ценность.
Насколько честный A/B тест? С какой периодичностью были сделаны публикации в паблике ТП? Как отразился тот факт, что часть аудитории, увидевшая первую публикацию не перейдут по второй? Есть скрины, как выглядел рекламный пост? Креатив один и тот же?
Была сделана одна публикация, пересечений между вариантами не было, поскольку первый открытый вариант запоминался в куках, и в дальнейшем открывался только он. Скриншот рекламного поста прилагается.
То есть просто поменяли дизайн страницы входе увеличивающегося траффика?
Нет. Первый посетитель видел вариант "А". Второй посетитель видел вариант "Б", и так дальше по очереди.
А как это технически реализовано, если не секрет?
В конструкторе сайтов делал с поддержкой A/B тестов
Комментарий недоступен
Я так с 2002 делаю😆
Смешной эксперимент, хоть и не оч чистый: вы-то уже знаете основы UX/UI, где какие элементы и как более мнеее расположить, есть то что называется "профессиональная настроенность". У человека далекого от веб-разработки получилось бы хуже.
Тоже решил попробовать делать иллюстрации вручную. Правда для рисования использовал графический планшет.
http://rusartdesign.ru/st/%D0%B1%D0%B5%D1%81%D0%BF%D0%BB%D0%B0%D1%82%D0%BD%D0%B0%D1%8F-%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%B1%D0%B8%D0%B7%D0%BD%D0%B5%D1%81%D0%B0/
Получилось еще корявее, но пользователям нравится. Может быть в этом и есть изюминка
Тоже пробовал планшет, но в итоге пришел к бумаге - результат получается менее компьютерным. Более живым)
http://joxi.ru/p27nQo9iod1eYm
Разница в уровне конверсии не является пока что статистически значимой.
Другое дело, что без дизайнера срезаются косты :)
Спасибо за туториал по иллюстрациям.
Уау! Спасибо за идею 😘
Думаю идея изображения намного важнее подачи.
Это не A/B тест. Это SDFVDBSGJHS/IUTTDGFBDAWEH тест.
Не уверен, что эти ленды можно сравнивать на этом этапе, но если сравнить качество конверсии, то да. Авторский ленд эмоционален и показывает выгоду сразу, единственное, не видать на чем будет написан редактор (я имею в виду сразу на обложке, я бы если увидел php или ruby, закрыл бы и забыл, а тут надо еще копаться). В целом при таком посещении можно было бы добить большего количества заявок, если добавить всему этому ценности (показать автора, объяснить кто он такой, какие технологии будут использованы).
Но иллюстрации шикарные, возьму на заметку идею:)
Для большей скорости и удобства есть смысл использовать в таких целях графические планшеты Wacom. Аккурат для таких же целей приобрел себе недавно. Рад встретить единомышленников) Лайк.
Пробовал на айпаде, но результат выходил не таким душевным)
Что это было?
Нативная реклама очередного конструктора сайтов для адептов БМ. Ваш кэп
Я бы ещё добавил, что в ВК больше пользуются мобильными устройствами, а лендинг дизайнера не очень читальный с моб версии. Хотя идея мне понравилась, нужно будет протестировать отдельно.
http://oknaludyam.ru идея не нова, конечно. Думаю я бы сконвертнулся на такой лендос скорее.
Это потому что и вы и дизайнер использовали одну и ту же причину для конверсии: простоту достижения и понятность цели. И различие было только в том, что вы по психотипу конструктор, а он, как и любой дизайнер, рефлектор, поэтому форма для этого приёма была чуть-чуть более разная (минимально), вместо цели вы использовали счастье в конструктивном его понимании. Вам стоило бы попытаться подумать над принципиально другими приёмами, если хотите настоящие А\Б тесты, которые позволяют понять объективные причины продаж, дело же не в самом соревновании кто прав ради просто соревнования, верно?
С вашего сайта внизу лендоса: "Будут еще курсы, более простого и более сложного уровня."
запятая не нужна