Разработка лендинга для b2b компании
Компания OLAMOT, специализирующаяся на автоматизации производства с помощью промышленных роботов, обратилась в Trafficmall с задачей создать высококонверсионный лендинг. Основная цель — увеличить поток заявок от технических директоров и владельцев производственных предприятий. В этом кейсе мы подробно разберем этапы работы и ключевые решения, которые привели к успешному результату.
Этап1: Анализ и подготовка
Этап1: Анализ и подготовка
Перед разработкой дизайна и структуры мы провели глубокий анализ ниши и целевой аудитории.
Исследование конкурентов
Исследование конкурентов
- Проанализировали 10 ключевых игроков рынка, включая международные компании.
- Выявили стандартные и инновационные подходы к презентации промышленных роботов.
- Определили слабые места конкурентов: отсутствие расчета ROI, сложные технические описания, слабая адаптация под мобильные устройства.
Портрет целевой аудитории
Портрет целевой аудитории
Составили детальный портрет целевой аудитории, вот кто получился в общих чертах:
- Технические директора: ищут точные характеристики, совместимость с существующими линиями.
- Владельцы бизнеса: акцент на экономическую выгоду и сроки окупаемости.
- Производственные менеджеры: важна простота внедрения и обучение сотрудников.
Так выглядит доска проекта во время анализа сайтов конкурентов: все интересные решения мы выносим на обсуждение и адаптируем к проекту
Этап 2: Разработка структурно-текстового макета
Этап 2: Разработка структурно-текстового макета
На основе анализа мы создали макет, который максимально упрощает путь пользователя к заявке.
Ключевые блоки:
1.Главный экран
2. Блок преимуществ
Наглядные примеры решения с помощью автоматизации типичных проблем производства: низкая скорость, брак, высокая себестоимость.
3.Оценка эффективности вложений
Таблица реального расчета ROI. Наглядно видно цифры расхода/дохода и выгоду за счет повышения производительности в процентах.
Ключевые блоки:
1.Главный экран
- УТП: «Промышленные роботы для автоматизации производств и складов».
- Форма быстрой заявки с минимумом полей (имя, телефон, email).
- Кнопка с возможностью сразу на первом экране получить каталог
2. Блок преимуществ
Наглядные примеры решения с помощью автоматизации типичных проблем производства: низкая скорость, брак, высокая себестоимость.
3.Оценка эффективности вложений
Таблица реального расчета ROI. Наглядно видно цифры расхода/дохода и выгоду за счет повышения производительности в процентах.
Так выглядит блок "Оценка эффективности" на структурно-текстовом макете
4.Кейсы внедрения
Реальные готовые кейсы с фото и видео: «Монтаж и запуск сферического пневморобота-пикера».
5.Типы роботов
Классификация по задачам: сварка, покраска, сборка, упаковка.
Для каждого типа — краткое описание, фото, кнопки «Запросить КП» и «Скачать каталог».
6.CTA-блоки
Повторяющиеся призывы к действию: «Подберём робота
под вашу задачу за 1 день», «Инженерный расчет под ваш проект» и другие.
Особенности
Акцент на ROI: Блок с расчетом окупаемости стал ключевым аргументом для владельцев бизнеса.
Простота восприятия: Технические данные представлены в виде таблиц и инфографики.
Многоступенчатые формы: Для первых заявок — короткая форма, для запроса коммерческого предложения — расширенная.
Реальные готовые кейсы с фото и видео: «Монтаж и запуск сферического пневморобота-пикера».
5.Типы роботов
Классификация по задачам: сварка, покраска, сборка, упаковка.
Для каждого типа — краткое описание, фото, кнопки «Запросить КП» и «Скачать каталог».
6.CTA-блоки
Повторяющиеся призывы к действию: «Подберём робота
под вашу задачу за 1 день», «Инженерный расчет под ваш проект» и другие.
Особенности
Акцент на ROI: Блок с расчетом окупаемости стал ключевым аргументом для владельцев бизнеса.
Простота восприятия: Технические данные представлены в виде таблиц и инфографики.
Многоступенчатые формы: Для первых заявок — короткая форма, для запроса коммерческого предложения — расширенная.
Вот такой структурно текстовый макет получился
Этап 3: Дизайн и визуальная часть
Этап 3: Дизайн и визуальная часть
Дизайн лендинга для OLAMOT разрабатывался с учетом фирменного стиля компании, современных трендов в B2B-сегменте и максимальной наглядности для потенциальных клиентов.
Фирменная стилистика и цветовая палитра
Основные цвета взяты из брендбука OLAMOT:
#00ABBD (бирюзовый) — основной акцент, использован в кнопках и важных элементах.
#472F92 (фиолетовый) — для выделения важной информации.
#C01229 (красный) — используется минимально, для предупреждений и спецпредложений.
Градиент из этих трех цветов применялся в ключевых визуальных элементах.
Фирменная стилистика и цветовая палитра
Основные цвета взяты из брендбука OLAMOT:
#00ABBD (бирюзовый) — основной акцент, использован в кнопках и важных элементах.
#472F92 (фиолетовый) — для выделения важной информации.
#C01229 (красный) — используется минимально, для предупреждений и спецпредложений.
Градиент из этих трех цветов применялся в ключевых визуальных элементах.
Цветовая палитра из брендбука
Фирменный графический элемент:
Три скошенные линии трех цветов, символизирующие 3 линейки роботов компании.
Три скошенные линии трех цветов, символизирующие 3 линейки роботов компании.
Логотип
Размещен в шапке сайта и в подвале.
Типографика
Основной шрифт: Inter Tight (закругленный, современный, хорошо читается даже в мелком кегле).
Medium начертание — для заголовков и акцентов.
Regular начертание — для основного текста.
Мы выбрали современный шрифт Inter Tight, потому что:
Визуальные элементы
Иконки: Минималистичные, залитые одним цветом, без лишних деталей. Созданы в едином стиле для всех разделов.
Размещен в шапке сайта и в подвале.
Типографика
Основной шрифт: Inter Tight (закругленный, современный, хорошо читается даже в мелком кегле).
Medium начертание — для заголовков и акцентов.
Regular начертание — для основного текста.
Мы выбрали современный шрифт Inter Tight, потому что:
- Отлично читается даже в мелком кегле
- Закругленные формы гармонируют с промышленной эстетикой
- Полужирные начертания создают четкую структуру контента
Визуальные элементы
Иконки: Минималистичные, залитые одним цветом, без лишних деталей. Созданы в едином стиле для всех разделов.
Пример дизайна одного из блоков
Инфографика:
Таблицы и графики (например, в блоке ROI) выполнены в фирменных цветах с аккуратными закругленными углами.
Таблицы и графики (например, в блоке ROI) выполнены в фирменных цветах с аккуратными закругленными углами.
Вот как блок преобразился после того как структурно-текстовый макет мы превратили в дизайн
Формы заявок
Чтобы формы выделялись на фоне остального контента, применены:
Контрастный темный фон и фоновый паттерн из стеклянных реек (полупрозрачные полосы, перекликающиеся с градиентом на фоне).
Чтобы формы выделялись на фоне остального контента, применены:
Контрастный темный фон и фоновый паттерн из стеклянных реек (полупрозрачные полосы, перекликающиеся с градиентом на фоне).
Блок с формой
Адаптивность:
Итог по дизайну
Лендинг получился:
Новый визуальный стиль позволил:
- Плавные переходы между блоками при скролле.
- На мобильных устройствах все элементы (особенно формы и таблицы) оптимизированы для тапов.
Итог по дизайну
Лендинг получился:
- Узнаваемым за счет следования гайдлайнам OLAMOT.
- Технологичным — градиенты и паттерны подчеркивают инновационность роботов.
- Удобным — даже сложная информация подана наглядно (иконки, инфографика).
Новый визуальный стиль позволил:
- Увеличить вовлеченность посетителей - время на странице выросло в несколько раз
- Повысить конверсию в заявки благодаря продуманной системе визуальных акцентов
- Усилить позиционирование OLAMOT как технологичного лидера рынка
- Улучшить восприятие сложной технической информации за счет инфографики
Этап 4: Техническая реализация
Адаптивность: Полная оптимизация под мобильные устройства (50% трафика).
Скорость загрузки: Сжатие изображений, ленивая загрузка, минификация кода.
Интеграции:
Скорость загрузки: Сжатие изображений, ленивая загрузка, минификация кода.
Интеграции:
- CRM (AmoCRM) для автоматизации заявок.
- Яндекс.Метрика с настройкой целей.
Результаты
Проект для OLAMOT подтвердил, что даже в сложной B2B-нише можно добиться высокой конверсии за счет:
После внедрения нового лендинга компания OLAMOT отметила существенное улучшение ключевых показателей:
1. Качественный рост входящих заявок. Количество поступающих обращений увеличилось в разы.
2. Существенно повысилось качество лидов – большинство заявок стали поступать от целевой аудитории.
3. Увеличился процент серьезных коммерческих запросов.
4. Улучшение пользовательского опыта. Посетители стали проводить на сайте значительно больше времени.
5. Возросла глубина просмотра – пользователи активно изучали все разделы.
6. Увеличилось количество скачиваний каталогов и коммерческих предложений.
7. Укрепление позиционирования бренда. Лендинг стал эффективным инструментом демонстрации экспертизы.
8. Улучшилось восприятие OLAMOT как технологичного лидера рынка.
9. Упростился процесс обработки входящих заявок.
10. Повысилась эффективность рекламных кампаний.
Эти результаты подтвердили, что разработанный лендинг стал полноценным инструментом продаж, который не только привлекает новых клиентов, но и качественно презентует компанию на рынке промышленной автоматизации.
Готовы создать такой же эффективный лендинг? Оставьте заявку, и мы подготовим индивидуальное решение для вашего бизнеса!
- Глубокого понимания ЦА.
- Четкой структуры с акцентом на выгоды.
- Интерактивных элементов, вовлекающих пользователя.
После внедрения нового лендинга компания OLAMOT отметила существенное улучшение ключевых показателей:
1. Качественный рост входящих заявок. Количество поступающих обращений увеличилось в разы.
2. Существенно повысилось качество лидов – большинство заявок стали поступать от целевой аудитории.
3. Увеличился процент серьезных коммерческих запросов.
4. Улучшение пользовательского опыта. Посетители стали проводить на сайте значительно больше времени.
5. Возросла глубина просмотра – пользователи активно изучали все разделы.
6. Увеличилось количество скачиваний каталогов и коммерческих предложений.
7. Укрепление позиционирования бренда. Лендинг стал эффективным инструментом демонстрации экспертизы.
8. Улучшилось восприятие OLAMOT как технологичного лидера рынка.
9. Упростился процесс обработки входящих заявок.
10. Повысилась эффективность рекламных кампаний.
Эти результаты подтвердили, что разработанный лендинг стал полноценным инструментом продаж, который не только привлекает новых клиентов, но и качественно презентует компанию на рынке промышленной автоматизации.
Готовы создать такой же эффективный лендинг? Оставьте заявку, и мы подготовим индивидуальное решение для вашего бизнеса!
Обсудим ваш проект?
Ответим на вопросы, предложим понятное и эффективное решение вашей задачи
Нажимая «Отправить», вы соглашаетесь с политикой конфиденциальности.
