Разработка B2B-сайта: ТЗ, экономика, этапы создания

В современном мире сайт – это не просто визитная карточка В2В компании, это мощный инструмент, который может помочь увеличить продажи, улучшить взаимодействие с клиентами и повысить узнаваемость бренда. Но как сделать так, чтобы сайт В2В компании действительно работал на поставленные задачи и приносил результаты? Именно об этом мы и поговорим в этой статье.

Привет, друзья! Меня зовут Светлана Пушкарь. Я — руководитель технического отдела группы компаний «Медиасфера». Сегодня поговорим про специфику разработки бизнес-сайтов, обязательные пункты в ТЗ и требования, которые нужно представить потенциальному подрядчику.

“Зачем” и “Почему”- главные вопросы в ТЗ сайта

Целевая аудитория и пользовательские сценарии

Чем отличаются и чем похожи сайты для B2B и B2C

Этапы создания В2В-сайта и их влияние на итоговый бюджет

Сэкономить время и нервы

Итак, вы решили создать новый сайт для вашей B2B компании. Отлично! Но прежде чем погружаться в мир дизайна, давайте шаг за шагом определим, зачем вам этот сайт и каких результатов вы хотите достичь.

Определение бизнес-целей сайта

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

Как определить ключевые показатели эффективности (KPI) для сайта

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

Количество новых лидов: Сколько потенциальных клиентов оставляют заявки через ваш сайт?
Конверсия посетителей в лиды: Какой процент посетителей вашего сайта превращается в лиды?
Среднее время на сайте: Сколько времени пользователи проводят на вашем сайте? Это показатель интереса к вашему контенту.
Показатель отказов: Процент посетителей, которые уходят с сайта, не совершив никаких действий.

<p>Замер KPI сайта через интерфейс Яндекс.Метрики</p>

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

Роль сайта в общей маркетинговой стратегии компании

Ваш сайт не должен существовать в вакууме. Он должен быть неотъемлемой частью вашей общей маркетинговой стратегии. Подумайте, как сайт будет интегрирован с другими вашими маркетинговыми инструментами: социальными сетями, email-рассылками, контент-маркетингом и так далее. Сайт должен дополнять и усиливать все маркетинговые действия по продвижению компании.

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

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

Часть информации сайта берется из общей базы, остальное - редактируется непосредственно дилером.

Поддомены для дилеров: Если у вас большая сеть дилеров, предоставьте им собственные (региональные) поддомены. Это позволит им запускать автономные рекламные кампании, иметь отдельный прайс-лист с региональными наценками и работать более эффективно на локальных рынках.
Интеграция с CRM: Убедитесь, что ваш сайт интегрирован с вашей системой управления взаимоотношениями с клиентами (CRM). Это поможет отслеживать взаимодействия с клиентами и дилерами, улучшать качество обслуживания и автоматизировать процесс продаж.

Планирование сроков реализации проекта

Разработка сайта – это не мгновенный процесс, и чтобы всё прошло гладко, важно заранее определить основные этапы и установить реальные сроки для их выполнения. Разбейте проект на несколько фаз, таких как планирование, дизайн, разработка, тестирование и запуск. Определите временные рамки для каждой фазы и убедитесь, что у вас есть запас времени на случай непредвиденных задержек.

Назначение ответственных лиц

Для того чтобы проект шел по плану и все задачи выполнялись вовремя, необходимо назначить ответственных лиц. Это могут быть как внутренние сотрудники вашей компании, так и внешние подрядчики. Определите, кто будет отвечать за координацию работ с разработчиками, кто будет следить за соблюдением сроков, кто займется контентом и SEO. Ясное распределение ролей и обязанностей поможет избежать путаницы и обеспечит эффективное взаимодействие всех участников проекта.

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

Чтобы точно выстроить пользовательские сценарии сайта, потребуется развернутая информация о целевой аудитории проекта. Разработчики обязательно спросят у вас следующее:

Кто ваши клиенты? Определите основные сегменты аудитории: их должности, отрасли, размер компаний и т.д.
Какие у них проблемы и потребности? Какие задачи они решают с помощью ваших продуктов или услуг.
Как они принимают решения? Каков процесс принятия решений в их компаниях: кто является лицом, принимающим решения, кто влияет на выбор продукта.

Если маркетинговых исследований в вашей компании не проводилось, используейте следующие “полевые” методы:

