Дизайн интернет-магазина стройматериалов «СтройМастер»: от главной до сравнения товаров

О магазине

«СтройМастер» – интернет-магазин строительных и отделочных материалов в Благовещенске. Ассортимент широкий: от общестроительных материалов и сантехники до инструмента и спецодежды. В таком магазине покупатель быстро теряется, если каталог, фильтры и карточки товара не помогают выбирать.

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

Что требовалось

Задачу заказчик сформулировал двумя пунктами:

• улучшить конверсионные качества сайта и сделать его удобнее для покупателей;
• сделать дизайн по современным требованиям UX/UI и строго по брендбуку компании.

Второй пункт задал рамки: цвета, логотип и графика на всех экранах должны были соответствовать брендбуку. Для текстов выбрали шрифт Rubik в начертаниях Medium и Regular и шкалу из пяти размеров: 24, 20, 18, 16 и 14 px. Её хватает и на заголовки разделов, и на мелкие подписи в карточках.

Главная: ассортимент виден с первого экрана

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

В шапке собрано то, что нужно до покупки: выбор города, график работы, телефон и заказ звонка, поиск, кнопка каталога, избранное, сравнение и корзина со счётчиками.

Ниже идут блоки, которые меняются вместе с сезоном и акциями:

• слайдер акций, например подарок за покупку продукции определённой марки;
• полоса преимуществ: бесплатная доставка по Благовещенску до транспортной компании, сертифицированные товары, покупка в рассрочку, скидки по карте магазина;
• «Лучшие предложения»: тематические подборки вроде «Весеннего интерьера», «Отделки стен» и «Новинок месяца»;
• «Товары на любой случай»: карусель карточек с ценой и кнопкой покупки.

Каталог в отдельном окне

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

Раздел каталога: фильтры, теги и сортировка

На странице раздела (на макете это «Электрообогреватели») мы проработали систему фильтрации:

• выбранные параметры собраны в отдельный блок, любой можно снять крестиком или сбросить все сразу;
• фильтры по типу продукта, марке, рейтингу, цвету и цене, у каждого значения указано число товаров;
• над списком теги для быстрого отбора: «Настенные», «С терморегулятором», «Недорогие», «Энергосберегающие»;
• сортировка, выбор количества товаров на странице, вид плиткой или списком;
• кнопка «Загрузить ещё» вместе с обычной постраничной навигацией.

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

Карточка товара

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

Описание, характеристики и отзывы разнесены по вкладкам. Из карточки товар можно сразу отложить в избранное или добавить к сравнению.

Сравнение вместо звонка консультанту

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

• товары сгруппированы по категориям, у каждой видно количество, список можно очистить;
• переключатель «Только различающиеся» убирает одинаковые характеристики;
• параметры разбиты на группы, которые сворачиваются;
• пустая ячейка предлагает добавить ещё товары из той же категории.

Личный кабинет

В личном кабинете покупатель меняет свои данные, смотрит историю заказов и ведёт несколько профилей заказа с разными реквизитами. Это удобно тем, кто покупает и для дома, и для работы. Рядом баннер с предложением подключиться к программе лояльности и кнопка «Есть вопросы?».

Мобильная версия

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

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

Итог

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

Если вашему магазину тоже нужен новый дизайн, посмотрите редизайн сайта и разработку интернет-магазина: разберём, где покупатели теряются, и соберём макеты под ваш ассортимент.