Привет, на связи Екатерина Комарова из дизайн-команды Komarovaeee — UX/UI дизайнер & Эксперт Tilda Publishing. Мы делаем стильные сайты для малого и среднего бизнеса, а в кейсах подробно рассказываем о том, как применяем маркетинг, анализ и логику на практике.
В этой статье расскажем, как оперативно собрали информацию от команды Dostavix и предложили решение, которое реализовали за три недели на Тильде, обучили команду клиента работе с платформой и получили награду лучших сайтов на платформе #madeontilda. Рассказываем в статье дальше, но сначала освежим память про no-code.
Почему Тильда так востребована
No-code платформы, например, Тильда и Webflow становятся только популярнее — все чаще топовые студии используют эти инструменты для решения задач своих заказчиков. Одним из лидеров среди no-code платформ в России является Тильда, которая стала популярна среди разработчиков и веб-дизайнеров за счет своей гибкости, простоты интерфейса и скорости создания сайтов.
Об этом написано уже много статей, тезисно напомним:
- возможность создать уникальный дизайн в Zero block;
- быстрая скорость разработки (Верстка);
- много готовых интеграций с различными сервисами;
- встроенная CRM-система;
- настройка сложной пошаговой анимации;
- расширение функционала за счет добавления своего кода (html, css, скрипты, сложные модификации);
- самостоятельное редактирование проектов без привлечения сторонних специалистов.
А теперь к кейсу.
Знакомство с заказчиком и проектом. Сбор информации
Команда Dostavix обратилась к нам с задачей разработать привлекательный, информативный и удобный лендинг, который будет отражать ценность их предложения:
- В чем уникальное торговое предложение сервиса (УТП)?
- Почему бизнес выбирает Dostavix?
- Как выглядит интерфейс платформы и чем он удобен для участников бизнес-процессов по доставке еды?
- Какое решение для бизнеса под ключ получает владелец бизнеса? (Приложение и сайт, круглосуточная техподдержка, колл-центр, удаленное бесплатное обучение, аналитика продаж, телеграм-бот).
- Как все работает?
- В чем привлекательность условий сотрудничества с сервисом Dostavix?
- Кто стоит за созданием платформы?
- Как стать партнером сервиса?
Dostavix — комплексное решение для бизнеса
Помогает автоматизировать процесс доставки для кафе и ресторанов. Все компоненты сервиса интегрированы между собой, что обеспечивает автоматизацию всех процессов и высокую скорость закрытия заказов.
Целевая аудитория сервиса. Это владельцы ресторанов и кафе с доставкой в своих заведениях, которые планируют увеличить прибыль, автоматизировать процессы и оптимизировать свои расходы за счет платформы.
Основные страхи. Низкая конверсия, сложность интеграции, высокие комиссии сервисов доставки, скрытые платежи и дополнительные оплаты.
Заказчик хотел получить сайт, который бы выделялся на фоне конкурентов, легко и понятно объяснял суть, имел современный и привлекательный дизайн, соответствующий их бренду. У Dostavix уже был сайт на Тильде, который был собран самостоятельно на стандартных блоках — был неактуален, не отвечал текущим задачам сервиса, выглядел шаблонно.
Перед разработкой проекта мы собрали референсы сайтов, на которые можем опираться при создании смысловой и визуальной составляющих, и обсудили их с заказчиком. Некоторые идеи были приняты, другие решили не использовать. В качестве основного ориентира у нас был готовый визуальный стиль самой платформы, за который нам было разрешено выйти, предложив свой свежий взгляд на элементы интерфейса — кнопки, оттенки цветов, варианты по типографике.
Мы провели подробный бриф команды и далее были на связи с ответственным по разработке лендинга менеджером продукта — оперативно собрали необходимую информацию, после чего приступили к этапу проектирования сайта.
Проектирование: структура будущего лендинга
Проектирование мы делаем на основе конкурентного и маркетингового анализа.
Чтобы лендинг не был просто красивой картинкой, а выполнял свою задачу, мы приступили к анализу конкурентов и оценили их решения. В процессе обращали внимание на маркетинговую составляющую: какие преимущества и смыслы доносят до ЦА, на каком языке «говорят» с аудиторией, как повышают лояльность и какими приемами пользуются при работе с возражениями/ожиданиями. Далее определили структуру будущего сайта и последовательность подачи информации.
После мы устроили брейншторм по формулированию уникального торгового предложения Dostavix и способу выделиться среди конкурентов, записали удачные формулировки. Написали остальные тексты для сайта, описав каждый смысловой блок понятным языком без воды.
На основе согласованной структуры приступили к созданию прототипа.
Прототип будущего сайта
Структуру и готовые тексты мы осмыслили и отобразили графически в виде смысловых блоков в прототипе. На данном этапе шлифуются смыслы, проверяется логика подачи информации и уместность расположения кнопок СТА, еще больше прорабатываются детали. Мы адаптировали написанные тексты в прототип, проведя UX-редактуру, презентовали заказчику.
На главном экране для сайтов услуг и сервисов, как правило, помимо УТП и кнопки СТА стараемся сообщить пользователю о выгодах, которые он получит для своего бизнеса, а также ответить на главные вопросы ЦА. Одновременно с этим необходимо не перегрузить экран элементами и избежать визуального шума.
Почему так?
Мы смотрим метрики разработанных сайтов, по опыту внимание пользователя на главном экране максимально сконцентрировано. На первых трех блоках юзер проводит больше времени по карте скроллинга, с каждым последующим блоком внимание рассеивается.
Блок 1: ценности. Здесь сделали акцент на нескольких моментах.
УТП. «Увеличьте прибыль вашей доставки и автоматизируйте бизнес-процессы вместе с Dostavix».
Пояснение УТП. Оптимизируйте расходы на доставку — контролируйте показатели в реальном времени. Управляйте и оперативно вносите изменения, получайте мгновенную обратную связь от техподдержки.
Call to action. Предлагаем «Подключиться» теплой аудитории, и для тех, кто сомневается, предлагаем «Получить демо-доступ».
Дополнительные выгоды, которые отражаем на первом экране:
- лояльные клиенты и повторные заказы;
- сайт и приложение для вашего бренда;
- единая система без использования сторонних сервисов;
- удаленное внедрение за 7 дней — бесплатно.
Блок 2: перечислили остальные преимущества и выгоды сервиса. Подробно расписали каждый, старались в заголовки закладывать основную мысль, так как часто пользователь не вчитывается в базовый текст, а просто сканирует заголовки и акценты на странице.
Блок 3: продолжаем раскрывать функционал сервиса. Здесь показываем, в каких аспектах сервис полезен более конкретно. В данном блоке не забываем про CTA, пользователю будет удобно сделать лид, если на данном этапе ему достаточно информации.
Блок 4: подсвечиваем пользователю главные преимущества. Делаем это в виде баннерной строки.
Блок 5: показываем пользователю географию сервиса. Демонстрируем достигнутые результаты в виде присутствия в 4 странах и подключенных к сервису 50+ точек питания.
Блок 6: рассказываем, как происходит работа. Кратко раскрываем этапы работы сервиса Dostavix.
Блок 7: фактоиды. Они информируют пользователя через цифры.
Между 7 и 8 блоком снова делаем призыв и одновременно с этим говорим о прозрачном и понятном ценообразовании сервиса, кнопка СТА «Подключиться».
Блок с отзывами от партнеров, кто уже использует сервис «Dostavix», будет добавлен после сбора отзывов от крупных сетей.
Блок 8: команда. За сервисом стоят люди в виде настоящей живой команды — это довольно сильный блок для каждой компании и сервиса, повышающий лояльность аудитории. Люди для людей.
Подвал лендинга. Здесь размещаем навигацию и все соцсети на случай, если ЦА нужно дополнительно изучить компанию или какое-то время понаблюдать в качестве подписчика за их деятельностью, чтобы сделать лид позже.
Дизайн
После презентации интерактивного прототипа заказчик предложил некоторые правки в формулировки. После согласования прототипа мы перешли к отрисовке дизайн-макета.
Перед нами стояла задача отрисовать дизайн лендинга с учетом фирменного стиля готовой платформы Dostavix. Мы предложили:
- немного освежить текущий визуал — доработать плашки, добавить дополнительные оттенки в фирменную палитру;
- заменить шрифт, убрав Montserrat.
Наши предложения были приняты — заказчик хотел яркий современный дизайн с упором на интерфейс продукта, округлые формы, уместные иконки-реакции, проработанную детализацию.
Мы опирались на согласованные референсы, упор в которых был на элементах интерфейса, дружелюбных векторных формах, ярких кнопках, приятных цветных фонах, аккуратных линиях, рисованных элементах и ярких фотографиях. Использовали 4-колонную сетку, в которой выстраивали композицию, используя популярные плашки-подложки.
Дизайном мы хотели подчеркнуть разнообразие функционала сервиса, донести мысль об открытости к партнерству через дружелюбные элементы, рисованные стрелки, теплые оттенки. Добавили плавные анимированные переходы фиксирования контента, чтобы привлечь внимание пользователей и создать ощущение движения. Не оставили без внимания функциональные элементы сайта, настроив ховер-эффекты — так пользователь интуитивно понимает, что можно сделать действие, система имеет отклик.
Так как сервис действующий, мы решили показать подробно каждый компонент платформы: добавили интерактив на главный экран в виде оформления заказа в приложении в мокапе, приправив реакциями в виде огоньков и лайков. Сделали зацикленные видео действующих crm-кабинетов, проиллюстрировали графически каждое преимущество на случай, если тексты не прочитают.
Необходимые фотографии потенциальной целевой аудитории сайта подобрали через премиум-стоки, обеспечив высокое качество визуального контента. Предложили разные варианты на выбор заказчику.
Еще мы помогли с фотосетом команды, написав небольшое ТЗ для создания контента: однотонный приятный бэкграунд, одна цветкоррекция, одинаковый ракурс. Также были на связи с моушн-дизайнерами, которые готовили ролики о платформе: мы дали рекомендации по анимации и обратную связь визуалу в видео.
Презентация дизайна прошла в онлайн-режиме — созвонились с заказчиком, презентовали макет, из правок были незначительные комментарии по добавлению в дизайн некоторых иконок сервисов, с которыми сотрудничают. В остальном все понравилось, мы превзошли ожидания, заказчик остался доволен.
После согласования десктопной версии отрисовали адаптивы и приступили к верстке на Тильде.
Еще немного и запуск
Делаем верстку на Тильде, анимацию, подключение аналитики, базовую SEO-настройку и обучение сотрудников.
После согласования дизайна приступили к верстке проекта на Тильде, здесь начинается понятная и монотонная работа. Мы сверстали десктопную версию сайта для популярных устройств, адаптировали контент под планшеты и мобилку. Реализовали автоматическое масштабирование контента — настроили Autoscale.
Параллельно с версткой настроили уместную анимацию контента, использовали плавные наложения блоков друг на друга для придания динамичности, добавили hover-эффекты для кнопок и кликабельных элементов. Все эти действия позволили сделать лендинг живым, отзывчивым и удобным для посетителя, что в конце концов приводит к улучшению пользовательского опыта.
Подключили метрики для дальнейшего анализа поведения пользователей на сайте. Еще мы добавили всплывающие поп-ап окна на кнопки целевого действия и подключили их к приемщикам форм. Теперь заявки с сайта моментально приходят на почту и в телеграм-бот, с ними можно оперативно взаимодействовать и не пропускать запросы на партнерство.
Конечно, не забыли и про базовую seo-оптимизацию, которую всегда делаем по умолчанию: прописали ключевые слова в title и description, настроили теги h1 и h2, сделали 404 страницу, отриосвали бейдж и фавикон. Что на выходе? Лендинг проиндексирован поисковиками, бьется по брендовому запросу, попал в топ-2 выдачи Яндекса по России по ключу «Онлайн-платформа доставки еды», по запросу «Платформа для доставки еды» топ-4.
Кроме того, мы записали подробное видео-руководство и провели обучение сотрудников заказчика по работе с новым сайтом.
Чем же в итоге хороши no-code платформы?
Лендинг на Тильде был реализован всего за три недели, за это время мы разработали решение, которое отвечает техническим и функциональным требованиям, решает задачи бизнеса, выглядит стильно и готово к запуску.
Сразу уточним, что разработать лендинг в такие сроки также помогла своевременная обратная связь менеджера продукта Dostavix и открытого к новым предложениям заказчика. Это тот случай, когда все стороны заинтересованы в результате, не затягивают процесс разработки и не перекладывают ответственность на исполнителя.
Вы можете посмотреть результат нашей работы. Этот лендинг украшает портфолио нашей команды, получил награду лучших сайтов на Тильде #madeontilda и приносит лиды заказчику, что не может не радовать.
Больше о развитии бизнеса
Отличная работа