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

Заказчик

Крыши.ру — один из региональных лидеров в сфере кровельных и фасадных материалов в Саратовской области.

Задача

Стратегический переход на новый бренд и его поднятие до лидирующих позиций за счет уровня экспертности.

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

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

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

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

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

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

• Проведение брифинга для определения фирменного стиля и понимания задач;
• Сбор и детализация технических требований, распределение этапов развития и масштабирования;
• Выбор оптимальной платформы под задачи лидогенерации и управления заявками;
• Анализ целевой аудитории и продуктов конкурентов для поиска простых и эффективных UX-решений;
• Проработка стилистики и формирование прототипа сайта с акцентом на удобный маршрут пользователя к заявке и возможности масштабирования;
• Разработка нескольких дизайн-концепций, согласование и подготовка финального технического задания для разработки;
• Программирование, верстка и тестирование для обеспечения корректной и быстрой работы ресурса;
• Итоговая приемка и сдача проекта с передачей всех документов и инструкций по дальнейшему расширению функционала.?

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

Учитывая формат работы — 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 и бесшовные переходы между страницами;
• Настроен корректный сбор данных из форм, создан кастомный шаблон письма, обеспечена стабильная доставка уведомлений на почтовый ящик ответственных лиц.

Перейти на сайт