Промышленный техномаркет Nova-M e-commerce

О клиенте

Компания “NOVA Механика” - современная технологическая сервисная компания, ориентированная на решение производственных задач субъектов хозяйственной деятельности, посредством комплексного оснащения промышленных предприятий современным профессиональным оборудованием и его дальнейшего сервисного обслуживания и ремонта.

Ассортиментная политика компании включает в себя более 10 000 наименований, в т.ч. металлорежущего, кузнечно-прессового, заготовительного оборудования, а также сварочного и компрессорного оборудования, что создает прецедент для долгосрочного сотрудничества с каждым своим заказчиком.

За время работы клиентами компании стали более 3000 предприятий нефтегазовой, оборонной, машиностроительной и обрабатывающей промышленностей. Среди них такие, как: ЗАО “Трансмашхолдинг”, АО “НПП Вектор”, ОАО “Концерн “Росэнергоатом”, “АО “НПК Уралвагонзавод”, ОАО “Уралмашзавод” и многие другие.

Цель:

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

Инструменты:

Photoshop
Figma

nova-m.com

Целевая аудитория

Проживающие в России мужчины среднего возраста, двух возрастных категорий 25-34 и 35-44 года, по профессии - инженеры, учредители, снабженцы

Задачи

реализация адаптивной верстки

Сделаны адаптивные верстки сайта под мобильный телефон и десктоп).

Проработка каталога

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

Улучшение юзабилити

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

модернизация страницы карточки товара

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

Этапы работ

сбор информации

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

На основе полученных данных, мы составили схему дальнейшей работы.

Прототипирование

На следующем этапе мы составили карту переходов по сайту и составили полную карту сайта.

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

Разработка дизайна

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

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

Верстка

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

Верстка сайта кроссбраузерна и абсолютно адаптивна, из-за чего одинаково корректно отображается на всех устройствах.

Программирование

На заключительном этапе мы интегрировали сайт в систему управления контентом (CMS) Битрикс 1С и объединили верстку сайта с его функциональной частью.

Структура сайта

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

ГЛАВНАЯ СТРАНИЦА

структура и концепция

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

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

Прототип сайта

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

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

Уникальность сайта

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

Замена корзины

Для того, чтобы максимально соответствовать потребностям конечного пользователя, в карточке товара было решено заменить привычную кнопку “Добавить в корзину” на “Добавить к заявке”.

Отказ от функционала покупки в 1 клик

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

Поэтому было решено отказаться от функционала покупки оборудования в 1 клик. Вместо нее была размещена кнопка “Получить предложение”, в котором клиент может получить индивидуальное и максимально выгодное для него предложение.

Добавление нового функционала

На обновленном сайте был добавлена возможность купить оборудование выгоднее, нажав на “Нашли дешевле?”. Кроме того появилась вкладка с модификациями оборудования, видеообзором, кнопка рассчета стоимости доставки, удобные фильтры в каждом разделе каталога, детально продумано разнообразное отображение товара в каталоге и его сортировка.

ВНУТРЕННИЕ СТРАНИЦЫ

В ходе редизайна были разработаны 5 новых страниц:

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

АДАПТИВ

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

Мобильный телефон 320*568px

Мобильная версия

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

Цвета и типографика

from #0189CD

to #31BBF9

from #F88701

to #FFB909

#0396D4

#F89929

#383639

#CECECE