Кейс: кривые иллюстрации на коленке против современного дизайна

Результаты A/B-теста в конце статьи.

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

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

Вероятно, один из этих блоков пробрался и на ваш сайт

В этой статье я покажу быстрый и дешёвый способ разрушить оковы шаблонов и сделать оригинальный сайт.

Настолько плохо, что даже хорошо

Запускал небольшой бесплатный курс по программированию. Сделал сайт в своём же конструкторе, но вместо стандартных шаблонов решил нарисовать нечто этакое.

Рисовать я не умею, но это меня не остановило. На следующий день у меня был готов сайт с чудесными иллюстрациями.

Иллюстрация с сайта
Ещё одна
И ещё одна (моя любимая)

Технология изготовления иллюстраций

Шаг 1. Найти лист A4 и ручку. Нарисовать иллюстрацию, не взирая на отсутствие таланта к рисованию.

Шаг 2. Сфотографировать так, чтобы свет падал равномерно.

Шаг 3. Обесцветить и максимально увеличить контраст в фотошопе.

Шаг 4. Свести фон к белому цвету инструментом «Уровни».

В окне «уровней» вы увидите такой гребень. Правый ползунок под ним нужно сместить левее этого гребня

Шаг 5. Наложить подходящий текст.

Абстрактный пример

A/B-тест

Параллельно я попросил дизайнера нарисовать вариант сайта в современном дизайне. Мы его тоже сверстали и устроили испытание лидами.

Вот вариант дизайнера.

Одна из секций на сайте

Источник трафика — публикация в «Типичном программисте» во «Вконтакте».

Вариант «A», мой:

Количество посетителей: 336.

Количество заявок: 59.

Конверсия: 17.56%.

Вариант «B», дизайнера:

Количество посетителей: 326.

Количество заявок: 62.

Конверсия: 19.02%.

Победила дружба

По итогам теста с отрывом в полтора процента победил вариант дизайнера — стильный и современный. Но кривые иллюстрации на коленке делать дешевле.

0
47 комментариев
Написать комментарий...
Andrukhov Leonid

Боюсь, у вас просто получились хорошие иллюстрации.

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Я старался.

Ответить
Развернуть ветку
Bulat Karimov

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

Ответить
Развернуть ветку
David Daniel

Нет. Вот эти каракули на самом деле вин. Реально

Ответить
Развернуть ветку
Zoibana

Нужно сравнивать не 2 совершенно разных лендинга, а один и тот же лендинг с разными иллюстрациями - один вариант с иллюстрациями от дизайнера, второй - рисованные.

Сейчас это сравнение несравнимых вещей.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Lirnik

Пока не посмотрел сами тесты думал, что сравниваются варианты иллюстраций на коленке vs профессиональные. На самом же деле варианты радикально отличаются по объему и логике подачи информации причем авторский вариант в этом плане сильно выигрывает.

Ответить
Развернуть ветку
Pavel Tsenyov

Интересный тест :) По расположению блоков версии совпадали? На скриншоте версии дизайнера этапы работы расположены так, что сложно понять их порядок. Возможно, подобные моменты сказались на конверсии.

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Не совпадали. Разница не только в иллюстрациях, но и в структуре тоже была.
В разделе A/B тест есть ссылки на оба варианта - можно сравнить.

Ответить
Развернуть ветку
Pavel Tsenyov

Точно, сразу не заметил ссылки. Похоже дело в том, что у вас значительно лучше продумана структура, проще написан текст, правильно расставлены акценты и в иллюстрациях заложены понятные метафоры. Но в целом вывод из статьи верный: жить можно и без хорошей отрисовки :)

Ответить
Развернуть ветку
Никита Никифоров

Если бы на сайте дизайнера была отрисовка, то да. А так иллюстрации видно только у автора на сайте. :)

Ответить
Развернуть ветку
Pavel Starozhuk

Вячеслав, Creatium это ребрендинг ПлатформыLP или отдельный самостоятельный конструктор?

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Отдельный самостоятельный конструктор.

Ответить
Развернуть ветку
Pavel Starozhuk

хм, а в чем смысл его существования, если по факту это копия редактора из Платформы LP ?

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Это не копия — это и есть тот самый редактор, поскольку я являюсь его разработчиком.

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

Ответить
Развернуть ветку
Pavel Starozhuk

То есть вы разошлись с платформой и теперь будете делать свой новый конструктор?
Планируется ли возможность трансфера страничек к вам?

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

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

Ответить
Развернуть ветку
Nickolai Vasiliev

Типа Лилу и Ватсхэлпа?

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Трансфер возможен, но с ограничениями. Нужно в поддержку написать.

Ответить
Развернуть ветку
Max Danilov

О чем пост?) Как я понял просто надо было что-то написать... Ну ок.

Ответить
Развернуть ветку
Алексей Надеждин

Нативная реклама конструктора, конечно же.

Ответить
Развернуть ветку
Ilya Shubenok

Тут скорее конверсия "выплывала" из предложения, иллюстрации вряд ли влияли на это. В двух вариантах адекватная типографика, стильный шрифт, это смотрится, легко воспринимается и читается. Хотя в варианте от дизайнера серый шрифт на сером - такое себе. Мне вот больше понравился вариант "А" - иллюстрации от руки.

