Клиент: «Дом Декор» — интернет-магазин, занимающийся продажей декоративных обоев и материалов для отделки. Компания работает с 2011 года.
Целевая аудитория: женщины от 25 до 34 лет (75%).
Сайт: http://domdecor74.ru
Сроки сотрудничества: с 2014 года по настоящее время.
Услуга: комплексный интернет-маркетинг.
Сайт клиента до юзабилити
Задача: повышение конверсии, улучшение поведенческих факторов.
Макет главной страницы
Раньше на сайте был двухколоночный макет с рабочей зоной шириной 980 px. Визуально сайт выглядел достаточно устаревшим, были проблемы с версткой. Впоследствии мы увеличили рабочее пространство почти до 1250 px. Также мы скомбинировали двух- и одноколоночный макеты − для удобной навигации по каталогу оставили левое меню.
Шапка сайта
До: Маленький черный шрифт на темном фоне, баннеры без пагинатора, а под ними − куча пустого пространства. Вся информация в шапке выглядит неструктурированно, блоки расположены на разной высоте. В целом выглядит несуразно.
После: полный редизайн шапки (и далее всего сайта). Сделали второе меню с информацией для клиентов. Нарисовали новые баннеры, заполнили пространство под ними каруселью с брендами.
Контент-часть главной страницы
Оформили основные разделы каталога для быстрого перехода и сделали общую ссылку.
Сделали популярные товары во всю ширину страницы. Отказались от «карусели товаров» в пользу панорамного осмотра большого списка товаров. Как показывает практика, покупателям проще просматривать одновременно большое количество примеров.
Чтобы сэкономить место на странице для двух блоков «Лидеры продаж» и «Распродажа», мы объединили их в один компонент с двумя вкладками.
Еще мы вывели на главную страницу отзывы с общей ссылкой. Это дополнительный элемент доверия т.к в основном люди ищут отзывы, а не компании. Все отзывы настоящие(это важно), их можно оставить на дополнительной странице.
Для любителей дополнительного контента мы оформили ниже «своеобразный» блок с информацией для клиента и полезными статьями. Как и прежде, чтобы сэкономить место, мы расположили эти блоки в пределах одной ширины страницы. Все изображения должны быть одинакового размера или заверстаны так, чтобы они выглядели пропорционально друг другу (этим правилом мы руководствуемся не только в данном блоке, но и на всем сайте).
Футер сайта
До: ситуация как с шапкой сайта – нечеткий шрифт, весь текст сделан «под одну гребенку». Меню сливается с адресом и телефонами, нет разграничения. Плюс ко всему, из-за двухколоночного макета мы видим много пустого пространства выше.
После: полный редизайн футера, условное разбиение на две части – одна с разделами меню, другая − с информацией о компании. Сохранили цвета от общего стиля сайта, каждые ключевые данные выделены своим цветом и шрифтом. Добавили ссылку на «Яндекс.Карты».
Для удобства добавили кнопку «Наверх».
Выполнили редизайн внутри каталога товаров. «Приукрасили» наружность корня каталога, сократили пространство на странице путем размещения трех разделов в строку с более компактной версткой. В разделе с товарами сделали по 3 элемента в строку, сохранили стиль товара с главной страницы (см.выше «Популярные товары»).
До: разделы каталога.
До: товары каталога.
После: разделы каталога.
После: товары каталога.
Поправили верстку на самой странице с товаром( слева скрин сайта до, а справа - после).
На страницу «О компании» вынесли кликабельные блоки с информацией о заказе, где по ссылке можно подробнее узнать о каждом этапе.
Обновили страницу «Покупателям», куда приводили ссылке выше.
До:
После:
Сайт клиента до юзабилити(слева) и после(справа). Фото кликабельны.