Услуги

  • Сайты

  • Контент

  • Продвижение

  • Битрикс24

Все услуги
Все услуги

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Редизайн интернет-магазина на WordPress / Woocommerce

О проекте

Ещё в 2014 году мы разработали интернет-магазин «InterPresent», занимающийся продажей сувенирных изделий. На протяжении всего этого времени наша команда сопровождала проект, внедряя новую функциональность и работая над его продвижением. В результате заказчик ежегодно наблюдал впечатляющий рост как посещаемости, так и прибыли интернет-магазина.

Однако за прошедшие 7 лет дизайн сайта визуально устарел и перестал соответствовать запросам аудитории. Чтобы повысить конверсию и улучшить поведенческие факторы, было принято решение провести полный редизайн.

Особенности редизайна

Предыдущую версию дизайна мы создавали с нуля и в соответствии с корпоративным стилем организации. Этот раз не стал исключением. Наш дизайнер сохранил фирменные цвета и привычную навигацию, при этом полностью обновив визуальную составляющую. Такой подход позволит удержать постоянных покупателей, которые привыкли к определённому расположению элементов.

До начала работ главная страница выглядела следующим образом:

Новая версия дизайна совместила в себе компактность и ощущение пространства. Сайт стал занимать всю ширину экрана, а количество элементов управления и навигации было существенно уменьшено. Каталог товаров и поле поиска были перенесены в шапку сайта, при этом сама шапка стала занимать меньше места по вертикали. Также мы обновили рекламные баннеры в соответствии с новой стилистикой: они получили гораздо большую ширину, благодаря чему обращают на себя внимание и выглядят в разы привлекательнее.

Так выглядит главная страница после редизайна:

Каталог товаров также претерпел существенные изменения. Страница стала визуально чище: список категорий перестал акцентировать внимание на себе, а розничные цены на карточке товара выделены более явно. В сетке товаров теперь помещается по 3 позиции в ряд, что позволяет отображать большее количество товаров на одном экране. И хотя информации стало больше, страница воспринимается гораздо легче.

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

Так как список категорий был перенесён в шапку сайта, большую половину экрана занимает фотография товара. В связи с этим была упразднена возможность увеличения изображения: по высоте оно уже занимает практически весь экран.

Информация о ценах стала гораздо легче для восприятия. На старой версии сайта справа от товара было расставлено сразу несколько акцентов, из-за чего страница выглядела шумно, а внимание посетителя рассеивалось. Новый дизайн предполагает главный акцент на розничной цене и более логичное разделение смысловых блоков.

Список похожих товаров теперь представлен в виде слайдера. Такое решение позволило сделать страницу более компактной и одновременно с этим разместить большее количество товаров в карусели.

Корзина и оформление заказа

В предыдущей версии сайта корзина была реализована в качестве отдельной страницы. На ней отображался список покупок, а под ним помимо общей суммы заказа присутствовало сразу 4 акцентные кнопки.

Мы существенно переработали и упростили просмотр содержимого корзины: теперь она представлена в виде всплывающего меню, доступного на любой странице. Список товаров выводится слева, а справа осталось только поле для ввода купона и кнопка оформления заказа.

Оформление заказа также выглядит гораздо чище:

  • удалены назойливые плашки для незарегистрированных пользователей;
  • более наглядное визуальное разделение логических разделов;
  • общая стоимость и кнопки управления заказом выделены в отдельную колонку.

Информационные страницы

Информационные страницы получили новые способы визуального повествования.

Ранее вся информация выводилась сплошным текстом, а форматирование предусматривало только нумерованные списки и выделение красным цветом. В новом дизайне предусмотрено использование разных шрифтов и размеров текста, иллюстрации для каждого раздела, используется виджет FAQ для объяснения ключевых вопросов.

Новая подача сделала восприятие контента более доступным, а страница больше не создаёт впечатление массивного полотна текста.

Адаптивность

Исходя из тенденций последних лет большинство розничных покупателей будут посещать сайт с мобильного устройства. А значит очень важно чтобы сайт был адаптивным, сохраняя привлекательный внешний вид и богатую функциональность и на мобильных устройствах.

Главные изменения претерпела шапка сайта. Раньше основную площадь занимал баннер, а кнопка меню и номер телефона были вытеснены в одну строку сверху. Теперь же шапка несёт в основном функциональную нагрузку и содержит:

  • логотип;
  • гамбургер-меню с вложенными информационными страницами и контактами;
  • отдельное меню с каталогом товаров;
  • корзину;
  • поле поиска по товарам.

При этом она стала занимать меньше места!

Остальные страницы сайта полностью соответствуют десктопной версии. Функциональные блоки адаптируются под размер экрана, а на страницах с двумя колонками содержимое перестраивается и подаётся в последовательном виде.

Итог

Главным успехом проведённого редизайна можно считать сочетание преемственности и свежего взгляда. Преимуществом старой версии сайта была навигация и общая структура, которая осталась нетронутой. Однако визуал был полностью обновлён: более яркая цветовая схема, компактный интерфейс, эффективная подача информации.

Все эти составляющие призваны не только оказать благоприятное впечатление, но и значительно повысить коэффициент конверсии. С нетерпением будем ждать результатов.

Заказать редизайн интернет-магазина на Wordpress / Woocommerce

... - это легко! Напишите нам о своем проекте, дайте ссылку на сайт - и получите предложение по редизайну уже сегодня.