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

Про проект

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

Однак за минулі 7 років дизайн сайту візуально застарів та перестав відповідати запитам аудиторії. Щоб підвищити конверсію та покращити поведінкові фактори, було ухвалено рішення провести повний редизайн.

Читайте також:

Створення інтернет-магазину подарунків та сувенірів

Особливості редизайну

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

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

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

Так виглядає головна сторінка після редизайну:

Каталог товарів також зазнав істотних змін. Сторінка стала візуально чистіша: список категорій перестав акцентувати увагу на собі, а роздрібні ціни на картці товару виділені явніше. У сітці товарів тепер міститься по 3 позиції в ряд, що дозволяє відображати більше товарів на одному екрані. І хоча інформації побільшало, сторінка сприймається набагато легше.

Сторінка товару

Оскільки список категорій був перенесений у шапку сайту, більшу половину екрану займає фотографія товару. У зв’язку з цим було скасовано можливість збільшення зображення: за висотою воно займає практично весь екран.

Інформація про ціни стала набагато легшою для сприйняття. На старій версії сайту праворуч від товару було розставлено відразу кілька акцентів, через що сторінка виглядала галасливо, а увага відвідувача розсіювалася. Новий дизайн передбачає головний акцент на роздрібній ціні та більш логічний поділ смислових блоків.

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

Кошик та оформлення замовлення

У попередній версії сайту кошик був реалізований як окрема сторінка. На ній відображався список покупок, а під ним, крім загальної суми замовлення, були присутні відразу 4 акцентні кнопки.

Ми суттєво переробили та спростили перегляд вмісту кошика: тепер він представлений у вигляді спливаючого меню, доступного на будь-якій сторінці. Список товарів виводиться зліва, а праворуч залишилося лише поле для введення купону та кнопка оформлення замовлення.

Оформлення замовлення виглядає набагато чистіше:

віддалені настирливі плашки для незареєстрованих користувачів;
наочніший візуальний поділ логічних розділів;
загальна вартість та кнопки керування замовленням виділені в окрему колонку.

Інформаційні сторінки

Інформаційні сторінки отримали нові способи візуального оповідання.

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

Нова подача зробила сприйняття контенту доступнішим, а сторінка більше не створює враження масивного полотна тексту.

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

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

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

логотип;
гамбургер-меню з вкладеними інформаційними сторінками та контактами;
окреме меню з каталогом товарів;
кошик;
поле пошуку товарів.

При цьому вона почала займати менше місця!

Інші сторінки сайту повністю відповідають десктопній версії. Функціональні блоки адаптуються під розмір екрану, а на сторінках із двома колонками вміст перебудовується та подається у послідовному вигляді.

Підсумок

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

Всі ці складові покликані не тільки сприятливо вразити, але й значно підвищити коефіцієнт конверсії. З нетерпінням чекатимемо на результати.

О проекте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итог

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

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