Как no-code платформы помогают предпринимателям с запуском проектов?

Кейс: как за 20 дней мы сделали лендинг на Тильде для международной компании-разработчика сервиса автоматизации доставок еды Dostavix, обучили работе с платформой и получили награду лучших сайтов #madeontilda

Привет, на связи Екатерина Комарова — СEO & арт-директор дизайн-команды Komarovaeee. Мы делаем классные стильные сайты для малого и среднего бизнеса, а в кейсах подробно рассказываем о том, как применяем маркетинг, анализ и логику на практике. А еще мы топ-5 молодых агентств по разработке сайтов в РФ и топ-15 разработчиков сайтов на Тильде в РФ.

Рассказываем в статье подробно далее обо всех этапах, и сначала освежим память про no-code.

No-code платформы, например, Тильда и Webflow становятся только популярнее — все чаще топовые студии используют эти инструменты для решения задач своих заказчиков. Одним из лидеров среди no-code платформ в России является Тильда, которая стала популярна среди разработчиков и веб-дизайнеров за счет своей гибкости, простоты интерфейса и скорости создания сайтов.

Почему Тильда так востребована? Об этом написано уже много статей, тезисно напомним:

Ну а теперь к кейсу.

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

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

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

Заказчик хотел получить сайт, который бы выделялся на фоне конкурентов, легко и понятно объяснял суть, имел современный и привлекательный дизайн, соответствующий их бренду. У Dostavix уже был сайт на Тильде, который был собран самостоятельно на стандартных блоках — был неактуален, не отвечал текущим задачам сервиса, выглядел шаблонно.

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

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

Чтобы лендинг не был просто красивой картинкой, а выполнял свою задачу, мы приступили к анализу конкурентов и оценили их решения. В процессе обращали внимание на маркетинговую составляющую: какие преимущества и смыслы доносят до ЦА, на каком языке «говорят» с аудиторией, как повышают лояльность и какими приемами пользуются при работе с возражениями/ожиданиями. Далее определили структуру будущего сайта и последовательность подачи информации.

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

На основе согласованной структуры приступили к созданию прототипа.

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

На главном экране для сайтов услуг и сервисов, как правило, помимо УТП и кнопки СТА стараемся сообщить пользователю о выгодах, которые он получит для своего бизнеса, а также ответить на главные вопросы ЦА. Одновременно с этим необходимо не перегрузить экран элементами и избежать визуального шума.

Почему так?

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

УТП — «Увеличьте прибыль вашей доставки и автоматизируйте бизнес-процессы вместе с Dostavix».

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

Call to action — предлагаем «Подключиться» теплой аудитории, и для тех, кто сомневается, предлагаем «Получить демо-доступ».

Дополнительные выгоды, которые отражаем на первом экране:

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

Третий блок — продолжаем раскрывать функционал сервиса, показываем, в каких аспектах сервис полезен более конкретно. В данном блоке не забываем про CTA, пользователю будет удобно сделать лид, если на данном этапе ему достаточно информации.

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

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

Между 5 и 6 блоком делаем призыв и кнопку CTA «Подключиться»

Шестой блок — кратко рассказываем пользователю, о том как происходит поэтапная работа внутри сервиса «Dostavix».

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

Между 7 и 8 блоком снова делаем призыв и одновременно с этим говорим о прозрачном и понятном ценообразовании сервиса, кнопка СТА «Подключиться»

Блок с отзывами от партнеров, кто уже использует сервис «Dostavix», будет добавлен после сбора отзывов от партнеров в рамках следующей итерации.

Восьмой блок — за сервисом стоят люди в виде настоящей живой команды. Довольно сильный блок для каждой компании и сервиса, повышающий лояльность аудитории. Люди для людей.

Ну и подвал лендинга с навигацией и формой обратной связи.

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

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

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

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

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

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

Еще мы помогли с фотосетом команды, написав небольшое ТЗ для создания контента: однотонный приятный бэкграунд, одна цветкоррекция, одинаковый ракурс. Также были на связи с моушн-дизайнерами, которые готовили ролики о платформе: мы дали рекомендации по анимации и обратную связь визуалу в видео.

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

После согласования десктопной версии отрисовали адаптивы и приступили к верстке на Тильде.

После согласования дизайна приступили к верстке проекта на Тильде, здесь начинается понятная и монотонная работа. Мы сверстали десктопную версию сайта для популярных устройств, адаптировали контент под планшеты и мобилку. Реализовали автоматическое масштабирование контента — настроили Autoscale.

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

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

Конечно, не забыли и про базовую seo-оптимизацию, которую всегда делаем по умолчанию: прописали ключевые слова в title и description, настроили теги h1 и h2, сделали 404 страницу, отриосвали бейдж и фавикон. Что на выходе? Лендинг проиндексирован поисковиками, бьется по брендовому запросу, попал в топ-2 выдачи Яндекса по России по ключу «Онлайн-платформа доставки еды», по запросу «Платформа для доставки еды» топ-4.

Кроме того, мы записали подробное видеоруководство и провели обучение сотрудников заказчика по работе с новым сайтом.

Лендинг на Тильде был реализован всего за 3 недели, за это время мы разработали решение, которое отвечает техническим и функциональным требованиям, решает задачи бизнеса, выглядит стильно и готово к запуску.

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

Результат нашей работы можно посмотреть здесь: https://dostavix.com/ Лендинг украшает портфолио нашей команды, получил награду лучших сайтов на Тильде #madeontilda и приносит лиды заказчику, что не может не радовать.

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

А еще подписывайтесь на наш тг-канал, где мы делимся пользой, проводим разборы сайтов в прямом эфире и рассказываем о новых кейсах нашей команды.