Модернизация сайта
Дверико.рф
Цель проекта
Доработать сайт: улучшить внешний вид, структуру страниц и удобство для пользователей.
Проблематика проекта
При этом времени на разработку нового сайта с нуля не было. Нужно было быстро и аккуратно привести в порядок уже существующую версию: сохранить рабочую основу, но сделать сайт современнее, понятнее и удобнее для покупателей.
План работ
Собрать список работ, которые нужно провести на сайте
Распределить работы по приоритетности и срокам
Поставить задачи на соответствующих специалистов
После согласования ТЗ и макетов внедрить изменения на сайт
Каких результатов достигли
Этапы работ
Подготовка
Создавать новый сайт с нуля не требовалось. Задача была другой — быстро и без лишней перестройки довести текущую версию до рабочего, понятного и визуально цельного состояния.
- Вместе с клиентом прошли по основным страницам, зафиксировали пожелания и спорные моменты, а затем со своей стороны добавили рекомендации по дизайну, структуре и юзабилити.
- Отдельно учли доработки от SEO-специалиста клиента. После этого собрали единый список задач, распределили их по приоритетам.
Модернизация Главной страницы
Именно она формирует первое впечатление о компании: показывает ассортимент, преимущества, акции, отзывы и помогает пользователю понять, куда двигаться дальше.
- Поэтому мы не ограничились точечными правками.
Для главной подготовили новую структуру, учли Техническое задание SEO-специалиста, пожелания клиента и наши рекомендации по визуальной подаче. После этого отрисовали макет, согласовали его и внедрили на сайт.
Главная страница до:
Главная страница после:
Доработки по остальным разделам сайта
- Наполнили сайт товарами и после этого запустили его в работу.
- Привели в порядок блок «Подбор параметров»: убрали лишние поля, исправили некорректную работу части фильтров и адаптировали отображение для мобильной версии.
- Добавили формы обратной связи. До начала работ на сайте не было форм для заявок, кроме корзины. Мы внедрили простую и понятную форму и разместили её в нужных местах.
- В карточках товаров убрали лишние поля, добавили блок с преимуществами, карту салона и мини-баннер с формой. А также внесли правки на страницы «Контакты» и «О компании».
Работа с параметром “цвет”
Отдельной большой задачей стала работа с параметром «цвет». На первый взгляд это небольшая деталь каталога, но именно она сильно влияла на удобство выбора дверей.
На сайте были двери разных производителей, и у каждого бренда была своя палитра оттенков. Один и тот же базовый цвет мог называться по-разному, из-за чего фильтр разрастался, становился перегруженным и не всегда помогал пользователю найти нужный вариант.
Как мы решили задачу
Работа была комплексной и состояла из нескольких параллельных этапов.
- Сначала нужно было заполнить цвета, чтобы не оставалось пустых элементов. Сложность была в том, что у клиента не было большей части изображений для цветовых образцов. Поэтому мы вручную собирали оттенки из доступных источников, приводили их к единому формату и загружали на сайт.
- Параллельно мы сгруппировали все оттенки по базовым цветам. Для этого выгрузили цвета всех производителей и распределили их по понятным группам: бежевые, серые, коричневые, белые и так далее.
- После этого программист добавил на сайт дополнительный справочник цветов, а мы заполнили его нужными значениями.
- Для удобного отображения дизайнер подготовил макеты для разделов каталога, карточек товаров и мобильной версии.
Разделы каталога до:
Разделы каталога после:
Карточка товара до:
Карточка товара после
В результате параметр «цвет» стал не просто заполненным, а действительно удобным для выбора. Пользователь видит понятные базовые группы, быстрее сужает ассортимент и при необходимости открывает полный перечень оттенков конкретного производителя.
Изменения в корзине
Еще одной важной зоной доработки стала корзина.
Изначально оформление заказа было разбито на несколько этапов. Пользователю приходилось последовательно переходить от шага к шагу и заполнять много данных, часть из которых не была нужна для первичной заявки. Такой сценарий удлинял путь до отправки заказа и повышал риск, что человек просто закроет страницу.
Полностью переделывать корзину с нуля было нерационально: на это потребовалось бы несколько недель, отдельное ТЗ, проработка внутренней логики и новый дизайн. А сайт уже нужно было запускать. Поэтому мы выбрали быстрый и практичный вариант — улучшить внешний вид и удобство корзины, не затрагивая ее внутреннюю работоспособность.
Корзина до:
Корзина после:
Что изменили:
— привели в порядок отображение цветов: теперь сначала показывается ограниченное количество вариантов, а полный список можно открыть при необходимости;
— убрали лишние поля;
— добавили доступные варианты оплаты и доставки;
— объединили оформление в единую форму: теперь пользователю не нужно переходить от одного этапа к другому, все поля открыты сразу.
После доработки корзина стала короче и понятнее: пользователь сразу видит все поля, понимает доступные варианты оплаты и доставки и быстрее доходит до отправки заявки.
Итог
- Мы не разрабатывали сайт заново, а точечно усилили уже готовую основу: обновили главную страницу, доработали каталог и карточки товаров, упростили корзину, навели порядок в параметре «цвет» и добавили недостающие формы обратной связи.
- В результате он стал аккуратнее визуально, понятнее по структуре и удобнее для пользователей.
- После основного этапа клиент продолжил обращаться к нам за дополнительными доработками и развитием сайта.