Сайт для системы автоматизации квартир и домов

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

HDL Automation в России —  эксклюзивный дистрибьютор брендов (HDL, CasaTunes, Coolautomation), которые производят оборудование по технологии «Умный дом» и системы автоматизации для квартир и домов, коммерческой недвижимости, гостиниц и отелей. Реализуют и устанавливают — через партнерскую сеть дилерских центров.

с 2019 по 2022 г — ежегодно занимают призовое место в мировом рейтинге «Ключевой партнер года».

Есть сертифицированный тренинг-центр, где обучают специалистов работе с оборудованием и системами автоматизации.

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

• Адаптивность не работала

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

Поисковые системы Яндекс, Google проверяют сайт на «mobile-friendly» — отображается он на мобильных устройствах или нет. Если нет, то его понижают в рейтинге, и он не попадает в ТОП. При этом десктопная версия в поисковой выдаче напрямую зависит от мобильной. А это значит, что в ранжировании сайт тоже проигрывает, и опять теряет клиентов.

• Административной панели не было

Это значит, что клиент не может самостоятельно управлять сайтом — добавить/удалить/заменить изображение или текст и регулировать настройки

• Верстка отличалась от согласованных дизайн-макетов
• Меню не соответствовало согласованному 
• Каталог оборудования не наполнен

01

Исправить ошибки на сайте

02

Сделать административную панель для наполнения сайта контентом

03

Опубликовать сайт 

Переделывать работу, тем более, чужую всегда труднее, чем собрать сайт с нуля. Вдобавок, ресурс был самописный — разработан на языке программирования Python, но без использования известных CMS (системы управления сайтом) или фреймворка (IT– заготовки, на основе которой можно дописывать свой код, или программировать). 

Это неудобно, потому что сайт привязан к автору, и без него очень сложно проводить дальнейшую разработку и вносить изменения. Объяснили заказчику ситуацию и предложили перенести на CMS Битрикс.

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

Такой подход помог заказчику минимизировать затраты и сэкономить время — клиенту не пришлось  оплачивать повторно за разработку и ждать все работы по фронтенду (внешней части сайта, которую видят пользователи, — это перевод всех элементов дизайн-макетов в код, чтобы все правильно работало)

Сначала мы взяли верстку, которая уже была сделана, и перенесли ее на CMS Битрикс.

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

Создали удобную административную панель — теперь заказчик может сам управлять сайтом, вносить изменения, удалять и добавлять контент.

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

Упорядочили размеры шрифтов — было более пяти разных.

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

Выровняли отступы — страницы стали выглядеть аккуратнее.

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

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

Отформатировали отображение товаров: значок или список

Настроили правильную работу фильтров оборудования — изменили логику сортировки и фильтрации продуктов в каталоге.

Для того чтобы пользователям было удобнее выбирать товары, добавили просмотр списком, в строку, и кнопку «Сбросить фильтры» — ее поместили наверх, над фильтрами.

Придумали новый дизайн страницы Проекты. Сделали его лаконичным,  в едином стиле с другими страницами ресурса. 

Изображение конструкций, обвитых сеткой проводов, не отражает суть проекта «Умный дом». А нагромождение из мелких картинок в нижнем поле — лишние элементы. Все вместе выбивается из стилистики сайта:

Вот так стало — оставили только шапку сайта:

Изменили сетку проектов. Кейсы были расположены неравномерно: одни занимали больше площади на странице, другие  — меньше. 

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

Фотографии и информация о проектах были разбросаны без какой-либо понятной логики.  

Решили упаковать все фотографии проектов по кейсам — стало удобнее просматривать фото с объектов и читать информацию по ним. 

Настроили поиск по сайту 

Добавили новые офисы

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

Сэкономили заказчику время и минимизировали затраты на исправление недоработок предыдущего подрядчика — использовали  по максимуму тот ресурс, который предоставил клиент.

Сделали административную панель — клиент может самостоятельно управлять сайтом и вносить изменения по контенту.

Полностью переделали страницу — Проекты. Изменили дизайн — использовали минимализм, чтобы объединить по стилистике с другими страницами ресурса.

Наполнили контентом страницы: Каталог, Новости, Проекты и добавили новые офисы.

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

Настроили адаптивность сайта — теперь сайт корректно отображается на экране обычного компьютера или планшетного и в смартфоне.

Опубликовали сайт на домене заказчика  https://hdlautomation.ru