Разобрались с ошибками в коде, с версткой, другими недоработками по сайту от предыдущего подрядчика и исправили их, переработали страницу «Проекты», наполнили каталог товаром и скорректировали сортировку и фильтрацию, создали удобную административную панель для работы с контентом и опубликовали сайт на домене заказчика.
Привет! Мы — студия дизайна «Арбуз». С 2016 года создаём digital-инструменты, которые помогают бизнесу расти и продавать: логотипы, презентации и маркетинг-киты, сайты и страницы захвата, рекламное и презентационное видео.
Делаем дизайн с упором на маркетинг, продажи и здравый смысл. 🍉🔥
Работаем с динозаврами и стартапами — помогаем вдохнуть новую жизнь в крупный проект и упаковаться с нуля.
Дважды выигрывали ежегодный международный конкурс Logolounge. Так, в 2020 году авторитетное жюри в индустрии графического дизайна разбирало 42 тысячи проектов. 8 работ студии попали в топ-300 лучших логотипов мира–2020. Их опубликовали в очередном томе книги от Logolounge. В каталоге собрана и каждый год пополняется коллекция логотипов мирового уровня.
В 2021 году — сайт студии получил награду от Tilda Publishing. Опубликован на главной странице подборки лучших ресурсов по веб–дизайну.
На рынке веб–индустрии огромная конкуренция, и всегда есть риск попасть на недобросовестного исполнителя. В статье делимся кейсом о том, как мы спасли ситуацию заказчику, которого подвел подрядчик.
О клиенте
HDL Automation в России — эксклюзивный дистрибьютор брендов (HDL, CasaTunes, Coolautomation) , которые производят оборудование по технологии «Умный дом» и системы автоматизации для квартир и домов, коммерческой недвижимости, гостиниц и отелей. Реализуют и устанавливают — через партнерскую сеть дилерских центров.
с 2019 по 2022 г — ежегодно занимают призовое место в мировом рейтинге «Ключевой партнер года».
Есть сертифицированный тренинг-центр, где обучают специалистов работе с оборудованием и системами автоматизации.
Задача
Заказчик пришел к нам со своими дизайн–макетами и почти готовым сайтом. На интервью выяснили, что предыдущий подрядчик не справился с работой — в той версии продукта, которая сделана, допущены ошибки, и доработкам не видно конца. Поэтому клиент никак не мог запустить сайт, чтобы он уже, наконец, начал приносить деньги.
Что не устраивало:
Адаптивность не работала. Сайт должен подстраиваться под экраны разных устройств (компьютер, планшет или смартфон) . При этом гаджеты особенно важны, поскольку большинство пользователей заходят на сайт с мобильного телефона. Если сайт не адаптирован под маленький экран — это потеря части клиентов.
Поисковые системы Яндекс, Google проверяют сайт на «mobile-friendly» — отображается он на мобильных устройствах или нет. Если нет, то его понижают в рейтинге, и он не попадает в ТОП. При этом десктопная версия в поисковой выдаче напрямую зависит от мобильной. А это значит, что в ранжировании сайт тоже проигрывает, и опять теряет клиентов.
Административной панели не было. Это значит, что клиент не может самостоятельно управлять сайтом — добавить/удалить/заменить изображение или текст и регулировать настройки.
Верстка отличалась от согласованных дизайн-макетов.
Меню не соответствовало согласованному.
Каталог оборудования не наполнен.
Нужно было решить задачи:
1. Исправить ошибки на сайте.
2. Сделать административную панель для наполнения сайта контентом.
3. Опубликовать сайт.
С какими трудностями столкнулись:
Переделывать работу, тем более, чужую всегда труднее, чем собрать сайт с нуля. Вдобавок, ресурс был самописный — разработан на языке программирования Python, но без использования известных CMS (системы управления сайтом) или фреймворка (IT– заготовки, на основе которой можно дописывать свой код, или программировать) . Это неудобно, потому что сайт привязан к автору, и без него очень сложно проводить дальнейшую разработку и вносить изменения. Объяснили заказчику ситуацию и предложили перенести на CMS Битрикс.
Заказчик хотел запустить сайт, как можно скорее, и он уже заплатил предыдущему подрядчику за разработку, поэтому мы решили пойти клиенту навстречу — взять по максимуму то, что уже было сверстано и соответствовало согласованным дизайн-макетам. Остальное — пересобрать.
Такой подход помог заказчику минимизировать затраты и сэкономить время — клиенту не пришлось оплачивать повторно за разработку и ждать все работы по фронтенду (внешней части сайта, которую видят пользователи, — это перевод всех элементов дизайн-макетов в код, чтобы все правильно работало)
Сначала мы взяли верстку, которая уже была сделана, и перенесли ее на CMS Битрикс.
Разобрались с чужим кодом — нужно было найти ошибки и исправить их. Объяснили заказчику, что это результат работы предыдущего подрядчика. Процесс трудоемкий и занимает много времени, но без него невозможно гарантировать стабильную работу сайта и дорабатывать его в дальнейшем при необходимости.
Создали удобную административную панель — теперь заказчик может сам управлять сайтом, вносить изменения, удалять и добавлять контент.
Поработали над типографикой — улучшили юзабилити сайта.
- Заменили шрифты, чтобы они были удобны для восприятия, и оставили два вида — для заголовка и для основного текста. Было — больше трех, что не рекомендуется в дизайне, поскольку нарушает смысловую иерархию сайта.
Упорядочили размеры шрифтов — было более пяти разных.
В данном случае мы придерживались принципа минимализма, чтобы не нарушать деловой стиль и общую эстетику сайта.
- Выровняли отступы — страницы стали выглядеть аккуратнее.
Привели в порядок Каталог, сортировку и внутренние страницы продуктов.
- Заполнили Каталог товаром. Чтобы исключить ошибку и правильно распределить продукты на сайте, сначала сформировали гугл–таблицу и расписали все товары по каталогу, категории и типу:
- После того как разобрались с продуктами и сгруппировали их, каталог на сайте приобрел упорядоченный вид:
- Переделали карточки товаров так, чтобы можно было прочитать информацию по характеристикам — раньше они были нечитаемы.
- Настроили правильную работу фильтров оборудования — изменили логику сортировки и фильтрации продуктов в каталоге.
Для того чтобы пользователям было удобнее выбирать товары, добавили просмотр списком, в строку, и кнопку «Сбросить фильтры» — ее поместили наверх, над фильтрами.
Полностью пересобрали страницу — «Проекты»
- Придумали новый дизайн страницы Проекты. Сделали его лаконичным, в едином стиле с другими страницами ресурса.
Изображение конструкций, обвитых сеткой проводов, не отражает суть проекта «Умный дом». А нагромождение из мелких картинок в нижнем поле — лишние элементы. Все вместе выбивается из стилистики сайта:
Вот так стало — оставили только шапку сайта:
Изменили сетку проектов. Кейсы были расположены неравномерно: одни занимали больше площади на странице, другие — меньше.
Из интервью с заказчиком, мы узнали, что для компании все проекты важные и значимые. Поэтому мы решили разместить все кейсы на одинаковом расстоянии друг от друга. Это позволило не только визуально упорядочить изображения, но и показать больше проектов в сетке.
Фотографии и информация о проектах были разбросаны без какой-либо понятной логики.
Решили упаковать все фотографии проектов по кейсам — стало удобнее просматривать фото с объектов и читать информацию по ним.
Настроили поиск по сайту:
Добавили новые офисы:
Что получили в результате:
1. Исправили ошибки в чужом коде и перенесли самописный сайт на платформу Битрикс — теперь клиент не привязан к автору проекта, и, если возникнут вопросы, может без труда найти специалиста, поскольку у Битрикс широкое сообщество разработчиков.
2. Сэкономили заказчику время и минимизировали затраты на исправление недоработок предыдущего подрядчика — использовали по максимуму тот ресурс, который предоставил клиент.
3. Сделали административную панель — клиент может самостоятельно управлять сайтом и вносить изменения по контенту.
4. Полностью переделали страницу Проекты. Изменили дизайн — использовали минимализм, чтобы объединить по стилистике с другими страницами ресурса.
5. Наполнили контентом страницы: Каталог, Новости, Проекты и добавили новые офисы.
6. Поработали над юзабилити сайта — отрегулировали шрифты и отступы, кнопки–якоря, улучшили логику фильтрации и сортировки товара в Каталоге и скорректировали изображение продуктов, сделали единый размер кейсов на странице Проекты и упорядочили фотографии внутри них, настроили поиск по сайту.
7. Настроили адаптивность сайта — теперь сайт корректно отображается на экране обычного компьютера или планшетного и в смартфоне.
8. Опубликовали сайт на домене заказчика.