сделать строгий корпоративный сайт, который будет одной из точек контакта при тендерах. Также нужен результат в заявках, позициях по SEO и конверсии. Углубившись в проект, мы поняли, что помимо поставленных задач предстоит масштабная работа и по другим направлениям.

Задача от клиента была комплексной:

Основная проблема – это сложная тематика и отсутствие на сайте полезного и понятного контента на сайте.

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

Сделали:

Расположение технологий на новом сайте

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

1. Услуги и технологии

2. Гранд-прототип

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

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

Гранд-прототип облегчил задачу всем специалистам, которые участвовали в создании и наполнении сайта: дизайнерам, маркетологам, копирайтерам и программистам.

Метод гранд-прототипа уже доказал свою успешность в других наших проектах. К моменту разработки сайта «Росконтракт» мы довели наш пилотный метод до совершенства и извлекли из него максимум пользы.

3. Доработки сайта

По мере создания страниц мы выкладывали их на старый сайт, затем эти страницы с новым наполнением и форматом переехали на новый.

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

Фрагмент гранд-прототипа нового сайта

Для нового сайта мы разработали современный и понятный дизайн, который отображает специфику отрасли и значимость «Росконтракта» на промышленном рынке. Через дизайн мы постарались донести основную идею бизнеса клиента: «Работая с нами вы делаете выбор в пользу инновационных технологий и развиваете свое производство».


В данном случае дизайн должен был решить две задачи: с одной стороны представить сайт в строгом корпоративном стиле, показывающем масштаб и серьезность бизнеса клиента. Например, чтобы сайт «Росконтракта» достойно представлял компанию при участии в тендерах. А с другой стороны, дизайн должен быть привлекательным для посетителя, который пришел с SEO или контекста.

1. Дизайн

2. Разработка

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

Дизайн главной страницы нового сайта

Унификация – отличительная черта этого проекта. Благодаря наличию гранд-прототипа и гранд-дизайна у разработки появилась возможность сегментировать блоки по типам и схожим признакам. Такой подход дает широкие возможности по дальнейшему масштабированию проекта.

Дизайн страницы услуг на новом/старом сайте

Видео с прокруткой сайта

В работе для сборки видимой части сайта мы использовали сборщик пакетов Gulp с использованием css, и внедрили этот инструмент в 1C-Битрикс. Это позволило собирать стили и скрипты из удобного формата и на лету преобразовывать их в оптимизированные сжатые файлы, что благоприятно сказалось на скорости работы сайта и удобстве его дальнейшего обслуживания. После устранения багов мы приступили к оптимизации скорости работы и довели сайт до зеленой зоны согласно самым популярным тестам

Текущая скорость загрузки на примере главной страницы на ПК