Редизайн сайта для компании «СЦ МетОптТрейдинг» Продажа алюминиевого полуфабриката

Анализ ЦА

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

Анализ старого сайта

Мы исследовали сайт клиента и подготовили список проблем:

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

Решение

1. Редизайн header, fixmenu и footer

ПРОБЛЕМНЫЕ МЕСТА

1. Header слишком высокий, занимает много места у экрана. Лишний элемент в виде картинки. Иконка корзины череcчур большая.
2. В fix-menu почта не нужна, из-за нее кнопка заявки звонка становится "зажатой". Логотип, телефон и корзина "прилипли" к верхней части экрана. Закрепленное меню сейчас делают в одну строку, чтобы не отнимать экран у основного контента, а здесь оно в 2 строки.
3. Отсутствие контраста в footer "отталкивает" посетителя от изучения сайта. Функция footer заключается в том, чтобы клиента задержать на сайте, подтолкнуть изучать его дальше, в этой реализации footer не выполняет этого.

НОВЫЙ ВИД

1. В новой реализации header в высоту занимает меньше места, но выглядит достаточно заметным. Выделен один основной номер, остальные номера спрятаны. Кнопка "Оставить заявку" стала свободнее, текст не зажат.
2. Fix-menu выполнен в одну строку и все важные элементы размещены, все составляющие расположены свободно, с четким визуальным разделением.
3. В footer теперь все контрастно. Он выполняет свои функции по привлечению клиента изучать сайт.

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

ПРОБЛЕМНЫЕ МЕСТА

1. Только один вид карточки товара — табличный. Постоянные клиенты привыкли к этому виду, но новых клиентов он отталкивает. И табличным видом невозможно удобно пользоваться в мобильной версии сайта.
2. Большое пространство занимает блок с выбором количества.
3. Слово "купить" не подходит для действия, которое выполняет кнопка.
4. Стрелка для сортировки по имени, цене за штуку, цене за кг незаметны и непонятны, так как на них нет всплывающих подсказок.

НОВЫЙ ВИД

1. Табличный вид мы немного преобразовали под новый контентный контейнер, а так же добавили возможность просмотра товара плиточным отображением.
2. Выбор количества шт или кг вынесен в шапку таблицы, в привычное для пользователей интернет-магазинов место, тем самым дав пространство другим столбцами добавление нового "Сумма заказа".
3. Заменена фраза на кнопке — "В корзину", теперь она отражает смысл своего функционала.
4. Сортировка вынесена за пределы таблицы отдельным блоком.

3. Homepage

ПРОБЛЕМНЫЕ МЕСТА

1. Первое, что видит человек зайдя на сайт, баннер, а дальше идет блок с важной информацией, которая выглядит как "склад" и никак не оформлена, новости и акции написаны просто в строку текстом. В современных интернет-магазинах недопустимо вместо баннеров использовать текстовый блок для анонсирования акций, скидок и другой ценной информации, это как минимум портит стилистику сайта и не выполняет своих функций.
2. Нарушен порядок подачи информации: о компании, преимущества, только потом о продукции и услугах. Нужно понимать, что компания должна продавать не себя, в первую очередь, а свою продукцию.
3. Отсутствие SEO-блоков, таких как новости или текстовый блок с ключевыми словами для поисковых запросов.

НОВЫЙ ВИД

1. Все ключевые акции помещены в баннеры, которые расположены в слайдере.
2. Большой блок с продукцией и привлекательными фото товаров по категориям.
3. Услуги теперь выглядят более понятно и привлекательно.
4. Добавили блок со всеми акциями, которых нет в баннерах.
5. Сделали блок с новостями.
6. Блок преимуществ стал более заметным и привлекающим внимание.
7. Добавлен SEO-блок текстовый.

4. Страница товара

ПРОБЛЕМНЫЕ МЕСТА

1. Маленькая фотография товара, плохого качества.
2. Много места занимают характеристики.
3. Маленькая кнопка "Купить", непривлекающая внимание. Это самая основная кнопка, с действием, которое ждут от посетителя сайта.
4. Стоимость товара слишком маленькая по размеру.
5. Отсутствуют важные для SEO-продвижения и маркетинга блоки: перелинковка на другие товары и вопрос-ответ.

НОВЫЙ ВИД

1. Фотография теперь большая и "живая", она привлекает внимание.
2. Добавлен функционал "купить в 1 клик", это упрощает покупку для клиента.
3. Все характеристики теперь расположены в табах, в соответствии с привычным для новых пользователей паттерном.
4. Добавлены все необходимые маркетинговые и SEO-блоки.
5. Все цены крупные и выделены цветом.

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

ПРОБЛЕМНЫЕ МЕСТА

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

НОВЫЙ ВИД

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