Редизайн и обновление бизнес-сайта производителя металлических дверей “Грантъ”

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

Задачи проекта

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

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

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

Реализация цели

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

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

Первые три раздела (“Двери”, “Ворота” и “Решетки”) представляли собой страницы с небольшим текстами и превью карточек продукции (100 моделей дверей, размещенных путем пагинации). В разделе «Двери» под главным меню мы вывели ссылки на популярные категории, такие как «Уличные двери», «Входные двери для дачи», «Металлические двери на заказ» и другие. При клике на них посетитель попадал в соответствующую категорию. Эти же категории выведены и на главную страницу, прямо под главным меню.

Ниже на главной странице расположили:

• блок с небольшим текстом о заводе «Грантъ»;
• «Преимущества входных металлических дверей», которые мы хотели сделать в виде инфографики;
• блок с актуальными акциями;
• список с четырьмя карточками акционных дверей, на которых отображен размер скидки (в денежном, а не в процентном эквиваленте), и кнопка «Заказать».

За акционными карточками следует блок с 19 категориями дверей (от «Входных металлических дверей в квартиру» до “Двойных уличных дверей”). При клике на каждое из превью пользователь попадает в нужную категорию.

Ниже разместился блок с полезной информацией, которую важно знать до заказа металлической двери: типы конструкций, возможное количество листов полотна, виды отделки. Под этим блоком расположили инфографику - пошаговую схему «Как заказать», блоки «Контроль качества» (как он проводится на заводе «Грантъ»), «Гарантия» и «Наши клиенты» (тут планировалось разместить логотипы компаний-заказчиков продукции завода «Грантъ»).

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

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

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

Второй (дизайнер), тем временем, занимался дизайн-макетом главной страницы: оформил весь контент на ней, нарисовал иконки для инфографики, баннер для акции, подготовил фотографии для превью акционных дверей и картинки для категорий дверей. Затем он создал картинки для конструкций различных дверей (16 штук), подобрал картинки и фотографии для блока «Виды отделки» и нарисовал иконки для блока «Как заказать». Также дизайнер обработал логотипы компаний-клиентов, чтобы представить их в едином стиле.

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

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

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

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