Кейс: юзабилити интернет-магазина отделочных материалов

Клиент: «Дом Декор» — интернет-магазин, занимающийся продажей декоративных обоев и материалов для отделки. Компания работает с 2011 года.

Целевая аудитория: женщины от 25 до 34 лет (75%).

Сайт: http://domdecor74.ru

Сроки сотрудничества: с 2014 года по настоящее время.

Услуга: комплексный интернет-маркетинг.

          

Сайт клиента до юзабилити

Задача: повышение конверсии, улучшение поведенческих факторов.

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

Раньше на сайте был двухколоночный макет с рабочей зоной шириной 980 px. Визуально сайт выглядел достаточно устаревшим, были проблемы с версткой. Впоследствии мы увеличили рабочее пространство почти до 1250 px. Также мы скомбинировали двух- и одноколоночный макеты − для удобной навигации по каталогу оставили левое меню.

Шапка сайта

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

После: полный редизайн шапки (и далее всего сайта). Сделали второе меню с информацией для клиентов. Нарисовали новые баннеры, заполнили пространство под ними каруселью с брендами.

Контент-часть главной страницы

Оформили основные разделы каталога для быстрого перехода и сделали общую ссылку.

Сделали популярные товары во всю ширину страницы. Отказались от «карусели товаров» в пользу панорамного осмотра большого списка товаров. Как показывает практика, покупателям проще просматривать одновременно большое количество примеров.

Чтобы сэкономить место на странице для двух блоков «Лидеры продаж» и «Распродажа», мы объединили их в один компонент с двумя вкладками.  

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

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

Футер сайта

До: ситуация как с шапкой сайта – нечеткий шрифт, весь текст сделан «под одну гребенку». Меню сливается с адресом и телефонами, нет разграничения. Плюс ко всему, из-за двухколоночного макета мы видим много пустого пространства выше.

После: полный редизайн футера, условное разбиение на две части – одна с разделами меню, другая − с информацией о компании. Сохранили цвета от общего стиля сайта, каждые ключевые данные выделены своим цветом и шрифтом. Добавили ссылку на «Яндекс.Карты».

Для удобства добавили кнопку «Наверх».

Выполнили редизайн внутри каталога товаров. «Приукрасили» наружность корня каталога, сократили пространство на странице путем размещения трех разделов в строку с более компактной версткой. В разделе с товарами сделали по 3 элемента в строку, сохранили стиль товара с главной страницы (см.выше «Популярные товары»).

До: разделы каталога.

До: товары каталога.

После: разделы каталога.

После: товары каталога. 

Поправили верстку на самой странице с товаром( слева скрин сайта до, а справа - после).

На страницу «О компании» вынесли кликабельные блоки с информацией о заказе, где по ссылке можно подробнее узнать о каждом этапе.

Обновили страницу «Покупателям», куда приводили ссылке выше.

До:

После:

Сайт клиента до юзабилити(слева) и после(справа). Фото кликабельны.