Редизайн сайта для компании «БетКам». Производителя декоративных изделий из бетона

Анализ ЦА

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

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

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

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

Решение

1. Редизайн айдентики

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

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

НОВЫЙ ВИД 

1. Логотип векторный, по желанию можно сменить цвет. Подходит для растягивания на больше объекты (баннеры).
2. Понятные «живые» цвета, подходящие тематике товара. 

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

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

1. Слишком большой header из-за лишней иллюстрации справа.
2. Корзина теряется и становится незаметной из-за огромных элементов вокруг неё.
3. Footer «увешан» декором, а важная информация размещена на неконтрастном сером фоне.
4. Fixmenu дублирует строку навигации, ничем не примечательно. 

НОВЫЙ ВИД 

1. Избавились от лишнего в header. Важные элементы акцентировали цветом, привели все составляющие к структурному порядку, добавили навигацию по категориям.
2. Footer стал более контрастным. Сделали выраженное разделение по категориям, добавили навигацию по второстепенным страницам сайта. 

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

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

1. Чтобы добавить товар в корзину, надо заходить на страницу товара, из листинга это сделать невозможно.
2. Расцветки можно посмотреть тоже только на странице товара.
3. Видно только одно схематичное изображение товара, остальные картинки также только на странице. 

НОВЫЙ ВИД

1. Добавили кнопки «В корзину» и «Купить в 1 клик». Кнопку «Подробнее» убрали, так как на страницу можно перейти по клику в любой зоне карточки.
2. Можно сразу увидеть все цвета и выбрать подходящий.
3. Добавили слайдер, чтобы можно было увидеть все изображения товара.
4. Добавили идентификацию («Новинка», «Популярный товар»).
5. Добавили рейтинг товара, который строится на основе отзывов о нём. 

4. Homepage

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

1. Посетителя встречает баннер, который не несёт никакой смысловой нагрузки.
2. Каталог расположен сбоку, что постепенно устаревает.
3. Большой пласт текста «О компании».
4. Отсутствуют товары.
5. Форма для заявки на консультацию с разными по стилистике полями ввода. 

НОВЫЙ ВИД

1. Баннер с понятными кнопками и слайдером — можно разместить акцию или новость о товарах и магазине.
2. Каталог ушёл в header.
3. Появились блоки с товарами «Новинки» и «Популярные позиции».
4. Добавились новые блоки: с полным каталогом, ход работы для клиента, полезные статьи, преимущества компании, портфолио.
5. Текст «О компании» разбавлен большими красивыми фотографиями и выстроен так, чтобы его было удобно читать.
6. Форма заявки теперь в одном стиле, выделена за счёт контрастного фона, а не текстурного декора. 

5. Каталог

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

1. Структура хорошая, но непонятно, что на категорию тоже можно нажать.
2. Фотографии маленькие, разные, не очень понятно, что на них изображено.

НОВЫЙ ВИД

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

6. Категории каталога

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

1. Чтобы увидеть фильтр, надо пролистать боковой каталог. Это неудобно.
2. Страница растянута из-за отображения сразу всех товаров категории.

НОВЫЙ ВИД

1. Сохранилось отображение подкатегорий, облегчающее переход в каталог третьего уровня.
2. Фильтр теперь на уровне карточек товара.
3. Карточки отображаются по 4 ряда, остальные в пагинации.
4. Фильтр стал более удобным — можно скрыть мешающие фильтры. Цвета отражены эллипсами, чек-боксы стали крупнее, на них удобнее нажимать. 

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

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

1. Цена маленькая, хотя должна выделяться.
2. Количество приходится вводить через клавиатуру, нет кнопок «+» и «-».
3. Чтобы увидеть все цвета или размеры, необходимо раскрывать dropdown. 

НОВЫЙ ВИД

1. Цена теперь крупная, заметная.
2. Все цвета и размеры сразу видны, легче сделать выбор.
3. Количество можно ввести клавиатурой и кнопками «+»/«-».
4. Добавили таб с отзывами, где их можно прочитать и оставить, с часто задаваемыми вопросами и с просмотренными ранее товарами. 

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

НОВЫЙ ВИД

1. Весь новый функционал и стиль десктопной версии перенесён и в новую мобильную версию сайта.
2. Все элементы спроектированы так, чтобы на них было удобно нажимать пальцем, не промахиваясь.