Реватор

• Сайт

Стек технологий

• Figma

Описание проекта

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

• Собственное производство — изготавливают детали по ГОСТ
• Ремонтный цех — обслуживают и модернизируют оборудование
• Онлайн-каталог — тысячи позиций с фильтрами по параметрам

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

Что требовалось

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

Что сделали

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

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

Этапы разработки

Аналитика

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

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

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

Дизайн

Освежили визуальный стиль

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

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

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

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

Упростили вход

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

Переработали каталог и карточки товаров

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

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

• Сделали многоуровневую структуру. Пользователь выбирает категорию, а затем просматривает товары внутри
• Сделали единый визуальный язык. Отрисовали 70 векторных иконок, теперь интерфейс выглядит цельно, легко найти нужное
• Перенесли категории в боковую панель. Страница стала просторнее, можно разместить больше полезной информации

Переделали страницу «О нас»

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

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

Упростили оформление заказа

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

Переработали логику Избранного

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

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

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

Результат

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

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

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

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

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

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

Команда проекта

• Ирина Г — аналитик
• Дмитрий С — дизайнер
• Святослав С — менеджер проекта

Отзыв клиента

Обратились в Пиробайт за редизайном нашего сайта. Работа с командой проходила комфортно и профессионально.

Хочется отметить оперативность в обсуждении важных и срочных вопросов. Также ребята попали в наши ожидания по дизайну. Правок практически не было.

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

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

Прозоров В.А, Реватор