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