Реватор — обновленный интерфейс сайта запчастей для лифтов и эскалаторов

Реватор — крупный поставщик запчастей для лифтов и эскалаторов. Это не просто интернет-магазин, а полноценный производственно-ремонтный комплекс:

— Собственное производство — изготавливают детали по ГОСТ;

— Ремонтный цех — обслуживают и модернизируют оборудование;

— Онлайн-каталог — тысячи позиций с фильтрами по параметрам;

— Компания работает с профессиональными клиентами – мастерами и обслуживающими организациями.

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

Мы переосмыслили UX/UI, сохранив при этом привычную логику. В работе опирались на закон Якоба-Нильсена. Его суть в том, что люди привыкают к определенным схемам на сайтах. Если делать что-то нестандартное, им будет труднее разобраться.

Это не значит, что все сайты должны быть одинаковыми. Но если использовать знакомые элементы, пользователям будет проще ориентироваться.

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

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

За референсы мы брали Ozon, DNS и М.Видео, потому что большинство клиентов Реватора заглядывают на маркетплейсы в поисках нужных товаров и уже привыкли к дружественному интерфейсу.

ОСВЕЖИЛИ ВИЗУАЛЬНЫЙ СТИЛЬ

Сохранили логотип и основные цвета, но выкрутили цвет, чтобы смотрелось свежее и ярче. Заменили шрифт на Proxima — он компактнее и удобнее для чтения. Старый Montserrat слишком вытягивал буквы, а новый смотрится аккуратнее.

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

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

( Дмитрий, дизайнер Пиробайта )

УПРОСТИЛИ ВХОД

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

ПЕРЕРАБОТАЛИ КАТАЛОГ И КАРТОЧКИ ТОВАРОВ

Клиенты Реватора сверяют фото деталей с их стандартными размерами — без форм-фактора не понять, подходит деталь или нет. Поэтому мы разбили контент на 2 колонки. Слева — фото, а справа — форм-фактор. А еще убрали водяные знаки, добавили инфо о модификациях и совместимости.

Затем переработали каталог:

— Сделали многоуровневую структуру. Пользователь выбирает категорию, а затем просматривает товары внутри;

— Сделали единый визуальный язык. Отрисовали 70 векторных иконок, теперь интерфейс выглядит цельно, легко найти нужное;

— Перенесли категории в боковую панель. Страница стала просторнее, можно разместить больше полезной информации.

ПЕРЕДЕЛАЛИ СТРАНИЦУ «О НАС»

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

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

УПРОСТИЛИ ОФОРМЛЕНИЕ ЗАКАЗА

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

ПЕРЕРАБОТАЛИ ЛОГИКУ ИЗБРАННОГО

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

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

( Дмитрий, дизайнер Пиробайта )

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

«Чтобы разработчикам было удобнее работать с нашими макетами, мы собрали понятный UI-кит. В нем подробно описали поведение всех экранов (включая разные состояния) и подготовили адаптацию под 5 основных разрешений. Весь процесс шел в диалоге — мы отвечали на вопросы, созванивались и вносили корректировки прямо по ходу работы» 

( Дмитрий, дизайнер Пиробайта )

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

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

( Дмитрий, дизайнер Пиробайта )