Упростили покупку стройматериалов онлайн — от выбора товара до оплаты без обращений в поддержку

Запрос клиента

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

Клиент пришёл за редизайном интернет-магазина: сайт был самым слабым каналом продаж и приносил около 9 заказов в день. Главная боль — мобильная версия: по оценке команды, около 70% пользователей не могли нормально оформить заказ со смартфона.

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

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

Старт работы

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

Далее спроектировали основные страницы, чтобы определить логику и функциональность без привязки к визуалу. Особое внимание уделили каталогу, проработали навигацию по ассортименту, фильтры и наполнение карточек — чтобы пользователю было проще выбирать и сравнивать товары.

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

Дизайн-концепция

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

Сначала собрали референсборды — три доски с примерами сайтов и UI-деталей, объединённых общими приёмами. Вместе выбрали направление, которое лучше подходит компании.

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

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

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

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

Главную спроектировали на привычных паттернах маркетплейсов — так интерфейс остаётся знакомым, а пользователь быстрее переходит к покупке.

Фокус сделали на товарах и подборках. Помимо стандартных блоков вроде «Хиты продаж» и «Новинки» добавили тематические витрины — например, «Всё для отделки помещений» или «Инструмент и оборудование». Чтобы в таких подборках было проще ориентироваться, добавили возможность быстро фильтровать карточки внутри блока по категориям.

Главную дополнили популярными категориями, акциями и брендами, а также контентными блоками — обзорами, советами и коротким блоком о компании. Добавили и блок «Частые вопросы»: он закрывает типовые сомнения до покупки и снижает потребность звонить в поддержку.

​Каталог

В каталоге сделали выбор удобным даже при большом ассортименте. Добавили навигацию по подкатегориям в виде плашек с изображениями — так можно быстро перейти в нужный раздел и сократить путь до товаров.

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

Фильтры оставили всегда открытыми — в этом сегменте ими активно пользуются, поэтому мы не стали прятать фильтрацию и добавлять лишние шаги.

Выбранные фильтры показываем над списком товаров: их можно быстро снять по одному или сбросить все сразу. Добавили и редактирование «на месте»: по клику на активный фильтр открывается поп‑ап с параметрами, где можно уточнить значение и сразу обновить выдачу.

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

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

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

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

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

Ключевой акцент в блоке покупки — цена по дисконтной карте: показываем её крупно, а по клику открываем модальное окно с предложением оформить карту. Там же разместили информацию о рассрочке/делении платежа и все доступные способы доставки с предварительными датами и стоимостью.

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

Чтобы было проще ориентироваться на длинной странице, добавили боковое оглавление — по клику пользователь переходит к нужному разделу. Для допродаж внедрили «Собрать комплект»: сопутствующие товары можно добавить в корзину одной кнопкой. Также предусмотрели кросс‑продажи и подборку «Вам могут понадобиться» с быстрым переключением карточек по категориям.

Корзина

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

Усилили корзину как инструмент допродаж и помощи в выборе. Рядом с товарами добавили блок «Не забудьте купить» с сопутствующими позициями — он помогает быстрее собрать всё необходимое и повышает средний чек. Отдельно проработали сценарии с дополнительными услугами. Например, если товар поддерживает «Распил», его можно добавить прямо в корзине.

Чтобы ожидания по получению были прозрачными, показываем дату по каждой позиции. Если весь заказ нельзя забрать в один день, корзина группирует товары по датам — так пользователь видит реальную картину ещё до оформления.

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

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

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

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

Оформление выстроили так, чтобы пользователь сначала решил главный вопрос — как он получит товары. Для стройматериалов это важно, позиции отличаются по весу и габаритам, кому-то важен самовывоз, кому-то — подъём на этаж. Поэтому шаг «Способ получения» поставили первым — так мы заранее закрываем вопросы по срокам, стоимости и условиям, чтобы в конце не возникало неприятных сюрпризов.

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

Дополнительные услуги показываем только те, которые относятся к конкретному заказу. Набор опций меняется в зависимости от типа доставки (квартира или частный дом) и состава корзины — для пары лёгких товаров разгрузка и подъём не нужны. Затем пользователь выбирает дату и удобный интервал — это делает ожидания прозрачными и снижает количество уточняющих обращений в поддержку.

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

Внутренние страницы и дизайн-гайд

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

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

Чтобы у команды разработки не возникало «серых зон», подготовили дизайн‑гайд:

• проработали состояния интерфейса — от пустой корзины до успешного заказа;
• создали набор элементов интерфейса (UI Kit) — типографика, цвета, кнопки и формы;
• добавили комментарии по логике и реализации.

Итоги

Обновили интернет-магазин «Экономстроя», чтобы он был понятным и удобным для покупки и снижал потребность в обращениях в поддержку. Пересобрали ключевой путь — от выбора товара до оплаты и поправили места, где пользователи обычно сталкиваются с неопределённостью. Особое внимание уделили мобильной версии: адаптировали функциональность под смартфоны и упростили путь до оформления, сохранив все важные детали.