Я бы сделал больше демонстраций и примеров - что сможете делать, где применять, какие задачи можно решить с помощью нашего курса (и редакторов, которые мы учим делать). Думаю конверсия станет еще лучше.

Ответить
Развернуть ветку
Иван Шишкин

Значимой разницы нет, но тут качество иллюстраций компенсируется тем, что свой вариант делал сам автор. Автор гораздо лучше доносит ценность.

Ответить
Развернуть ветку
Макс Корольков

Насколько честный A/B тест? С какой периодичностью были сделаны публикации в паблике ТП? Как отразился тот факт, что часть аудитории, увидевшая первую публикацию не перейдут по второй? Есть скрины, как выглядел рекламный пост? Креатив один и тот же?

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Была сделана одна публикация, пересечений между вариантами не было, поскольку первый открытый вариант запоминался в куках, и в дальнейшем открывался только он. Скриншот рекламного поста прилагается.

Ответить
Развернуть ветку
Макс Корольков

То есть просто поменяли дизайн страницы входе увеличивающегося траффика?

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Нет. Первый посетитель видел вариант "А". Второй посетитель видел вариант "Б", и так дальше по очереди.

Ответить
Развернуть ветку
Макс Корольков

А как это технически реализовано, если не секрет?

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

В конструкторе сайтов делал с поддержкой A/B тестов

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
David Daniel

Я так с 2002 делаю😆

Ответить
Развернуть ветку
Anastasia Gordeeva

Смешной эксперимент, хоть и не оч чистый: вы-то уже знаете основы 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/

Получилось еще корявее, но пользователям нравится. Может быть в этом и есть изюминка

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Тоже пробовал планшет, но в итоге пришел к бумаге - результат получается менее компьютерным. Более живым)

Ответить
Развернуть ветку
Maxim Tristen

http://joxi.ru/p27nQo9iod1eYm

Разница в уровне конверсии не является пока что статистически значимой.

Другое дело, что без дизайнера срезаются косты :)

Спасибо за туториал по иллюстрациям.

Ответить
Развернуть ветку
Георгий Пятница

Уау! Спасибо за идею 😘

Ответить
Развернуть ветку
Marat Akhiar

Думаю идея изображения намного важнее подачи.

Ответить
Развернуть ветку
Иннокентий Фефилов

Это не A/B тест. Это SDFVDBSGJHS/IUTTDGFBDAWEH тест.

Ответить
Развернуть ветку
Никита Никифоров

Не уверен, что эти ленды можно сравнивать на этом этапе, но если сравнить качество конверсии, то да. Авторский ленд эмоционален и показывает выгоду сразу, единственное, не видать на чем будет написан редактор (я имею в виду сразу на обложке, я бы если увидел php или ruby, закрыл бы и забыл, а тут надо еще копаться). В целом при таком посещении можно было бы добить большего количества заявок, если добавить всему этому ценности (показать автора, объяснить кто он такой, какие технологии будут использованы).

Но иллюстрации шикарные, возьму на заметку идею:)

Ответить
Развернуть ветку
Hey Arnold

Для большей скорости и удобства есть смысл использовать в таких целях графические планшеты Wacom. Аккурат для таких же целей приобрел себе недавно. Рад встретить единомышленников) Лайк.

Ответить
Развернуть ветку
Вячеслав Гримальский
Автор

Пробовал на айпаде, но результат выходил не таким душевным)

Ответить
Развернуть ветку
Александр

Что это было?

Ответить
Развернуть ветку
Kokoulin Nikolay

Нативная реклама очередного конструктора сайтов для адептов БМ. Ваш кэп

Ответить
Развернуть ветку
Антон Кулеш

Я бы ещё добавил, что в ВК больше пользуются мобильными устройствами, а лендинг дизайнера не очень читальный с моб версии. Хотя идея мне понравилась, нужно будет протестировать отдельно.

Ответить
Развернуть ветку
Mr. Burns

http://oknaludyam.ru идея не нова, конечно. Думаю я бы сконвертнулся на такой лендос скорее.

Ответить
Развернуть ветку
Коля Павельев

Это потому что и вы и дизайнер использовали одну и ту же причину для конверсии: простоту достижения и понятность цели. И различие было только в том, что вы по психотипу конструктор, а он, как и любой дизайнер, рефлектор, поэтому форма для этого приёма была чуть-чуть более разная (минимально), вместо цели вы использовали счастье в конструктивном его понимании. Вам стоило бы попытаться подумать над принципиально другими приёмами, если хотите настоящие А\Б тесты, которые позволяют понять объективные причины продаж, дело же не в самом соревновании кто прав ради просто соревнования, верно?

Ответить
Развернуть ветку
М.Х.

С вашего сайта внизу лендоса: "Будут еще курсы, более простого и более сложного уровня."
запятая не нужна

Ответить
Развернуть ветку
Martha Simons
Ответить
Развернуть ветку
44 комментария
Раскрывать всегда