О клиенте
Клиент обратился к нам с просьбой разработать простой и лаконичный лендинг на Tilda. Цель лендинга — привлечь клиентов, нуждающихся в опытном маркетологе на свой проект.
Немного предыстории: сервис «Маркетолог по подписке» родился из-за спроса многих бизнесов на опытного и профессионального маркетолога, который может работать как парт-тайм, так и полный рабочий день. Компании без департамента маркетинга вынуждены заниматься подбором таких специалистов. Однако этот процесс отнимает время и деньги, к тому же при выборе маркетолога часто не хватает компетенций для правильной оценки и найма.
Проект «Маркетолог по подписке» решает эту боль для бизнесов и делает это в уникальном формате «подписки».
Клиент обозначил, что на уровне сайта пользователю должны быть донесены как суть предложения, так и его преимущества. Но ранее у заказчика не было своего сайта, на руках были только несколько презентаций в ярком фирменном стиле компании.
v
Так как клиент — маркетолог с большим опытом, он сразу обозначил видение дизайна будущего сайта. Через дизайн мы должны были передать и раскрыть все смыслы, заложенные для пользователей. Перед началом работ наши специалисты провели брифинг заказчика и начали воплощать этот интересный проект в жизнь.
Спойлер: У нас получилось «ровно то, что было нужно».
В команду проекта вошли: маркетолог, проектный менеджер, дизайнер, верстальщик и разработчик.
Задачи
1
Разработка мудборда и дизайна сайта
2
Перенос дизайна сайта на Tilda
Процесс работ
Во время брифинга клиента мы узнали, что у компании уже сформирован малый фирменный стиль: есть логотип, фирменные цвета и шрифт. Также у клиента имелось несколько готовых коммерческих предложений.
Этап 1
Мудборд
Совместно с клиентом мы искали тот визуальный язык, который будет максимально близок компании по духу.
В процессе сборки мудборда выяснили, что хотим остановиться на рисованном стиле, отражающем привычку большинства маркетологов — рисовать на полях бумаги пометки или объяснять сложные вещи простыми схематичными рисунками.
Этап 2
Разработка дизайна
Для разработки дизайна мы решили адаптировать стиль коммерческих предложений клиента под веб-версию. Первая версия дизайна во многом унаследовала стиль презентаций, но под веб-версию этот визуал в итоге не подошел.
Далее мы начали думать в сторону рисованных визуалов и smooth-карточек, исходя из современных трендов UI-дизайна.
На протяжении всего процесса работ мы собирали обратную связь от клиента. После очередного фидбека решили отказаться от графики со строгими формами и ветками, вместо этого использовать больше нарисованной от руки графики.
Ещё раз пересмотрели цвета и обнаружили, что зелёный на разных мониторах выглядел по-разному: где-то светлее, а где-то темнее. На ярких мониторах первый экран не удерживал внимание и раздражал из-за выбранного цветового оттенка.
После обсуждения с заказчиком первой итерации мы приступили к разработке финальной версии дизайна.
Мы переделали дизайн первого экрана с учётом обратной связи. Остановились на том, что основной фон должен быть тёмный или белый, а на акцентные элементы мы применим яркий зелёный цвет.
Далее более детально поработали с цветами — изменили тон у основного зелёного и на его основе сделали градиент для CTA-кнопок.
Предложили клиенту разработать функционал, который будет демонстрировать стикеры и скетчи на протяжении скроллинга всей страницы. Это решение создало особую атмосферу, как будто маркетолог прямо сейчас рисует пометки на сайте.
Также совместно с клиентом мы набросали несколько вариантов цепляющих блоков:
- с вопросами — вдохновились селектором из iOS и создали анимированную карусель
- с преимуществами сервиса — создали забавное и наглядное сравнение маркетолога в штате и маркетолога по подписке
- с этапами работы — разработали пошаговую анимацию с каждым этапом и перечнем работ
- с перечнем клиентов сервиса «Маркетолог по подписке»
- а также настроили формы обратной связи
После разработки дизайна мы приступили к его адаптации на все форматы экранов.
Клиент остался доволен дизайном и функционалом сайта, и, как выяснилось позже, его конверсионностью: количество заявок после запуска превысило ожидания заказчика 🙂
Доработка раздела для соискателей
Спустя некоторое время клиент попросил в таком же стиле разработать раздел для соискателей, так как компания находилась в активном поиске новых сотрудников.
Этап 3
Перенос на Tilda
Перенос дизайна на Tilda занял около двух рабочих дней. Изначально макет создавался в программе Figma с заданной сеткой из Tilda, поэтому скорость переноса и позиционирования элементов увеличилась.
Разработчики создали кастомное бургер-меню и настроили CRM-систему для получения заявок с сайта.
Этап 4
Тестирование
Протестировали сайт на разных устройствах, устранили все баги.
C какими трудностями мы столкнулись в процессе работ?
При попытке создать синхронную step-by-step анимацию в Tilda появилась некоторая сложность. Изначально мы задумывали сделать анимацию с текстом, который был бы зарендерен на сайте. Однако, у Tilda-анимации есть проблемы с задержкой: на большом количестве элементов счетчик ломается и не может зациклиться.
Решить проблему удалось достаточно быстро. Однако до этого нам пришлось протестировать несколько решений: записать скринкаст и перенести его в Adobe Photoshop, конверты и гиф. Результаты оказались неудовлетворительными, гиф-анимация была сжатая и пиксельная, также появились артефакты в виде лишних цветов и отсутствия плавного исчезновения текста.
Верное решение пришло к нам с программой ScreenToGif. Она смогла перевести запись экрана в гиф без потери качества. Далее оставалось лишь оптимизировать гиф-анимацию и загрузить её на сайт.
Фишки
Раздел «соискателям» мы создали самостоятельно за очень короткий период времени, клиенту осталось лишь внести несколько правок по тексту.
Каких объективных показателей нам удалось достичь
Лучший показатель эффективности нового сайта — это скорость конвертации потенциальных клиентов, пришедших с него. По наблюдениям клиента, все заявки с сайта приходят с одним запросом: «Мы хотим с вами работать».
У пользователей не осталось дополнительных вопросов или уточнений. Это значит, что нам удалось грамотно донести смыслы и закрыть все вопросы потенциальных клиентов сервиса.
Очень благодарна команде ConvertMe! Вы воплотили в жизнь именно то, что было в моей голове. Какой бы трафик ни вели на сайт, в лиды конвертируются только осознанные клиенты, готовые к сотрудничеству. Планирую продолжать работу с вами: на очереди разработка автоматизированных бизнес-процессов в Битрикс24. Впереди ещё много идей и совместных свершений!
Заключение
Из проекта «Маркетолог по подписке» родилось наше крепкое сотрудничество с заказчиком. Нам в радость работать с уникальными продуктами и компетентными коллегами по цеху.
Эта работа показала, что наша команда может тонко прочувствовать дизайн и характер любого бренда, а также грамотно раскрыть его преимущества перед целевой аудиторией клиента.
Мы всегда готовы к новым проектам!
Сайт: marketolog-pp.ru
