Крона групп
Вебсайт для девелопера элитной недвижимости из клееного бруса
Роль
Project Lead, Full-stack разработчик, Маркетолог
Год
2024
Стек
Next.js App RouterReactTypeScriptZustandGraphQLZodTailwind CSSHeadless WordPress
Задача
У клиента был лишь базовый фундамент бренда: логотип и фирменные цвета. Отсутствовало современное цифровое представительство. Задача заключалась в создании с нуля не просто корпоративного сайта, а полноценного инструмента премиальных продаж на высококонкурентном рынке проектирования и строительства. Необходимо было разработать имиджевую платформу, систематизировать разрозненное портфолио проектов, внедрить многоуровневую фильтрацию, обеспечить максимальную техническую производительность и выстроить управляемую систему лидогенерации (SEO + контекстная реклама) с последующим полным техническим сопровождением.
Этапы
Аналитика и смысловая упаковка
- Проведен аудит конкурентов и целевой аудитории для выявления ключевых потребностей.
- Сформировано УТП и выделены главные преимущества компании, которые легли в основу текстовой структуры.
- Спроектирована сложная и логичная архитектура страниц, обеспечивающая удобную навигацию.
Визуальная концепция и UI/UX
- Взяв за основу предоставленный клиентом логотип и фирменные цвета, я подобрал комплементарную типографику.
- Разработан чистый, современный интерфейс с акцентом на качественный визуальный контент (фотографии объектов).
- Создана интуитивно понятная система фильтрации для каталога проектов и реализованных объектов, позволяющая пользователям легко находить нужные решения по площади, этажности и типу постройки.
Техническая разработка и архитектура
- Разработан кастомный бэкенд на базе Headless CMS WordPress. Это решение позволило оставить удобную и привычную для клиента админ-панель, обеспечив при этом максимальную скорость, безопасность и гибкость фронтенда.
- Настроена совместная работа по формированию и оцифровке базы портфолио: создана архитектура баз данных для хранения спецификаций каждого строительного объекта.
- Спроектировал frontend платформы вокруг Next.js App Router и Server Components: статическая генерация для маркетинговых страниц, стриминг для каталога.
- Настроен CI/CD для бесшовного деплоя обновлений и регулярного создания бэкапов.
Типизированный слой данных
GraphQL Codegen генерирует типы прямо из схемы CMS; Zod валидирует данные на границе. Рефакторинг стал скучным — в лучшем смысле слова.
Контент и поисковая оптимизация (SEO)
- Проведен глубокий рерайт описаний проектов с учетом семантического ядра и премиального позиционирования компании.
- Реализована тонкая техническая настройка для поисковых роботов: микроразметка (Schema.org), генерация sitemap, оптимизация мета-тегов, настройка редиректов и устранение дублей страниц.
Performance-маркетинг и развитие
- Запуск и оптимизация контекстной рекламы в РСЯ (Яндекс.Директ). Кампании были строго сегментированы для привлечения аудитории с высоким чеком из Новосибирска, а также с прицелом на расширение охвата на Казахстан.
- Настроена сквозная аналитика для отслеживания конверсий: от первого клика до оставленной заявки.
- Обеспечена непрерывная техническая поддержка, мониторинг uptime и плановое обновление функционала на протяжении двух лет.
Процесс
Как мы строили цифровой офис
Когда мы только начинали проект, на руках были только логотип и брендбук с базовыми цветами. Все остальное — от концепции до последней строчки кода — предстояло придумать и реализовать.
Сайт строительной компании в премиум-сегменте должен работать как хороший архитектор: говорить на языке пользы, показывать безупречный вкус и вызывать абсолютное доверие с первых секунд.
1. Смысловая упаковка и архитектура
Мы начали с фундамента. Я погрузился в бизнес-процессы клиента, чтобы понять, как именно они продают свои услуги. Мы вместе выделили ключевые преимущества, сформулировали УТП и продумали логику движения пользователя.
Что было сделано на этом этапе:
- Подобраны комплементарные шрифты, подчеркивающие статусность.
- Спроектирована архитектура каталога проектов.
- Разработана интуитивная система фильтрации, чтобы клиент мог в пару кликов найти "двухэтажный дом из клееного брус площадью 300 м²".
2. Техническое решение: выбор в пользу Headless
Чтобы обойти конкурентов, нам нужна была бескомпромиссная скорость загрузки и гибкость. Традиционный монолитный сайт нам не подходил. Я принял решение использовать архитектуру Headless CMS.
Почему именно Headless WordPress?
- Удобство для клиента. Заказчик получил привычную и интуитивно понятную админку WP для добавления новых проектов и новостей.
- Идеальная производительность. Фронтенд полностью отвязан от бэкенда, что позволяет интерфейсу «летать» и мгновенно реагировать на действия пользователя.
- Безопасность. Отсутствие прямой связи между пользовательской частью и базой данных сводит к минимуму риск взлома.
3. Контент и магия продвижения
Сайт без трафика — это просто красивая картинка. Как только техническая часть была готова, мы начали масштабную работу по привлечению целевых заявок.
- Работа с портфолио: Мы проделали огромную совместную работу по формированию базы проектов. Я организовал глубокий рерайт описаний, превратив сухие технические характеристики в продающие истории создания объектов.
- Поисковая оптимизация (SEO): Сайт изначально проектировался под требования поисковых роботов. Была настроена идеальная семантическая структура, устранены дубли, прописана микроразметка.
- Лидогенерация через РСЯ: Я настроил и запустил контекстную рекламу в сетях Яндекса. Мы не просто лили трафик, а точечно таргетировались на премиальный сегмент, постоянно оптимизируя кампании для снижения стоимости привлечения клиента.
Результат этих системных действий не заставил себя ждать: проект превратился в мощный и автономный генератор заявок.
Результаты
Сайт уверенно занимает первые места в органической выдаче Яндекса по основным целевым и коммерческим запросам в домашнем регионе.
Lighthouse производительность
LCP на 4G
Оцифровано, структурировано и упаковано в удобный каталог с умными фильтрами более 40 масштабных архитектурных проектов.
Снижение стоимости лида (CPA) на 35%: Благодаря связке «грамотное SEO + точечная настройка РСЯ» и высокой скорости работы сайта, удалось существенно повысить конверсию страниц (CR) и оптимизировать рекламный бюджет.