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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

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

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

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Дизайн начинается не с Фигмы: что мы сделали, чтобы сайт получился не просто красивым, но и функциональным

• Первый этап – комплексный анализ

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

• Второй этап – разработка структуры

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

• Третий этап – создание прототипов

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

• Четвертый этап – дизайн

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

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

• Адаптивность

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

Особенности дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Результаты сотрудничества

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

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

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

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

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

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

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

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

Владимир Александрович Соколов

Представитель компании-заказчика, Black Horse

Нужен был новый современный дизайн с удобной навигацией. Работа специалистов устроила, все вопросы решались оперативно – к правкам и замечаниям относятся спокойно. Любые задачи выполнялись через согласование, все прозрачно. Ребятам доверяю, решения принимал на основе их рекомендаций, о чем не пожалел ни разу. Результатом доволен, благодарю за плодотворную работу.