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

Состав работ

  1. Анализ бизнес-требований
  2. Проектирование и дизайн ключевых интерфейсов
  3. Адаптивная frontend-разработка
  4. Поэтапное бесшовное внедрение

Проблема

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

Задача

Заново cпроектировать интерфейсы интернет-магазина и последовательно внедрить переработанные разделы без остановки работы сайта.

Решение

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

Шапка и меню

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

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

Чтобы увидеть старую версию страницы кликните на изображение и не отпускайте.
Новое меню на vuejs для интернет-магазина Добрострой
Старая версия меню магазина Добрострой
кликни и держи, чтобы увидеть старую версию

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

Адаптивный дизайн меню — было/стало на мобильном телефоне

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

Это позволило в пять раз сократить дерево элементов (DOM) страницы. В результате сайт быстрее загружается и отзывчивее реагирует на действия пользователя.

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

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

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

Редизайн главной страницы интернет-магазина Добрострой
Старая главная страница магазина Добрострой
кликни и держи, чтобы увидеть старую версию

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

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

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

Редизайн страницы товара интернет-магазина Добрострой
Старая страница товара магазина Добрострой
кликни и держи, чтобы увидеть старую версию

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

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

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

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

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

Связи сопутствующих товаров между собой настраиваются в 1С.
Сопутствующие товары настраиваются на стороне 1С и выводятся на странице товара

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

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

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

Продвинутая система отзывов на товары

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

Доступные услуги настраиваются для каждой товарной категории в 1С.
Список доступных услуг на странице товара

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

Поведение корзины при добавлении большого количества товаров

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

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

Каталог

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

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

Редизайн страницы каталога интернет-магазина Добрострой
Старая версия страницы каталога продукции магазина Добрострой
кликни и держи, чтобы увидеть старую версию

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

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

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

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

Состояния карточек товаров — наведение, добавление в корзину, изменение количества

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

Редизайн страницы каталога интернет-магазина Добрострой
Старая версия страницы каталога продукции магазина Добрострой
кликни и держи, чтобы увидеть старую версию

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

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

Ищете надежного подрядчика?

Расскажите нам о ваших задачах и мы сориентируем вас по стоимости работ.