Дизайн интерфейсов для поставщика промышленных полимеров

АО «Ремтехкомплект» — поставщик и производитель изделий из промышленных полимеров, огромная компания с 22 филиалами в России, Казахстане и Беларуси.

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

В «Ремтехкомплекте» решили отказаться от устаревших решений, но и обычный интернет-магазин им не подошел бы (все-таки полиуретан, фторопласт и рукава высокого давления — не самые обычные товары). Компания решала заказать дизайн интерфейса у «Собаки Павловой» с тем, чтоб сделать удобный и современный инструмент для покупателей.

Бизнес-задача

Компания «Ремтехкомплект» хотела выделиться среди отраслевых конкурентов и получить конкурентное преимущество за счет удобного современного инструмента для B2B-клиентов.

Главная

О компании

Дизайн-задачи

Наши задачи были такими:

1. Выяснить потребности конечного клиента.
2. Удовлетворить эти потребности в дизайне интерфеса.
3. Реализовать решение с учетом технических ограничений.

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

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

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

Подготовка

Собрали бизнес-требования, описали пользователей и пользовательские сценарии:

1. Провели интервью с сотрудниками «Ремтехкомплекта», обсудили их результаты с заказчиком и зафиксировали бизнес-требования к сайту.
2. Провели интервью с представителями заказчика о пользователях сайта.
3. Составили портреты пользователей и пользовательские сценарии.

Концептуальное проектирование

1. Создали информационно-архитектурную карту сайта.

Схема страниц

Информационно-архитектурная карта сайта

2. Создали макеты главной страницы в шести разных концептуальных решениях. Вот некоторые из них.

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

Концепт «Фокус на поиске»

Концепт «Каталог». Каталог может быть самостоятельный главной страницей (сразу к делу!) и сокращать путь пользователя до товара. Навигация тут простая и привычная. Пока не выбрана конкретная категория товара, показываем разные профильные отраслевые подборки.

Концепт «Каталог»

Концепт «Презентация». Главная страница может быть своеобразной статусной презентацией продукции, услуг и других сфер жизни компании и ее сотрудников. Применимо и к другим контентным страницам, например, странице «О компании».

Концепт «Презентация»

3. Обсудили с заказчиком, выбрали рабочую концепцию. Победило решение «Поиск+».

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

Концепт «Поиск+»

4. Нарисовали главную страницу в двенадцати разных стилевых решениях. Вот некоторые из них:

Варианты стилевых решений

Обсудили с заказчиком, выбрали рабочее стилевое решение.

UX-дизайн интерфейса

Сделали три подхода по три итерации. Отрисовали страницы сайта во всех возможных состояниях.

Каталог: категория

Каталог: подкатегория

Результат поиска

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

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

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

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

Состояния заказа

Адаптировали дизайн под мобильные устройства.

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

Результат

Сайт реализован по нашим прототипам и развивается силами заказчика.

Жизнь компании

Контакты

Вакансия