Опросы и интервью: Поговорите с вашими текущими клиентами и/или менеджерами отдела продаж.
Анализ данных: Изучите данные из вашей CRM-системы, Google Analytics, Яндекс.Метрики.
Конкурентный анализ: Посмотрите, что предлагают ваши конкуренты и как они взаимодействуют с клиентами. Идеи конкурентов можно брать на вооружение.

Разработка пользовательских сценариев

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

Создание персонажей: На основе данных о вашей аудитории создайте несколько типичных персонажей. Например, это могут быть "Мария – менеджер по закупкам" или "Алексей – технический директор".

Определение целей персонажей: Для каждого персонажа определите основные цели и задачи, которые они хотят решить с помощью вашего сайта. Например, Мария может искать информацию о новых продуктах и сравнивать цены, а Алексей – изучать технические характеристики и варианты интеграции.

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

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

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

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

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

Оптовые предложения и цены: Сделайте акцент на оптовых предложениях, объёмах закупок и специальных условиях для бизнеса. Представьте прайс-листы и условия сотрудничества, которые будут интересны компаниям, а не частникам.
Решения для бизнеса: Описывайте ваши продукты и услуги с точки зрения их пользы для бизнеса. Например, как они могут помочь оптимизировать процессы, снизить затраты или улучшить эффективность.
Кейсы и отзывы от компаний: Включите кейсы и отзывы от ваших корпоративных клиентов. Это создаст доверие и покажет, что вы успешно работаете с другими бизнесами.

<p>Для В2В компании клиентский портфель - самое сильное конкурентное преимущество</p>

Информационная архитектура

Ваш сайт должен быть удобным в навигации для корпоративных клиентов. Вот несколько советов:

Разделы для различных отраслей: Если ваши продукты подходят для различных отраслей, создайте отдельные страницы или разделы для каждой из них. Это поможет клиентам быстрее найти нужную информацию.

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

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

Контент и коммуникации

Контент на вашем сайте должен говорить на языке бизнеса. Вот несколько идей:

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

Закрытый раздел сайта, на котором обладатели франшизы могут пройти обучение

Общие моменты между B2B и B2C касаются юзабилити, адаптивного дизайна и сео-оптимизации:

На обоих типах сайтов присутствуют основные элементы и инфоблоки: главное меню, контактная информация, разделы с описанием товаров или услуг, информация о компании, кейсы/отзывы, поддержка клиентов и формы для обратной связи. Также сайты создаются по принципу удобства для пользователей: интуитивно понятными, с четкой навигацией и адаптивным дизайном для разных устройств.
Для обоих типов сайтов необходимо соблюдать требования поисковых систем для увеличения трафика и повышения позиций в органической выдаче: оптимизацию контента сайта под ключевые запросы, улучшение технических аспектов для ускорения загрузки и повышения индексируемости, а также стратегии внешней оптимизации для увеличения видимости сайта в интернете.
В зависимости от тематики ресурса, комплекс seo-работ может отличаться, но в любом случае этот аспект необходимо учитывать уже на первых этапах разработки сайта.
Как B2B, так и B2C сайты часто используют фотографии, видео и интерактивные элементы, например, калькуляторы стоимости услуг или настройщики продуктов для улучшения взаимодействия с пользователем и предоставления более развернутой информации.

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

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

Прототип. Это набросок будущего сайта, который схематично демонстрирует основную структуру, расположение и размер элементов, но без дизайнерских деталей. Зачастую прототип сдается черно-белым. Чтобы избежать несоответствия ожиданий и реальности, я рекомендую согласовывать прототип только внутри отдела маркетинга и тех поддержки. А для руководства и отдела продаж предоставлять на согласование следующую версию, с дизайном.

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

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

Пример прототипа В2В сайта можно посмотреть и скачать здесь.

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

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

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

Баннер первого экрана главной страницы сайта. Сложный дизайн, который нужно закладывать в ТЗ и смету

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

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

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

В качестве движка для B2B проектов мы используем фреймворки Laravel и YII. На них не накладываются ограничения, их легко поддерживать, а сайт получается более быстрым и гибким, в том числе для доработок.

Есть и другие CMS. Например, бесплатные WordPress и MODX. Сейчас они не поддерживаются, у них нет никаких стандартов качества, их постоянно взламывают. Поэтому с ними мы не работаем и никому не рекомендуем. Еще есть 1С Битрикс — отличная коммерческая система управления с качественной техподдержкой и каталогом решений. Но, к сожалению, она подходит скорее для стандартных B2C-проектов с классическими задачами, например, интернет-магазина.

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

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

