Кейс KorDevTeam
Разработка сайта строительной компании на основе кастдева — АльянсСтройГарант
Провели около 30 проблемных интервью, собрали вопросы и сложности людей во время ремонта и на этой основе спроектировали сайт с услугами, этапами, ценами, портфолио и формами обращения.
Интерфейс
Как выглядит продукт
1 / 4
Контекст
Задача
Строительной компании требовался сайт, который отвечает на реальные вопросы заказчиков ремонта, понятно объясняет услуги и процесс работы, показывает выполненные объекты и приводит посетителя к консультации.
Ограничения
- Структуру и содержание нужно было подтвердить исследованием аудитории, а не внутренними предположениями
- На одном сайте требовалось развести сценарии коммерческого ремонта, квартир и домов и дополнительных услуг
- Интерфейс должен был одинаково работать на экранах от 320 до 1440 пикселей
- Формы обращений, аналитика и поисковая оптимизация должны были быть готовы к эксплуатации
Подтверждённый эффект
Результаты
- 01
Структура подтверждена интервью
Состав страниц и блоков сформирован по результатам около 30 разговоров с людьми, знакомыми с ремонтом на собственном опыте.
- 02
Путь клиента собран в одном сценарии
Посетитель видит направления услуг, этапы, ориентиры по стоимости, выполненные объекты и форму консультации.
- 03
Обращения обрабатываются системой
Формы связаны с серверным API, а данные проходят проверку и сохраняются для дальнейшей работы.
- 04
Сайт готов к продвижению
Реализованы аналитика, техническое SEO, адаптивность и архитектура для дальнейшего развития.
Подход
Решение
Провели около 30 проблемных интервью, собрали повторяющиеся сложности при ремонте и на их основе спроектировали структуру сайта. Реализовали отдельные направления услуг, понятную схему этапов, портфолио с параметрами объектов, отзывы, формы консультации и серверную обработку обращений.
Архитектура
Frontend на Next.js 14 и TypeScript обращается к REST API на Laravel 10. Публичные страницы, интерактивные модальные окна и формы разделены на компоненты; сервер проверяет и сохраняет обращения, а интеграции отвечают за карты, аналитику и технический мониторинг.
Возможности
- Разделение услуг на коммерческие помещения, квартиры и дома и дополнительные работы
- Пять этапов сотрудничества от замера до приёмки результата
- Портфолио с площадью, бюджетом, сроком и подробностями проекта
- Отзывы и подробные модальные окна
- Формы консультации с согласием на обработку данных
- Страницы о компании и контактов с интерактивной картой
- Адаптивные версии для мобильных, планшетов и десктопов
- PWA-режим и мультиязычная архитектура
- Кнопки поделиться проектом и скопировать ссылку
- Метаданные, Open Graph, canonical, robots.txt и sitemap
Интеграции
- Laravel API для форм обратной связи
- Telegram для уведомлений о серверных ошибках
- Яндекс Карты
- Яндекс Метрика
Технологии
- Next.js 14
- React
- TypeScript
- next-intl
- next-pwa
- Laravel 10
- PHP 8.1
Сначала разобрались, что действительно важно заказчикам ремонта
До проектирования сайта провели кастдев — около 30 проблемных интервью с людьми, которые уже сталкивались с ремонтом. Мы фиксировали их вопросы, сомнения и трудности, а затем собрали список повторяющихся проблем. Исследование показало, какую информацию человек хочет увидеть до первого разговора с подрядчиком: понятный состав услуг, последовательность работ, ориентиры по стоимости и реальные примеры объектов.
Структура сайта появилась из интервью
Результаты кастдева перевели в конкретные разделы и пользовательские сценарии. Услуги разделили на ремонт коммерческих помещений, квартир и домов, а также дополнительные работы. Отдельно показали пять этапов сотрудничества — от замера и сметы до ремонта и приёмки. Для портфолио разработали карточки и подробные окна с площадью, бюджетом, сроком и фотографиями объекта. Добавили отзывы, информацию о компании, контак ты и формы консультации.
Реализовали не только витрину, но и рабочий канал обращений
Frontend разработали на Next.js 14 и TypeScript с адаптивными версиями от смартфонов до широких экранов. Добавили отдельные сценарии для разных направлений ремонта, интерактивное портфолио, модальные окна, возможность поделиться проектом и PWA-режим. Формы сайта работают через API на Laravel 10: данные проверяются и сохраняются на сервере, а технические ошибки передаются в Telegram для оперативного контроля.
Подготовили сайт к продвижению и развитию
Настроили метаданные, Open Graph, canonical-ссылки, robots.txt и sitemap, исключили служебные модальные страницы из индексации. Подключили Яндекс Метрику и карту, заложили мультиязычную архитектуру через next-intl.
Результат
Компания получила сайт, структура которого основана не на внутренних предположениях, а на реальных вопросах людей, прошедших через ремонт. Посетитель может выбрать подходящее направление, понять порядок работы, посмотреть завершённые объекты и перейти к консультации в одном последовательном сценарии.
Реализация
Этапы проекта
- 01
Кастдев и проблемные интервью
Поговорили примерно с 30 людьми, прошедшими через ремонт, и собрали повторяющиеся вопросы, сложности и ожидания от подрядчика.
- 02
Структура и UX/UI
Перевели результаты исследования в разделы услуг, этапы работы, цены, портфолио, отзывы, гарантии и понятный путь к консультации.
- 03
Frontend-разработка
Собрали адаптивный интерфейс на Next.js и TypeScript, реализовали вкладки услуг, портфолио, модальные окна и пользовательские сценарии.
- 04
Backend и обращения
Разработали API на Laravel, валидацию и сохранение форм, а также технические уведомления для контроля ошибок.
- 05
SEO, аналитика и запуск
Подготовили поисковые метаданные и карту сайта, подключили Яндекс Метрику и проверили ключевые сценарии перед публикацией.
Команда
Кто работал над проектом
- Продуктовый аналитик
- UX/UI-дизайнер
- Frontend-разработчик
- Backend-разработчик
- QA-инженер
- Проектный менеджер
Начнём с разговора
Обсудить похожую задачу
Обсудим, что нужно вашему бизнесу, и предложим следующий шаг.