Сайт Аirguard-14

DESKTOP

MAIN PAGE

Header:

1. Лого Airguard14 плохого качества
2. Иконки социальных сетей теряются
3. Цвета совершенно не гармонируют друг с другом

Header сайта Blueair:

1. Лого подходит по цвету
2. Цветовая гамма правильно подобрана
3. Кнопки коллекций расположены по ширине страницы, закрывая пустое пространство.

Страница продукта не структурирована:

1. Много пустого пространства на заднем фоне, которое отвлекает внимание на себя.
2. Цена продукта описание и название должны делиться на блоки.
3. Фото товара расположено плохо для просмотра ( слишком большое изображение)

Пример страницы продукта на сайте Sleepwcomfort:

1. Нет лишнего градиента на заднем фоне
2. Указана цена и ниже идет бокс ADD TO CARD и BUY IT NOW
3. Далее описание
4. В совокупности данный продакт пэйдж дает много информации: вариации продукта, скидочную цену, чек аут и хайлайтс описания.

Иконки партнеров:

1. Слова сливаются с background (полностью не читабельные иконки)

Пример со страницы crossrope

1. Партнеры и названия изданий отчетливо видны.
2. Цвета гармонично смотрятся.

SLIDESHOW:

1. Изображение не соотвествует стилистике сайта
2. Белый шрифт не читаем на ярком слайде

Пример SLIDESHOW guardiantechnologies:

1. Изображение по цветовой гамме схоже с текстом
2. Текст и картинка дополняют друг друга при этом все отчетливо видно и читаемо.

PRODUCT PAGE

Блок продукта:

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

Блок продукта пример:

1. Название и краткое описание крупным шрифтом
2. Есть рейтинг
3. Описание доставки

Корзина:

1. Кнопка ADD TO CART очень блеклая. Клиенту будет не удобно
2. SKU Category лишняя информация, которая не нужна клиенту ( она не указывает в какой коллекции продукт и как его в дальнейшем найти)

Пример корзины:

1. Яркие привлекающие внимания иконки
2. Цена стоит рядом, что упрощает путь клиента

Описание товара:

1. Много пустого пространства
2. Сложно воспринимать информацию ( нужно совершать дополнительные действия для прочтения описания продукта, что замедляет путь клиента)

1. Данные блоки тоже являются описанием продукта. Они занимают много места и их можно было просто выделить в description.

Пустое пространство

Пример описание товара:

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

DISCOUNT BOX:

1. Зеленый цвет шрифта смотрится блекло на белом фоне
2. Много пустого пространства
3. Нет точного числа скидки

ПРИМЕР DISCOUNT BOX:

1. Прописана скидка
2. Яркая иллюстрация
3. Кнопка призыва к действию

FOOTER:

1. Цвета не сочетаются

ПРИМЕР FOOTER:

1. Все выверено в одной цветовой гамме
2. Легко воспринимать информацию.

ПРОБЛЕМЫ по desktop:

1. Пустое пространство
2. Колористика сайта совершенно не выверена. Цвета не гармонизируют друг с другом
3. Блоки расположены не удобно для пользователя. Сложно воспринимать информацию
4. Много лишней анимации, которая замедляет работу сайта и создает неудобство при работе с ним.
5. В совокупности данные факторы в несколько раз снижают конверсию

MOBILE VERSION

MAIN PAGE

Header:

1. Лого плохого качества
2. Шрифты ниже совершенно не сочетаются

Пример header:

1. Шрифты сочетаются
2. Цвета правильно подобраны

Описание продукта:

1. Заголовки не сочетаются друг с другом
2. Много пустого пространства

1. Пустое пространство

1. Кнопку необходимо увеличить и разместить по центру.

1. Белый текст сливается с задним фоном.

PRODUCT PAGE

1. Изображение продукта нужно сделать больше и убрать лишние поля и background

Пример Product Page:

1. Качественное изображение по ширине страницы
2. Краткое описание
3. Рейтинг отзывов

HOW AIRGUARD WORKS

1. Совершенно не понятно, что это.

1. Много лишних объектов на заднем фоне картинок

На данной странице таких моментов множество.

Главные моменты:

1. Много пустого пространства
2. Блоки не акцентированы
3. Цвета не подходят друг другу
4. Лишние объекты на background
5. Лишняя аницация замедляет загрузку сайта
6. Неудобный header
7. С большей вероятностью конверсия сайта будет в несколько раз ниже, чем у конкурентов.
8. При такой высокой цене продукта стилистика вообще не соответсвует ценовому сегменту.
9. Сайт по общему дизайну хуже, чем у конкурентов.
10. Нет отзывов и рейта, вряд ли такой товар вызовет доверие.

РЕШЕНИЕ:

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