Блог
Начать работу
Скопируйте номер или нажмите на него, чтобы позвонить нам
+7 (995) 263-08-88

Скопировать

Позвонить
Кейсы Разработка сайтов

Сайт для сервиса по подбору маркетологов

Разработка

Маркетинг
Маркетолог по подписке

Сайт для сервиса по подбору маркетологов

Разработка лендинга на Tilda

Связаться с нами

О клиенте

Клиент обратился к нам с просьбой разработать простой и лаконичный лендинг на Tilda. Цель лендинга — привлечь клиентов, нуждающихся в опытном маркетологе на свой проект.

 

Немного предыстории: сервис “Маркетолог по подписке” родился из-за спроса многих бизнесов на опытного и профессионального маркетолога, который может работать как парт-тайм, так и на полный рабочий день. Проблема таких компаний заключается в том, что большинство из них, у кого нет департамента маркетинга, вынуждены заниматься подбором данных специалистов. Этот процесс отнимает время и деньги, к тому же при выборе таких специалистов часто не хватает компетенций для правильной оценки и найма.

 

Поэтому, проект “Маркетолог по подписке” решает эту боль для разных бизнесов и делает это в уникальном формате «подписки».

 

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

 

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

 

Спойлер: У нас «получилось ровно то, что было нужно».
В команду проекта вошли: маркетолог, проектный менеджер, дизайнер, верстальщик, разработчик.

Задачи

1

Разработка мудборда и дизайна сайта

2

Перенос дизайна сайта на Tilda

Процесс работ:

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

Этап 1. Мудборд

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

 

В процессе сборки мудборда выяснили, что хотим остановиться на рисованном стиле, отражающем привычку большинства маркетологов — рисовать на полях бумаги закорючки и пометки, или объяснять сложные вещи простыми схематичными рисунками

image

Этап 2. Разработка дизайна

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

 

Далее, мы начали думать в сторону рисованных визуалов и smooth-карточек исходя из современных трендов UI- дизайна

image

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

 

Еще раз пересмотрели цвета, обнаружили, что зеленый на разных мониторах выглядел где-то светлее, а где-то темнее. На светлых и ярких мониторах первый экран, из-за выбранного оттенка цвета, не удерживал внимание и раздражал

 

image

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

 

Остановились на том, что основной фон должен быть темный или белый, а на акцентные элементы мы применяем яркий зеленый цвет.

 

Далее, более детально поработали с цветами — изменили тон у основного зеленого, и на его основе сделали градиент для CTA- кнопок

image

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

 

Также, совместно с клиентом мы набросали несколько вариантов цепляющих блоков: 

  • с вопросами (вдохновились селектором из iOS и создали анимированную карусель)
image
  • с преимуществами сервиса (создали забавное и наглядное сравнение маркетолога в штате и маркетолога по подписке)
image
  • с этапами работы ( разработали пошаговую анимацию с каждым этапом и перечнем работ)
image
  • с перечнем клиентов сервиса “Маркетолог по подписке”
image

а также, настроили формы обратной связи

image

После разработки дизайна, мы приступили к адаптации сайта на все экраны.

 

Клиент остался доволен дизайном и функционалом сайта, и, как выяснилось позже, его конверсионностью, т.к. количество заявок после его запуска превысило ожидания заказчика 🙂

Доработка раздела для соискателей:

Спустя некоторое время клиент попросил разработать раздел в таком же стиле и для соискателей, т.к. находился в активном поиске сотрудников в компанию

image

Этап 3. Перенос на Tilda

Перенос дизайна на Tilda занял около 2-х рабочих дней. Изначально макет создавался в программе Figma с заданной сеткой из Tilda, поэтому скорость переноса и позиционирования элементов увеличилась. 

 

Разработчики создали кастомное бургер-меню и настроили CRM-систему для получения заявок с сайта

Этап 4. Тестирование

Протестировали сайт на разных устройствах, устранили все баги

C какими трудностями мы столкнулись в процессе работ?

При попытке создать синхронную step-by-step анимацию в Tilda, появилась некоторая сложность. Изначально мы задумывали сделать анимацию с текстом, который был бы зарендерен на сайте, однако, у Tilda- анимации есть проблемы с задержкой: на большом количестве элементов счетчик ломается и не может зациклиться.

 

Решить проблему удалось достаточно быстро, но мы попробовали несколько решений: записывали скринкаст и переносили его в Adobe Photoshop, конверты и гиф. Результаты были неудовлетворительными — гиф-анимация была сжатая и пиксельная, также появились артефакты в виде лишних цветов и отсутствия плавного исчезновения текста.

 

Верное решение пришло к нам с программой ScreenToGif. Она смогла перевести запись экрана в гиф без потери качества, затем оставалось лишь оптимизировать гиф-анимацию и залить её на сайт

Фишки

Раздел «соискателям» мы создали самостоятельно за очень короткий период времени, клиенту осталось лишь внести несколько правок по тексту и добавить кнопку

Каких объективных показателей нам удалось достичь

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

У пользователей нет дополнительных вопросов или уточнений, а это значит что нам удалось и мы грамотно реализовали донесение всех смыслов до потенциальных клиентов сервиса

Очень благодарна команде ConvertMe за то, что воплотили в жизнь то, что было в моей голове. Какой бы трафик не вели на сайт, в Лиды конвертируется только осознанный клиент, который не задает вопросов и готов к сотрудничеству. Планирую продолжать наше сотрудничество, на очереди разработка автоматизированных бизнес-процессов в Битрикс24. Впереди еще много идей и совместных свершений

Татьяна Толбатова

Заключение

Из проекта “Маркетолог по подписке” родилось наше большое и крепкое  сотрудничество с заказчиком, потому что мы любим работать с уникальными продуктами и тем более компетентными коллегами по цеху.

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

Наша команда всегда готова к новым проектам!

 

ул. Длинная 81, Краснодар, Краснодарский край, 350000
Как добраться?

Связаться с нами

Оставьте номер телефона, и мы обсудим с вами суть работы

ул. Длинная 81, Краснодар, Краснодарский край, 350000

Скопировано!

Спасибо за заявку, мы свяжемся с вами в ближайшее время!

Произошла ошибка, попробуйте еще раз