---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-01-28
publishYear: 2020
name: Ремтехкомплект
title: Дизайн интерфейсов для поставщика промышленных полимеров
excerpt: Помогли компании выделиться среди отраслевых конкурентов за счет дизайна интерфейса
context: |
[АО «Ремтехкомплект»](https://www.rtkco.ru/) — поставщик и производитель изделий из промышленных полимеров, огромная компания с 22 филиалами в России, Казахстане и Беларуси.
Для промышленной отрасли характерны чисто профессиональные сайты и инструменты: надежные, но тяжелые и неповоротливые, как бульдозер. Не всегда удобные, часто некрасивые, с огромным количеством legacy-решений.
В «Ремтехкомплекте» решили отказаться от устаревших решений, но и обычный интернет-магазин им не подошел бы (все-таки полиуретан, фторопласт и рукава высокого давления — не самые обычные товары). Компания решала заказать дизайн интерфейса у «Собаки Павловой» с тем, чтоб сделать удобный и современный инструмент для покупателей.
isNew: true
logo:
src: ~/assets/images/portfolio/remtech/logo.svg
alt: Ремтехкомплект • Логотип
link: https://www.rtkco.ru/
image: ~/assets/images/portfolio/remtech/main.png
imageAlt: Собака Павлова • Ремтехкомплект • Дизайн интерфейсов для поставщика промышленных полимеров
thumbnail:
src: ~/assets/images/portfolio/cards/remtech.svg
alt: Собака Павлова • Ремтехкомплект • Дизайн интерфейсов для поставщика промышленных полимеров
tags:
- prom
- ec
- redesign
- mass
- mob
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), [редизайн интерфейса](/services/redesign), [продуктовые исследования](/services/research) и [многое другое](/services).
collection: services
page: ux-design
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: res
- collection: portfolio
page: brighteye
- collection: portfolio
page: gazprom-neft
- collection: portfolio
page: veza
- collection: portfolio
page: geonaft
- collection: portfolio
page: nlmk
outcome:
title: Некоторые цифры
numbers:
- title: Предложили
number: 6 вариантов
text: концептуального решения
- title: Отрисовали
number: в 12 стилях
text: главную страницу
- title: Спроектировали
number: 25 страниц
text: в различных состояниях
result:
- text: Покажем из рук в руки и расскажем ещё больше
link: 'mailto:we@sobakapav.ru'
budget: 600 000 ₽
time: '1,5 месяца'
review:
text: |
Мы использовали ваши макеты, потому что все было сделано так, как мы хотели, и даже лучше. Нам очень все понравилось. Мы об этом кейсе написали ряд статей, потому что мы считаем это прям прорывной историей. Конечный заказчик очень доволен. Он действительно считает сайт одним из лучших в отрасли.
person: Алексей Тищенко
position: сооснователь компании-подрядчика
metadata:
canonical: https://sobakapav.ru/portfolio/remtech
title: UX-дизайн • Дизайн интерфейсов для поставщика промышленных полимеров
description: 'Помогли компании выделиться среди отраслевых конкурентов за счет дизайна интерфейса'
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/remtech/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Подготовка](#anchor3) • [Концептуальное
проектирование](#anchor4) • [UX-дизайн интерфейса](#anchor5) • [Результат](#anchor6) • [Отзыв, цены, сроки](#anchor7)
</TOC>
## <a name="anchor1" />Бизнес-задача
Компания «Ремтехкомплект» хотела выделиться среди отраслевых конкурентов и получить конкурентное преимущество за счет удобного современного инструмента для B2B-клиентов.
<a href="/images/portfolio/remtech/1-1.png" target="_blank">
</a>
_Главная_
<a href="/images/portfolio/remtech/2-1.png" target="_blank">
</a>
_О компании_
## <a name="anchor2" />Дизайн-задачи
Наши задачи были такими:
1. Выяснить потребности конечного клиента.
2. Удовлетворить эти потребности в дизайне интерфеса.
3. Реализовать решение с учетом технических ограничений.
То есть выяснить, какие возможности нужны пользователям сайта, и вплести их в интерфейс.
<a href="/images/portfolio/remtech/3.png" target="_blank">
</a>
_Карточка товара_
<a href="/images/portfolio/remtech/4.png" target="_blank">
</a>
_Карточка товара-2_
## <a name="anchor3" />Подготовка
Собрали бизнес-требования, описали пользователей и пользовательские сценарии:
1. Провели интервью с сотрудниками «Ремтехкомплекта», обсудили их результаты с заказчиком и зафиксировали бизнес-требования к сайту.
2. Провели интервью с представителями заказчика о пользователях сайта.
3. Составили портреты пользователей и пользовательские сценарии.
## <a name="anchor4" />Концептуальное проектирование
1. Создали информационно-архитектурную карту сайта.
<a href="/images/portfolio/remtech/14.png" target="_blank">
</a>
_Схема страниц_
<a href="/images/portfolio/remtech/13-1.png" target="_blank">
</a>
_Информационно-архитектурная карта сайта_
2. Создали макеты главной страницы в шести разных концептуальных решениях. Вот некоторые из них.
**Концепт «Фокус на поиске»**. Главная страница почти полностью превращается в страницу поиска, поэтому результаты поиска можно выводить тут же, компактно отобразив строку поиска и остальную навигацию. Отслеживание заказа тут на отдельной странице.
<a href="/images/portfolio/remtech/6.png" target="_blank">
</a>
_Концепт «Фокус на поиске»_
**Концепт «Каталог»**. Каталог может быть самостоятельный главной страницей (сразу к делу!) и сокращать путь пользователя до товара. Навигация тут простая и привычная. Пока не выбрана конкретная категория товара, показываем разные профильные отраслевые подборки.
<a href="/images/portfolio/remtech/7.png" target="_blank">
</a>
_Концепт «Каталог»_
**Концепт «Презентация»**. Главная страница может быть своеобразной статусной презентацией продукции, услуг и других сфер жизни компании и ее сотрудников. Применимо и к другим контентным страницам, например, странице «О компании».
<a href="/images/portfolio/remtech/8.png" target="_blank">
</a>
_Концепт «Презентация»_
3. Обсудили с заказчиком, выбрали рабочую концепцию. Победило решение **«Поиск+»**.
В центре — модуль поиска и отслеживание заказов. Привычный комфортный паттерн поиска, результаты поиска на отдельной странице с выдачей, фильтрами и прочим. Информация о компании убрана в специальный раздел, тут только самое важное, чтобы посетитель смог быстро сориентироваться, куда попал. Ниже дополнительные возможности навигации по ассортименту: по товарным категориям и по отраслям.
<a href="/images/portfolio/remtech/5.png" target="_blank">
</a>
_Концепт «Поиск+»_
4. Нарисовали главную страницу в двенадцати разных стилевых решениях. Вот некоторые из них:
<a href="/images/portfolio/remtech/9.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/10.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/11.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/12.png" target="_blank">
</a>
_Варианты стилевых решений_
Обсудили с заказчиком, выбрали рабочее стилевое решение.
### <a name="anchor5" />UX-дизайн интерфейса
Сделали три подхода по три итерации. Отрисовали страницы сайта во всех возможных состояниях.
<a href="/images/portfolio/remtech/22.png" target="_blank">
</a>
_Каталог: категория_
<a href="/images/portfolio/remtech/23.png" target="_blank">
</a>
_Каталог: подкатегория_
<a href="/images/portfolio/remtech/24.png" target="_blank">
</a>
_Результат поиска_{' '}
На этапе подготовки мы выяснили, какие возможности необходимы пользователям сайта. Теперь мы интегрировали их в интерфейс.
Например, запросы у покупателей бывают довольно сложные (все-таки речи идет о промышленных товарах), и описать заказ иногда проще, чем собирать его по каталогу. В новом интерфейсе заявку можно оставить в свободной форме.
<a href="/images/portfolio/remtech/21.png" target="_blank">
</a>
_Оформление заказа_
Или, к примеру, покупателям очень важно следить за состоянием заказа, иногда они заходят на сайт исключительно для этого. Поэтому проверить состояние заказа можно уже на главной странице.
<a href="/images/portfolio/remtech/15.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/16.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/17.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/18.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/19.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/20.png" target="_blank">
</a>
_Состояния заказа_
Адаптировали дизайн под мобильные устройства.
<div class="flex gap-2 flex-wrap">
{' '}
<Image
src="~/assets/images/portfolio/remtech/29.png"
alt="Дизайн интерфейсов для поставщика промышленных полимеров"
class="w-72 grow shrink basis-0"
/>{' '}
<Image
src="~/assets/images/portfolio/remtech/30.png"
alt="Дизайн интерфейсов для поставщика промышленных полимеров"
class="w-72 grow shrink basis-0"
/>{' '}
</div>
_Мобильная версия_
## <a name="anchor6" />Результат
Сайт реализован по нашим прототипам и развивается силами заказчика.
<a href="/images/portfolio/remtech/25.png" target="_blank">
</a>
_Жизнь компании_
<a href="/images/portfolio/remtech/26.png" target="_blank">
</a>
<a href="/images/portfolio/remtech/27.png" target="_blank">
</a>
_Контакты_
<a href="/images/portfolio/remtech/28-1.png" target="_blank">
</a>
_Вакансия_
## <a name="anchor7" />