Редизайн интернет-магазина на WordPress / Woocommerce
О проекте
Ещё в 2014 году мы разработали интернет-магазин «InterPresent», занимающийся продажей сувенирных изделий. На протяжении всего этого времени наша команда сопровождала проект, внедряя новую функциональность и работая над его продвижением. В результате заказчик ежегодно наблюдал впечатляющий рост как посещаемости, так и прибыли интернет-магазина.
Однако за прошедшие 7 лет дизайн сайта визуально устарел и перестал соответствовать запросам аудитории. Чтобы повысить конверсию и улучшить поведенческие факторы, было принято решение провести полный редизайн.
Читайте также:
Создание интернет-магазина подарков и сувенировОсобенности редизайна
Предыдущую версию дизайна мы создавали с нуля и в соответствии с корпоративным стилем организации. Этот раз не стал исключением. Наш дизайнер сохранил фирменные цвета и привычную навигацию, при этом полностью обновив визуальную составляющую. Такой подход позволит удержать постоянных покупателей, которые привыкли к определённому расположению элементов.
До начала работ главная страница выглядела следующим образом:
Новая версия дизайна совместила в себе компактность и ощущение пространства. Сайт стал занимать всю ширину экрана, а количество элементов управления и навигации было существенно уменьшено. Каталог товаров и поле поиска были перенесены в шапку сайта, при этом сама шапка стала занимать меньше места по вертикали. Также мы обновили рекламные баннеры в соответствии с новой стилистикой: они получили гораздо большую ширину, благодаря чему обращают на себя внимание и выглядят в разы привлекательнее.
Так выглядит главная страница после редизайна:
Каталог товаров также претерпел существенные изменения. Страница стала визуально чище: список категорий перестал акцентировать внимание на себе, а розничные цены на карточке товара выделены более явно. В сетке товаров теперь помещается по 3 позиции в ряд, что позволяет отображать большее количество товаров на одном экране. И хотя информации стало больше, страница воспринимается гораздо легче.
Страница товара
Так как список категорий был перенесён в шапку сайта, большую половину экрана занимает фотография товара. В связи с этим была упразднена возможность увеличения изображения: по высоте оно уже занимает практически весь экран.
Информация о ценах стала гораздо легче для восприятия. На старой версии сайта справа от товара было расставлено сразу несколько акцентов, из-за чего страница выглядела шумно, а внимание посетителя рассеивалось. Новый дизайн предполагает главный акцент на розничной цене и более логичное разделение смысловых блоков.
Список похожих товаров теперь представлен в виде слайдера. Такое решение позволило сделать страницу более компактной и одновременно с этим разместить большее количество товаров в карусели.
Корзина и оформление заказа
В предыдущей версии сайта корзина была реализована в качестве отдельной страницы. На ней отображался список покупок, а под ним помимо общей суммы заказа присутствовало сразу 4 акцентные кнопки.
Мы существенно переработали и упростили просмотр содержимого корзины: теперь она представлена в виде всплывающего меню, доступного на любой странице. Список товаров выводится слева, а справа осталось только поле для ввода купона и кнопка оформления заказа.
Оформление заказа также выглядит гораздо чище:
- удалены назойливые плашки для незарегистрированных пользователей;
- более наглядное визуальное разделение логических разделов;
- общая стоимость и кнопки управления заказом выделены в отдельную колонку.
Информационные страницы
Информационные страницы получили новые способы визуального повествования.
Ранее вся информация выводилась сплошным текстом, а форматирование предусматривало только нумерованные списки и выделение красным цветом. В новом дизайне предусмотрено использование разных шрифтов и размеров текста, иллюстрации для каждого раздела, используется виджет FAQ для объяснения ключевых вопросов.
Новая подача сделала восприятие контента более доступным, а страница больше не создаёт впечатление массивного полотна текста.
Адаптивность
Исходя из тенденций последних лет большинство розничных покупателей будут посещать сайт с мобильного устройства. А значит очень важно чтобы сайт был адаптивным, сохраняя привлекательный внешний вид и богатую функциональность и на мобильных устройствах.
Главные изменения претерпела шапка сайта. Раньше основную площадь занимал баннер, а кнопка меню и номер телефона были вытеснены в одну строку сверху. Теперь же шапка несёт в основном функциональную нагрузку и содержит:
- логотип;
- гамбургер-меню с вложенными информационными страницами и контактами;
- отдельное меню с каталогом товаров;
- корзину;
- поле поиска по товарам.
При этом она стала занимать меньше места!
Остальные страницы сайта полностью соответствуют десктопной версии. Функциональные блоки адаптируются под размер экрана, а на страницах с двумя колонками содержимое перестраивается и подаётся в последовательном виде.
Итог
Главным успехом проведённого редизайна можно считать сочетание преемственности и свежего взгляда. Преимуществом старой версии сайта была навигация и общая структура, которая осталась нетронутой. Однако визуал был полностью обновлён: более яркая цветовая схема, компактный интерфейс, эффективная подача информации.
Все эти составляющие призваны не только оказать благоприятное впечатление, но и значительно повысить коэффициент конверсии. С нетерпением будем ждать результатов.
