кейс

О заказчике

«Гремир» с 2015 года поставляет трубы, фитинги и другие материалы для монтажа и ремонта трубопроводов. Сегодня в клиентской базе «Гремир» более 56 тысяч компаний — строительные и инженерные организации, торговые сети и владельцы недвижимости. Страницы интернет-магазина ежедневно посещает больше 5000 пользователей.

Главная: от хаоса к системе

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

Теперь на сайте появилась полноценная главная страница, с которой начинается путь пользователя.
 

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

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

Айдентика: инженерная тематика

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

Каталог: принцип компактности

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

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

Теперь каталог поддерживает два варианта отображения. Классическая — горизонтальная раскладка, где акцент сделан на тексте. И карточная, где больше внимания уделено фотографиям товаров.

Карточки товара: контекст всегда под рукой

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

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

Пути пользователя: ближе к заказу

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

Мобильная версия: когда UX помещается в ладонь

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

Сложности по пути

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

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

Результат

Совместили модульный брендинг с табличной структурой. Переработали каталог  и превратили список товаров в полноценный интернет-магазин.

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