Из 2006 в 2025: редизайн интернет-магазина поставщика промышленного оборудования

Цель – создать новый дизайн для интернет-магазина, чтобы он соответствовал трендам и выделялся среди конкурентов.

Проблемы старого сайта

– Устаревший дизайн

Сайт был разработан с начала основания компании, то есть 18 лет назад, и давно стал неконкурентоспособным. Несмотря на огромнейший опыт работы компании, сайт не подчеркивал экспертизу и УТП. Важно было это показать: правильно расставить визуальные акценты и переписать тексты.

– Неудобный в использовании

Неправильная навигация, нет акцентов, непонятно расположена информация — все это усложняет пользователю взаимодействие с сайтом и, вероятнее всего, он просто уйдет туда, где проще. Процент отказов это только подтверждал — в общем он составлял 43%, с ПК — 94%.

– Низкая конверсия

Все вышеперечисленные факторы негативно сказываются на конверсии, то есть пользователи не совершают целевых действий и сайт не приносит прибыль. Конверсия на старте – меньше 0,01%

Разработали новый дизайн с понятным интерфейсом и удобной навигацией для ведущего поставщика промышленного оборудования в России. Дизайн не обновляли 18 лет – пришло время это сделать.

Дизайн до

Что мы сделали:

1) выяснили основные потребности заказчика;

2) проанализировали рынок, конкурентов и целевую аудиторию;

3) разработали структуру будущего сайта;

4) разработали прототип на основе исследований и структуры;

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

Далее – подробнее о том, как мы это делали. 

Дизайн после

Чтобы приступить к выполнению задачи, нужно было изучить, что на старом сайте было не в порядке, поэтому мы начали с полноценного анализа: провели UX-аудит, аудит текстов и SEO-аудит и нашли все слабые места. Дальше нужно было проанализировать рынок – конкурентов и целевую аудиторию, поэтому параллельно мы занимались конкурентным анализом. Важно было понять, что у сайта "под капотом", с чем нам придется иметь дело. И только после этого приступили к основному пулу работ.

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

После этого разработали карту релевантности для 83 страниц сайта:

А потом приступили к написанию текстов на основе структуры и семантического ядра. Такой подход позволяет сразу заложить SEO-фундамент и максимально подготовить сайт к успешному продвижению. Всего написали более 25 текстов, эффективных с точки зрения SEO и маркетинга.

И только после детальной SEO-проработки и создания контента перешли к дизайну  – разработке прототипов. 

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

После согласования прототипа мы приступили к созданию дизайна главной страницы. Сделали упор на главном экране, потому что именно он создает первое впечатление и напрямую влияет на имидж компании. Основная цель интернет-магазина – дать пользователю всю необходимую информацию о товаре и мотивировать его на покупку. В нашем случае – это продажа оборудования, поэтому было принято решение сделать каталог необычным способом. Реализовали его в виде списка категорий оборудования – при наведении на категорию появляется кнопка «Подробнее» и срабатывает анимация слайдера фотографий.

Блок "Каталог" до:

Блок "Каталог" после:

Дизайн страницы каталога мы продумывали до мелочей – от вида карточки товара до элементов фильтра.

Было:

Стало:

Исходя из данных Яндекс Метрики, пользователи чаще заходят на сайт через смартфоны. 

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

Прототип мобильной версии:

Дизайн мобильной версии:

 – Концепция дизайна: минимализм, функциональность и акценты.

 – Цветовая палитра: контраст и акценты.

 – Чёрно-белая основа создаёт ощущение профессионализма, соответствует индустриальной эстетике. 

 – Белый фон: улучшает читаемость, делает контент воздушным. Чёрные элементы (текст, разделители, рамки): добавляют чёткость и структуру. Акцентный оранжевый направляет внимание на ключевые действия: кнопки «Каталог», «Узнать стоимость», «В корзину». Почему оранжевый? Это цвет энергии и призыва к действию, ассоциируется с промышленной безопасностью (как на спецтехнике).

 – Важные статусы (скидки, выгодные предложения).

 – Интерактивные элементы (ховеры, иконки).

 – Типографика: чёткость и читабельность.

 – Шрифты без засечек (у нас это Manrope): основной текст лёгкий, с хорошим межстрочным интервалом, заголовки полужирные, с увеличенным кернингом для лучшего восприятия.

 – Иерархия текста: чёткое разделение на заголовки H1-H4, акценты оранжевым (например, цены или сроки поставки).

 –  Компоновка и UX-решения

 – Строгая модульная сетка упорядочивает сложный каталог оборудования.

 – Крупные фото оборудования на темном фоне (как в каталогах B2B).

 – Минимум декора — только функциональные элементы: xёткие фильтры по параметрам (категории, размер заготовки, наличие ЧПУ и т.д).

 – «Умное» сравнение моделей в 1 клик. Лёгкая корзина, где пользователь может узнать стоимость и рассчитать лизинг.

 – Интерактивность и микроанимации

Акцентные элементы «оживают» – кнопки плавно меняют цвет при наведении (черный или белый → оранжевый).

Интерактивные подсказки по наведению на кнопки с иконками в карточке товара (например кнопка скачать технический паспорт оборудования).

Также усилили дизайн маркетинговыми элементами (акционный баннер на странице каталога).

В результате нам удалось добиться:

 – Строгого имиджа бренда: чёрно-белая гамма вызывает доверие у корпоративных клиентов.

 – Ясности: пользователь не отвлекается на лишнее, фокус на выборе оборудования.

 – Запоминаемости: оранжевые акценты делают бренд узнаваемым.

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

 – Технические особенности

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

* Пользователь выбирает категорию товара – либо в шапке сайта по кнопке «Каталог», либо на главной странице в блоке «Оборудование», либо через разводящую страницу.

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

* Если пользователь не знает, какое оборудование ему больше подходит, мы предусмотрели функцию «Сравнение».

* Далее пользователь может добавить товар в корзину. В корзине предусмотрены кнопки «Узнать стоимость» и «Рассчитать лизинг», которые ведут на консультацию с менеджером и дальнейшую продажу.

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