Разработка сайта для дилера ALUTECH: от анализа рынка до запуска на "1С-Битрикс"
9 мин 37 Обновлено 4 сентября
Факты проекта
- Отрасль
- Ворота и автоматика, B2C + B2B
- Клиент
- "Колибри", kolibri95.ru
- Моя роль
- Маркетинг, дизайн, разработка, наполнение, аналитика
- Платформа
- 1С-Битрикс: Управление сайтом
Задача разработки сайта для дилера ALUTECH
// Создать сайт для регионального дилера федерального бренда в условиях, где у всех конкурентов одна и та же продукция, одни и те же прайсы и почти одинаковые аргументы.
Что было и что нужно было решить
(01) Что было
Минималистичный сайт с базовыми категориями и калькулятором. Сильные стороны компании – шоурум, инженерная экспертиза, обучение специалистов – на сайте почти не читались. Не было портфолио, отзывов, прозрачных условий, гарантий и внятного отличия от самого производителя и других дилеров.
(02) Что нужно было решить
- Найти позиционирование, которое не конкурирует с заводом-производителем напрямую
- Собрать сайт, одинаково работающий для частного клиента и для промышленного объекта
- Дать клиенту систему, которой он сможет управлять сам
Этапы работы над сайтом
Семь этапов, каждый со своим результатом на выходе. Ни один следующий не начинался, пока предыдущий не был принят клиентом.
1. Анализ рынка и разработка позиционирования
Четыре исследования
Самый объёмный этап проекта. Он состоял из четырёх исследований, и каждое дало материал, который потом лёг в конкретные блоки сайта.
Анализ рынка и отрасли. Кабинетное исследование рынка ворот, автоматики и смежных решений в Перми и Пермском крае: структура спроса, сезонность, каналы продаж, динамика последних лет, PEST-анализ, барьеры входа и регуляторные требования. Отдельно оценила зоны неудовлетворённого спроса – интеграция с умным домом, сервисное обслуживание и модернизация, нестандартные дизайнерские решения.
Целевая аудитория. Сегментация по B2C и B2B с описанием профиля, потребностей, продуктовых предпочтений и модели поведения каждого сегмента. Дальше – CJM по ключевым сегментам, CustDev-инсайты и разбор задач по логике JTBD. Именно отсюда выросли формулировки: "хочу видеть шоурум и гарантии", "хочу доступную цену, но качественный монтаж", "нужны решения под ключ, включая сервис".
Анализ конкурентов. Разбор официального представительства бренда и региональных игроков: ассортимент, ценовая политика, УТП, коммуникация, цифровое присутствие, клиентский опыт. Сравнительная таблица по единым критериям, отдельный разбор сайтов, SWOT-анализ "Колибри".
Позиционирование. Итоговое позиционирование сформировано на основании результатов анализа рынка, целевой аудитории и конкурентов. Дополнительно определены архетипы бренда, tone of voice, рекомендации по типографике и цветовой палитре.
Ключевое решение проекта
Конкуренты продают ворота. Завод продаёт продукт. Свободной осталась позиция того, кто продаёт результат.
"Колибри" – входные решения ALUTECH с инженерным подходом.
Ворота и автоматика ALUTECH – под ключ, с инженерной точностью, премиальной эстетикой и умной интеграцией.
Логика простая. Производитель – это завод и логистика: у него "вот ворота". Дилер с инженерной экспертизой может дать другое: расчёт под конкретный дом или объект, учёт архитектуры, реальную интеграцию в умный дом, сопровождение после монтажа. Клиент в этой категории покупает не изделие, а уверенность, что сделают правильно и потом не бросят. Это и стало территорией бренда.
Архетип: Мудрец. Эксперт и инженер, который делает сложное понятным. Доверие строится через системность, а не через обещания.
Архетип: Опекун. Партнёр, который сопровождает от первой консультации до долгосрочного сервиса. Спокойно, предсказуемо, без давления.
Tone of voice. Уверенно и профессионально, на "вы", без воды и без пафоса. Впечатление "профессионалы, которые решают", а не "продавцы, которые убеждают".
Как позиционирование определило структуру сайта
Каждый вывод исследования получил свой блок на странице. Это и есть проверка, что маркетинг был не для отчёта.
Инженерный подход. Бесплатный инженерный замер с точностью до миллиметра, расчёт нагрузок, учёт архитектуры объекта – вынесено в отдельный сквозной блок, а не спрятано в "услугах".
Страх "сделают не так". Главный барьер премиального сегмента снимается открытой командой с именами, стажем и зонами ответственности, многоступенчатым контролем и понятной гарантией по трём направлениям.
Умная интеграция. Зона неудовлетворённого спроса из анализа рынка стала полноценной темой на сайте: интеграция ворот и рольставен с системами умного дома.
Два пути пользователя. Каталог разведён на частные решения и промышленные, включая перегрузочное оборудование и шлагбаумы – без смешивания аргументации B2C и B2B.
Быстрый расчёт. Онлайн-калькулятор как ответ на поведение среднего сегмента: сравнить варианты и спланировать бюджет до разговора с менеджером.
Сервис как продукт. Обслуживание, регламентное ТО и время реакции сервисной службы описаны отдельно – это то, чего нет у большинства конкурентов в коммуникации.
Контент вместо баннеров. Рубрика "Взгляд инженера": разборы типовых ошибок и выбора конструкций. Экспертность подтверждается текстами, а не словом "профессионалы".
Шоурум в сценарии. Визит в шоурум оформлен как отдельный шаг воронки с понятным сценарием консультации, а не как строка с адресом в контактах.
Результат на выходе: четыре исследования рынка, целевой аудитории, конкурентов и позиционирования; сформулированное позиционирование, архетипы бренда и tone of voice – каждый вывод получил свой блок на странице.
2. Прототипирование сайта в Figma
Структура сайта и логика каждой страницы до отрисовки дизайна. Ключевая задача прототипов – развести два пути пользователя, которые в этой отрасли постоянно мешают друг другу: частный клиент, который хочет быстро посчитать и посмотреть, как это будет выглядеть у него, и представитель компании, которому нужны характеристики, ресурс циклов, сертификаты и условия сервиса. Одновременно проектировала сценарии калькулятора и точки входа в заявку на разных стадиях выбора.
Результат на выходе: структура сайта и логика каждой страницы, разведённые пути B2C и B2B, сценарии калькулятора и точки входа в заявку – утверждённые прототипы для перехода к дизайну.
3. Дизайн корпоративного сайта для дилера ALUTECH
После утверждения позиционирования и прототипов появилась визуальная система сайта. Задача была не просто оформить страницы, а передать через интерфейс три свойства бренда: инженерную точность, премиальную эстетику и человеческий сервис.
Дизайн продолжил позиционирование "Колибри" как инженерного бренда и партнёра: точного и технологичного, но без холодной корпоративности. Мудрец отвечает за структуру, ясную типографику, логику интерфейсов и ощущение инженерной точности. Опекун – за спокойную коммуникацию, человеческую подачу и ощущение сопровождения, а не продажи.
Отсюда – строгая структура и геометрия, крупная типографика, много свободного пространства, спокойные нейтральные поверхности и выраженный терракотовый акцент. Техническая информация подаётся структурно и без перегруза, а фотографии команды, шоурума и реализованных объектов добавляют бренду человеческое присутствие. При этом визуальный язык остаётся совместимым с продуктом ALUTECH, но формирует самостоятельный образ "Колибри".
Результат на выходе: визуальная система сайта – типографика, отступы, палитра с терракотовым акцентом – и утверждённые дизайн-макеты, совместимые с продуктом ALUTECH.
4. Разработка сайта на "1С-Битрикс"
Всю разработку вела на отдельном dev-сервере, не затрагивая действующий сайт клиента: пока создавалась новая версия, старый сайт продолжал работать и принимать заявки. Каталог, разделы решений, акции, блог, отзывы, формы и онлайн-калькулятор реализованы на "1С-Битрикс" с использованием его стандартной архитектуры и механизмов управления контентом.
Параллельно с разработкой собирала полную карту проекта для клиента: какие разделы существуют, из каких инфоблоков они собираются, какое поле за что отвечает и что изменится на сайте, если это поле поправить. Этот документ потом стал основой обучения.
Результат на выходе: рабочий сайт на "1С-Битрикс" на отдельном dev-сервере – каталог, разделы решений, акции, блог, отзывы, формы и онлайн-калькулятор – и карта проекта для клиента.
5. Наполнение сайта с помощью ИИ и перенос на продакшен
Каталог дилера – это большое количество однотипных товарных и технических страниц, где структура повторяется, а параметры меняются от модели к модели. Для такого объёма я выстроила процесс наполнения с ИИ по заранее заданным правилам: утверждённый tone of voice, единая структура описаний, фактура из технической документации ALUTECH и отдельные требования для каждого типа страницы.
ИИ формирует черновики карточек, описаний разделов, SEO-метаданных и служебных текстов. Я редактирую их, сверяю с первоисточниками и утверждаю перед публикацией. Технические характеристики, сертификаты, гарантии и нормативные данные проверяются вручную по документации производителя – здесь автоматическая генерация не заменяет верификацию.
После наполнения и приёмки сайт переносится с dev-сервера на production: подключаются домен и почта, настраиваются редиректы, robots.txt и sitemap.xml, затем повторно проверяются формы, заявки и основные пользовательские сценарии.
Результат на выходе: наполненный и проверенный сайт, перенесённый на production – с доменом, почтой, редиректами, robots.txt и sitemap.xml.
6. Обучение работе с сайтом на "1С-Битрикс"
После запуска клиенту важно самостоятельно управлять сайтом, а не обращаться к разработчику за каждым изменением. Поэтому обучение вошло в проект отдельным этапом.
Собрала визуальную инструкцию в Figma: как добавить товар, завести акцию, опубликовать новость или статью, изменить контент на главной и работать с заявками. Вместо большого текстового регламента – схема со скриншотами и пояснениями, где видно, какой раздел открыть, какое поле изменить и как это отразится на сайте.
Инструкция продолжает карту проекта, которую я собирала параллельно с разработкой: клиент получает не только готовый сайт, но и понятную систему для дальнейшей самостоятельной работы.
Результат на выходе: визуальная инструкция в Figma для контент-менеджера – как добавить товар, завести акцию, опубликовать материал и работать с заявками.
7. Настройка аналитики сайта: Яндекс.Метрика, Roistat и Битрикс24
Финальный этап – настройка аналитики. В Яндекс.Метрике настроены цели на ключевые действия: отправку заявки, расчёт в калькуляторе, вопрос инженеру, запись в шоурум и звонок. Roistat связывает источники трафика с обращениями и сделками, а интеграция с Битрикс24 позволяет продолжить этот путь уже внутри CRM.
В результате можно анализировать не только посещаемость сайта и количество заявок, но и весь путь от рекламного источника до обращения и дальнейшей работы с клиентом. Эти данные становятся основой для оценки рекламы и дальнейшего развития сайта.
Результат на выходе: настроенная сквозная аналитика – цели в Яндекс.Метрике, Roistat и интеграция с Битрикс24, показывающие путь от источника трафика до сделки.
Что показал проект
Исследование задаёт основу для решений
Когда до проектирования определены аудитория, конкурентное поле и позиционирование, структура, контент и визуальный язык сайта строятся на общей стратегии, а не на субъективных предпочтениях.
ИИ снимает объём, но не ответственность
ИИ ускорил подготовку большого массива однотипного контента. Факты, технические характеристики, сертификаты, гарантии и нормативные данные при этом остались под ручной проверкой.
Сайт нужно передать как систему
Проект завершился не публикацией страниц. Карта проекта, визуальная инструкция и обучение дали клиенту возможность самостоятельно управлять контентом и развивать сайт после запуска.
Разработка на dev-сервере защищает действующий бизнес
Новая версия создавалась отдельно от рабочего сайта. Действующий сайт продолжал принимать обращения, пока шли разработка, наполнение и согласование новой версии.
Материалы по теме
Что почитать дальше по этой теме.