Или такой вариант: при согласовании макета главной страницы в центре должен был размещаться видео-ролик. А в итоге заказчик передумал или не смог его снять. Тогда придется полностью переверстывать страницу и оплачивать дополнительную работу дизайнера.

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

Если клиент предоставляет фото продукции или проводит фотосессии заранее, мы используем эти материалы для дизайна. Если же нет, приходится искать компромисс.

Пример сайта, раздел “О компании”, проведена отдельная фотосессия в едином стиле

Текстовый контент – отдельная «боль» разработчиков сайта. В доброй половине техзаданий на сайт, которые я осмечивала, этот блок был упущен. Заказчики про него часто забывают. Но написание эффективных и информативных текстов без «воды» часто оказывается невозможным без вводных данных от заказчиков.

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

Тестирование. Этот этап критически важен для контроля качества и проверки работоспособности сайта, поиска и исправления ошибок, проверки совместимости со всеми браузерами и устройствами.

Тестирование наших проектов проходит в несколько этапов. Сначала его проводит команда разработчиков, затем технический и seo-отдел (юзабилити, скорость загрузки, требования по верстке и т.п.). Проверяем работоспособность в разных браузерах и на разных устройствах, так как сайт может по-разному функционировать, например, на Android и iOS. После внутренних испытаний тесты проводит менеджер проекта. Весь процесс сопровождается фиксацией ошибок в баг-лист, который регулярно обновляется и передается клиенту. После исправления ошибок мы проводим финальное тестирование уже на хостинге клиента: прописываем протокол HTTPS, подключаем формы обратной связи и пр.

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

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

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

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

Пример Технического задания на разработку В2В сайта можно посмотреть и скачать здесь.

Следуя этому плану, вы сможете избежать лишних трат и сэкономите время (и нервы!).

Тезисно дублирую важные рекомендации:

Если на старте клиент и подрядчик детально обсуждают все нюансы: этапы разработки (в том числе ТЗ, прототип и дизайн), сложности, которые могут возникнуть, затраты и пр., то в релизе мы получим результат, который точно удовлетворит заказчика.
Готовьтесь к плотной работе. Схема «сдал ТЗ – через месяц получил сайт» не работает в В2В. На каждом этапе заказчик и подрядчик держат контакт, потому что в рамках плотного взаимодействия могут возникнуть новые задачи и доработки: дополнительный функционал, дизайнерские решения и пр., которые ранее не были оговорены.
При разработке сайта можно серьезно сэкономить, если уже на начальной стадии согласовать полный объем предстоящих работ, а также продумать внутренние задачи. Иначе в некоторых случаях денежные и временные затраты на доработку проекта могут быть существенными: придется откатиться к началу и переделать все этапы разработки, которые были согласованы ранее (от прототипа до тестирования). Иногда лучше заложить функционал на перспективу, даже если сейчас вы не планируете им пользоваться, так как «включить» уже имеющийся инструмент проще и дешевле, чем дописывать сайт.
Нужно помнить про SEO уже на начальных этапах создания сайта: структура сайта и кластеризация закладываются на этапе прототипирования. Даже если вы не планируете сео-оптимизацию B2B-ресурса, нужно соблюсти основные требования поисковых систем: меню, элементы футера, наличие определенных блоков и пр.
Создание B2B сайта зачастую гораздо сложнее, чем ресурс для B2C, поэтому не стоит пытаться экономить на шаблонных решениях и бесплатных движках. Если бизнес будет расти, сайт придется серьезно дорабатывать, искать подрядчиков и платить немалые деньги. С фреймворками это сделать гораздо проще.
Не пренебрегайте анализом конкурентов — они могут «подсказать» хорошее решение и помогут разработать сайт с уникальным функционалом и УТП.
Помните, что B2B-сайт — это про лаконичность, удобство пользователей и повышение лояльности к бренду, а не яркий дизайн и быструю продажу здесь и сейчас.
Прислушивайтесь к мнению разработчиков — благодаря своему опыту и экспертизе в создании сайтов для разных бизнес-сфер, они помогут реализовать все поставленные задачи и подсказать лучшие решения конкретно для вашего сайта.

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