Разработка сайта‑каталога для компании Битек24

🔵 разработать понятный каталог услуг с фильтрацией по категориям (бытовой ремонт, строительные работы, отделочные работы и т. д.);

🔵 создать информативные карточки услуг с описанием, фиксированными ценами, фотографиями работ;

🔵 реализовать удобные формы заявок (на расчет стоимости, вызов мастера, консультацию);

🔵 интегрировать раздел с портфолио выполненных работ;

🔵 добавить раздел «Гарантии» (о компании, условия работы, достижения);

🔵 создать раздел «Смета» (цены по каждому проекту);

🔵 обеспечить адаптивность под все устройства;

🔵 провести базовую SEO‑оптимизацию для роста органического трафика;

🔵 настроить CMS для простого обновления цен и описания услуг.

Этап 1. Маркетинг

Собрали информацию по принципу трех «К»: Компания, Клиенты, Конкуренты.

Компания:

🔵 провели интервью с клиентом;

🔵 проанализировали прайс‑листы, технические регламенты и маркетинговые материалы;

🔵 составили карту пользовательских сценариев (например, «хозяйка ищет мастера по укладке плитки», «владелец квартиры хочет сделать капитальный ремонт», «предприниматель ищет подрядчика для ремонта офиса»).

Клиенты:

🔵 сформировали образ целевой аудитории:

• владельцы квартир и домов;

• арендаторы, желающие улучшить жилье;

• предприниматели (владельцы офисов, магазинов, кафе);

• управляющие компаниями ЖКХ;

🔵 создали 6 «аватаров клиента» для разных сегментов;

🔵 проанализировали боли и потребности (прозрачность цен, примеры работ, гарантия, скорость реагирования, возможность онлайн‑заказа).

Конкуренты:

🔵 изучили 20 сайтов конкурентов в нише ремонтных и строительных услуг;

🔵 выбрали 15 лучших практик по представлению портфолио, оформлению цен и сбору заявок;

🔵 составили список из 34 идей для реализации.

На основе данных сформировали «Чемодан знаний».

Результат:

🔵 6 аватаров клиентов;

🔵 исследование компании;

Этап 2. Проектирование

Используя «Чемодан знаний», спроектировали ключевые страницы:

🔵 главная страница;

🔵 каталог услуг (13 категорий услуг) ;

🔵 карточки услуг (описание, порядок работ и готовые примеры с описанием и фото, тарифы, список услуг, мастера;

🔵 портфолио (примеры работ с фото и описанием);

🔵 формы заявок (на расчет стоимости, вызов мастера, консультацию);

🔵 раздел «Гарантии»;

🔵 «Смета» (цены по каждому проекту);

🔵 «О компании» (команда мастеров, лицензии, сертификаты);

🔵 «Отзывы клиентов»;

🔵 контакты.

Разработали прототипы всех страниц. Неоднозначные функции описали в техническом задании (ТЗ), сделав его лаконичным, без повторов и лишней информации.

Результат:

🔵 прототипы страниц;

🔵 документ ТЗ.

Этап 3. Дизайн сайта

Что сделали:

🔵 разработали дизайн с учетом специфики услуг и потребностей целевой аудитории;

🔵 создали адаптивные макеты для планшета и смартфона;

🔵 проработали UX‑элементы: фильтры каталога, карточки услуг, формы заявок, кнопки «Рассчитать стоимость», «Вызвать замерщика»;

🔵 подобрали фотоконтент (примеры выполненных работ, фото мастеров, процесс ремонта);

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

Результат: дизайн‑макеты всех страниц.

Этап 4. Верстка

Что сделали:

🔵 сверстали макеты с использованием HTML, CSS и JavaScript;

🔵 оптимизировали скорость загрузки (сжатие изображений, кеширование, отложенная загрузка фото);

🔵 обеспечили адаптивность для разных браузеров и устройств;

🔵 протестировали отображение на экранах с разным разрешением.

Результат: готовые HTML‑страницы сайта.

Этап 5. Разработка (back‑end)

Разработали сайт bitec24.ru на платформе «1С‑Битрикс» (лицензия «Малый бизнес»).

Реализовали модули:

🔵 каталог услуг с фильтрацией по категориям;

🔵 карточки услуг с описанием, фиксированной ценой, фото примеров, сроками и кнопкой «Оставить заявку»;

🔵 портфолио (галерея работ с фильтрацией по типам услуг);

🔵 формы заявок (на расчет стоимости, вызов мастера, консультацию, обсуждение сметы);

🔵 «Гарантии» (описание гарантий, договор, правила работы);

🔵 «О компании» (команда, лицензии, сертификаты, история);

🔵 «Смета» (наименование и стоимость работ);

🔵  новости (события в сфере ремонта и дизайна).

Дополнительно:

🔵 настроили кеширование и оптимизировали производительность (сократили время загрузки страниц);

🔵 провели SEO‑оптимизацию (ЧПУ, метатеги, микроразметка, карта сайта);

🔵 интегрировали CRM (Битрикс24) для обработки заявок и управления клиентами;

🔵 подключили SSL‑сертификат;

🔵 настроили автоматическую выгрузку и обновление цен из внутренней системы компании.

Результат: альфа‑версия сайта.

Этап 6. Тестирование и запуск

Что сделали:

🔵 проверили работоспособность всех функций (фильтры, формы, личный кабинет, галерея портфолио);

🔵 протестировали адаптивность на разных устройствах (десктоп, планшет, смартфон);

🔵 устранили баги и оптимизировали скорость загрузки;

🔵 перенесли сайт на основной сервер и подключили домен;

🔵 провели финальное SEO‑сканирование и исправили выявленные недочеты.

Результат: готовый сайт.

Этап 7. Обучение

Мы сделали систему внутри Битрикса максимально простой, убрали лишние элементы из интерфейса. 

Далее мы настроили работу удобного редактора Wysiwyg (похож на MS Word). Он удобен для создания контента и редактирования страниц.

Для удобной работы менеджера со стороны заказчика мы:

🔵 подготовили видеоинструкции по управлению контентом (добавление услуг, обновление цен, публикация портфолио);

🔵 провели онлайн‑консультацию для сотрудников;

🔵 продемонстрировали функционал сайта и ответили на вопросы;

🔵 передали документацию по администрированию.

Результаты:

🔵 подготовленная документация;

🔵 готовая инструкция;

🔵 менеджер заказчика получил навыки самостоятельного управления сайтом.