О компании

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

Сайт клиента: https://www.sv-metal.ru/

Задача

Заказчик поставил перед нами следующие задачи:

  1. сделать полный редизайн сайта — современный, отражающий статус компании;
  2. обеспечить актуальность цен и остатков продукции на сайте;
  3. реализовать на сайте возможность заказа товара через корзину.

Оценив фронт работ, мы приняли решение разработать новый сайт на фреймворке Yii.

Этапы дизайна

Потребовалось несколько итераций, пока дизайн не приобрел окончательный вид — в процессе дизайна кардинально менялись блоки, цвета и шрифты.

Первоначальный макет главной страницы
Промежуточный макет первого экрана главной страницы

Главная страница

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

Мы компактно, стильно и грамотно показали:

  • преимущества компании;
  • ассортимент металлов;
  • текущие акции;
  • заводы-производители, с которыми сотрудничает компания;
  • географию поставок;
  • число довольных клиентов;
  • актуальные новости компании;
  • интерактивную карту филиалов.

Пожеланием клиента было внедрить как можно больше интерактивных элементов. Мы смогли разнообразить сайт интересными деталями и при этом не перегрузить его излишней анимацией.

Меню

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

Листинг товаров

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

В листингах мы:

  • реализовали возможность добавления товара в корзину;
  • внедрили фильтр сортировки по сплавам, размерам и габаритам в шапке таблицы товаров;
  • вывели вес товара в наличии;
  • присвоили товару не в наличии статус «ожидается», демонстрируя тем самым, что такой товар тоже можно заказать. При клике на такой товар отражалась информация о возможности раннего бронирования и контакты, по которым можно осуществить бронь.
Макет листинга товаров

Корзина

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

Макет страницы корзины

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

Макет страницы заявки

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

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

Новый сайт мы сделали адаптивным для всех типов устройств — все блоки и элементы сайта корректно отображаются и удобны для просмотра как с небольших телефонов, так и с больших экранов.

Сроки разработки: 5 месяцев

Стоимость разработки: 700 000 рублей

Доработки дизайна после релиза

Реализовали карточки товаров

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

Макет карточки товара

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

Другие ключевые моменты, которые мы внедрили:

  • вывели характеристики и свойства изделия;
  • показали, какой объем товара есть на складе в наличии и какой объем прибудет на склад в скором времени;
  • добавили возможность прямо в карточке указать потребность в резке и оставить комментарий с описанием требований;
  • внедрили возможность заказа не только в килограммах, но и в штуках;
  • добавили возможность заказа товара в 1 клик.

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

Мы проанализировали поведение людей в Вебвизоре, воронку достижения целей, а также получили живые отзывы от клиентов МЕТАЛЛ СВ и решили упростить корзину. Ранее оформление заказа состояло из двух шагов: переход в корзину для просмотра заказа и оформление заявки. Теперь при переходе в корзину вся информация о заказе и поля для заполнения контактной информации находится на одной странице. На ней же можно скорректировать уже выбранные опции, например, снять/поставить чекбокс резки для любой позиции, скорректировать объем заказа, удалить товар из корзины.

Макет новой страницы заказа

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