Редизайн
интернет-магазина
Добрострой

Проблема

Сайт интернет-магазина «Добрострой» был сделан на шаблонном решении: интерфейс был неудобным, а дизайн не соответствовал современным стандартам. Всё это портило конверсию.

Решение

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

Шапка и меню

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

Переработали логическую и визуальную структуру основного меню сайта и меню каталога.

Сделали лёгкую и естественную адаптивную версию: новая структура логична и хорошо считывается, навигация по подразделам стала удобнее.

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

Главная страница

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

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

Страница товара

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

На первом экране страницы товара мы расставили акценты на самой важной информации (фото, цена, бонусы за покупку, кнопки добавления в корзину и избранное) и сделали наполнение более полным и структурированным.

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

Например, основа «акриловая» в характеристиках краски указана активной ссылкой, при нажатии открывается новая вкладка со всеми акриловыми красками.

На странице каждого товара разместили раздел с сопутствующими товарами.

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

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

На основе оценок пользователей рассчитывается и отображается средняя оценка товара: она учитывает как первую оценку пользователя (первое впечатление), так и дополнительную оценку после использования.

Помимо самих товаров, клиентам часто нужны услуги: например, резка досок, колеровка красок или укладка ламината. Мы вывели на странице товара дополнительные услуги, которые можно оформить в корзине при заказе.

На странице товара теперь отображается информация о наличии, способах и сроках получения. Если доступна доставка, то отображается её минимальная стоимость.

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

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

Каталог

Мы существенно переработали мобильную и десктопную версию каталога, сделав его удобнее и понятнее.

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

В старой версии каталога выбор способа сортировки был представлен в виде четырёх мелких иконок без подписей: было непонятно, как ими пользоваться. Кроме того, иконка фильтра находилась с ними в одном ряду и терялась. Мы исправили эти проблемы.

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

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

Пользователю важно знать, есть ли товар на складе. Раньше на карточке товара отображался пункт «Есть в наличии» / «Нет в наличии», который занимал место. Мы реализовали отображение этой информации иначе: теперь для товаров в наличии активна кнопка «В корзину», а для распроданных товаров на месте этой кнопки отображается текст «Нет в наличии».

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

Оформление заказа

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