Разработка сайта для регионального поставщика кровельных материалов

1. Вводная задача от заказчика, проблематика, цели

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

Они являются официальным дилером именитых российских и зарубежных производителей: Tegola, Borge, Aquasystem, «Изоспан», Docke и других.

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

В итоге формируется два списка задач: то, как видит будущую работу клиент, и то, как это будет на самом деле. Здесь важно понимать, как просто это с уст заказчика и как многогранно со стороны исполнителя (всё как и всегда).

Задача клиента:

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

А теперь то, как мы видим эту задачу:

- Проведение брифинга для определения фирменного стиля и понимания задач;

- Сбор и детализация технических требований, распределение этапов развития и масштабирования;

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

- Анализ целевой аудитории и продуктов конкурентов для поиска простых и эффективных UX-решений;

- Проработка стилистики и формирование прототипа сайта с акцентом на удобный маршрут пользователя к заявке и возможности масштабирования;

- Разработка нескольких дизайн-концепций, согласование и подготовка финального технического задания для разработки;

- Программирование, верстка и тестирование для обеспечения корректной и быстрой работы ресурса;

- Итоговая приемка и сдача проекта с передачей всех документов и инструкций по дальнейшему расширению функционала.​

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Учитывая бизнес-цель и требования от сайта клиента, на выбор были представлены: ModX, 1С-Битрикс и Laravel. Путем обсуждения и учитывая уже имеющиеся процессы внутри компании решили остановиться на 1С-Битрикс по следующим причинам:

- Высокий уровень безопасности данных и возможность масштабирования (добавления новых функций)

- Возможность быстрой интеграции с учетной базой товаров 1С и Битрикс24 для комплексной работы сайта и менеджеров компании

- Подтвержденная эффективность отечественной разработки на основе анализа крупных конкурентов.

Учитывая формат работы — Time and Materials (доработка и усовершенствование во время разработки), нам требовалось продумать возможные риски и то, как мы могли минимизировать их влияние на процесс.

Учет возможных рисков и их минимизирование

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

Как значимый риск — просадок по SEO после релиза MVP. Предлагаем дополнительно подключение Яндекс Директа в течение 2–3 месяцев, пока ведется настройка и индексация нового сайта.

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

Анализируем целевую аудиторию

Аудитория собиралась на основе базы знаний самого клиента и желаемой аудитории, на основе которой было собрано три основных портрета:

- Владельцы частных домов и строитель (B2C);

- Строительно-ремонтные компании и подрядчики (В2В);

- Дилеры и региональные поставщики (В2В).

Промежуточный лендинг

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

Задачи лендинга:

- Начать индексировать новое доменное имя и повлиять на ранжирование еще до запуска основного сайта;

- Представить компанию исключительно под новым брендом, без отсылок к предыдущему названию;

- Автоматизировать сбор заявок от партнеров и мастеров прямо на мероприятии.

Ключевые блоки лендинга:

- Краткая презентация преимуществ сотрудничества;

- Перечень поставщиков;

- Контактная информация для оперативной связи;

- Форма заявки для потенциальных партнеров.

Бенчмарк или как тянем самое вкусное

За основу конкурентов для дальнейшего бенчмарка брались как региональные компании, так и крупные игроки, на чьи решения в формировании актуального UX/UI и функциональные паттерны опирались Крыши.ру.

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

Стилистику подбираем, прототип собираем

Учитывая все желания клиента и его перспективы, делим проект на несколько этапов этапа:

- Проработка MVP: главная, категории продукций (не каталог), квиз, акции/предложения, о компании, партнерам и контакты;

- Вторая версия сайта: внедрения каталога продукций, карточка товара, поиск, корзина/избранное, блог;

- Третья версия с добавлением калькулятора;

- Четвертая версия масштабирования за счет внедрения личного кабинета.

На этапе прототипирования берем за основу всё то, что прошло через анализ:

- Совмещаем информацию как для В2С, так и для В2В;

- Делаем упор на визуал: 3D, реализованные проекты, сопровождающий материал по всему сайту;

- Выделение всех необходимых преимуществ для внутренней воронки продаж.

Дизайнерские решения

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

Ключевые особенности дизайна:

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

- Навигация максимально упрощена с учетом особенностей целевой аудитории, чтобы сократить количество кликов и обеспечить быстрый доступ к необходимой информации;

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

Верстаем и натягиваем

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

Далее стояла задача в полноценной интеграции готовой вёрстки в CMS, поэтому складывался следующий ход работы:

- Анализ структуры проекта и организация работы с шаблонами: определено оптимальное место хранения и подключения повторяющихся компонентов (шапка и подвал) с учетом стандартов платформы;

- Детальная работа с инфоблоками: настройка и вывод пользовательских свойств элементов, параллельная разработка системы условного отображения интерфейсных блоков в зависимости от заполненности данных для повышения отказоустойчивости и точности интерфейса;

- Внедрение внутреннего роутинга 1С‑Битрикс для масштабируемого подключения аналогичных подходов на дочерних и внутренних страницах;

- Реализация раздела «Этапы» со списком и детальными страницами: в процессе отладки были выявлены ограничения стандартного роутинга, после чего логика ядра маршрутизации для данного раздела была переработана, что обеспечило корректную обработку всех URL и бесшовные переходы между страницами;

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

3. Результаты сотрудничества

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