Тинькофф Двор в Санкт-Петербурге — четыре дня, десятки спикеров, много музыки, еды и развлечений

Тинькофф Двор в Санкт-Петербурге — четыре дня, десятки спикеров, много музыки, еды и развлечений

Подробнее
Идеи для бизнесаБизнес с нуляМаркетплейсыВопросы–ответыЖизнь вне работыСправочник
Идеи для бизнесаБизнес с нуляМаркетплейсыВопросы–ответыЖизнь вне работыСправочник

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


Как сделать на Тильде лендинг для международного разработчика сервиса автоматизации доставок еды. Кейс команды komarovaeee с подробным описанием каждого этапа


Эту статью написал участник сообщества

Екатерина Комарова

Екатерина Комарова

CEO дизайн-команды komarovaeee

komarovaeee

komarovaeee

Разработка на Тильде сайтов для бизнеса

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

Написать статью

Как сделать на Тильде лендинг для международного разработчика сервиса автоматизации доставок еды. Кейс команды komarovaeee с подробным описанием каждого этапа


Эту статью написал участник сообщества

Екатерина Комарова

Екатерина Комарова

CEO дизайн-команды komarovaeee

komarovaeee

komarovaeee

Разработка на Тильде сайтов для бизнеса

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

Написать статью

Привет, на связи Екатерина Комарова из дизайн-команды Komarovaeee — UX/UI дизайнер & Эксперт Tilda Publishing. Мы делаем стильные сайты для малого и среднего бизнеса, а в кейсах подробно рассказываем о том, как применяем маркетинг, анализ и логику на практике.

В этой статье расскажем, как оперативно собрали информацию от команды Dostavix и предложили решение, которое реализовали за три недели на Тильде, обучили команду клиента работе с платформой и получили награду лучших сайтов на платформе #madeontilda. Рассказываем в статье дальше, но сначала освежим память про no-code.

Почему Тильда так востребована

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

Об этом написано уже много статей, тезисно напомним:

  • возможность создать уникальный дизайн в Zero block;
  • быстрая скорость разработки (Верстка);
  • много готовых интеграций с различными сервисами;
  • встроенная CRM-система;
  • настройка сложной пошаговой анимации;
  • расширение функционала за счет добавления своего кода (html, css, скрипты, сложные модификации);
  • самостоятельное редактирование проектов без привлечения сторонних специалистов.

А теперь к кейсу.

Знакомство с заказчиком и проектом. Сбор информации

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

  1. В чем уникальное торговое предложение сервиса (УТП)?
  2. Почему бизнес выбирает Dostavix?
  3. Как выглядит интерфейс платформы и чем он удобен для участников бизнес-процессов по доставке еды?
  4. Какое решение для бизнеса под ключ получает владелец бизнеса? (Приложение и сайт, круглосуточная техподдержка, колл-центр, удаленное бесплатное обучение, аналитика продаж, телеграм-бот).
  5. Как все работает?
  6. В чем привлекательность условий сотрудничества с сервисом Dostavix?
  7. Кто стоит за созданием платформы?
  8. Как стать партнером сервиса?

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
В пятом блоке доносим информацию о том, что компания имеет довольно обширный охват по географии, что дополнительно повышает лояльность целевой аудитории
Между 5 и 6 блоком делаем призыв и кнопку CTA «Подключиться».На данном этапе пользователю может быть достаточно информации и он уже готов сделать целевое действие, поэтому предлагаем блок с кнопкой
В шестом блоке, чтобы передать понятность и прозрачность сотрудничества, объясняем подробно обо всех процессах и этапах в рамках сотрудничества. Формируем видение пользователю
Сервис действующий, есть конкретные факты и цифры, поэтому обязательно показываем на сайте. Предполагается, что цифры будут меняться в реальном времени
В восьмом блоке мы знакомим пользователей с командой, показываем кто за что отвечает в компании
Форма обратной связи, объединенная с подвалом сайта

Дизайн

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

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

  • немного освежить текущий визуал — доработать плашки, добавить дополнительные оттенки в фирменную палитру;
  • заменить шрифт, убрав Montserrat.

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

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

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

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

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

Дизайн-макет лендинга, который у нас получился в итоге

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

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

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

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

Целевая аудитория платформы и различные варианты по фото в дизайн макете

Еще немного и запуск

Делаем верстку на Тильде, анимацию, подключение аналитики, базовую SEO-настройку и обучение сотрудников.

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

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

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

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

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

Фрагменты разных версий сайта — десктоп, планшет и мобильная версия
Целевое действие предлагаем сделать, заполнив небольшую форму во всплывающем поп-ап окне

Чем же в итоге хороши no-code платформы?

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

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

Вы можете посмотреть результат нашей работы. Этот лендинг украшает портфолио нашей команды, получил награду лучших сайтов на Тильде #madeontilda и приносит лиды заказчику, что не может не радовать.

Екатерина Комарова
Екатерина Комарова

Пишите в комментариях про свой опыт с no-code платформами, что думаете насчет Tilda и Webflow? Расскажите что в них нравится, а чего не хватает?

Сергей Ким

Отличная работа


Больше по теме

Новости