Інтернет-магазини – це складні системи, де кожен елемент має працювати на результат. У цьому кейсі ми розповімо, як команда NML Digital допомогла інтернет-магазину жіночого одягу Booriva вдосконалити сайт, оптимізувати його функціонал і зробити зручнішим для клієнтів.
Інформація про клієнта
Booriva – це український інтернет-магазин жіночого одягу, який пропонує широкий асортимент стильних речей для сучасних жінок. Компанія працює в конкурентній ніші, де клієнти цінують не лише якість товару, а й зручність покупок онлайн. Сайт магазину створений на платформі WordPress, що забезпечує гнучкість у налаштуваннях, але водночас потребує регулярного вдосконалення для підтримання конкурентоспроможності. Клієнт звернувся до нас через кілька проблем, які гальмували розвиток бізнесу:
- Однорівневе меню ускладнювало навігацію, адже асортимент магазину великий, клієнтам було важко швидко знайти потрібну категорію.
- Відсутність автоматичних повідомлень для клієнтів, що могло б підвищити лояльність.
- Необхідність оновлення банерів, щоб рекламні матеріали виглядали сучасно та привертали увагу.
- Великі розміри зображень, які уповільнювали завантаження сторінок, що негативно впливало на користувацький досвід і SEO.
Booriva вже мала стабільну аудиторію, але хотіла вийти на новий рівень, оптимізувавши сайт і автоматизувавши деякі процеси. Клієнт не мав чітко визначених строків чи бюджету, що дозволило нам працювати гнучко, але водночас вимагало чіткої комунікації щодо пріоритетів.
Результати нашої роботи
За час співпраці ми досягли відчутних результатів, які позитивно вплинули на роботу інтернет-магазину. Ось що ми зробили:
Ці покращення не лише підвищили ефективність роботи сайту, а й сприяли зростанню продажів, покращенню користувацького досвіду та зміцненню довіри з боку постійних клієнтів.
Процес роботи
Над проєктом працював один розробник, який відповідав за всі технічні аспекти. Ми використовували PHP, JavaScript і HTML, враховуючи особливості платформи WordPress. Робота була розбита на кілька етапів:
Аналіз поточного стану сайту
Першим кроком ми провели аудит сайту, щоб виявити слабкі місця. Ми звернули увагу на:
- Швидкість завантаження сторінок (аналіз через розширення Google PageSpeed Insights).
- Зручність навігації (тестування на реальних користувачах).
- Технічні помилки, які могли впливати на функціонал.
- Працездатність сайту на різних пристроях.
Виявили, що однорівневе меню ускладнює пошук товарів, а великі зображення значно уповільнюють сайт, особливо на мобільних пристроях.
Опрацювання нового меню
Одним із ключових завдань проєкту для інтернет-магазину Booriva було вдосконалення навігації сайту шляхом створення дворівневого меню. Попереднє однорівневе меню не відповідало потребам зростаючого асортименту магазину, ускладнюючи пошук товарів для користувачів.
Наша мета полягала в тому, щоб зробити навігацію інтуїтивно зрозумілою, швидкою та адаптивною для всіх типів пристроїв, враховуючи, що значна частка аудиторії заходить на сайт із мобільних телефонів. Перед початком розробки ми провели детальний аналіз поточного меню:
- Аналіз структури. Вивчили асортимент Booriva, щоб зрозуміти, які категорії потрібно виділити як основні, а які – як підкатегорії. Наприклад, категорія «Верх» мала розгортатися в «Світшоти», «Худі», «Футболки» тощо.
- Тестування користувацького досвіду (UX). Ми запросили зворотний зв’язок від клієнта та проаналізували поведінку користувачів через Google Analytics, щоб виявити, які категорії найпопулярніші. Це допомогло визначити пріоритети в розташуванні пунктів меню.
- Технічний аудит: перевірили поточну реалізацію меню на WordPress. Воно використовувало стандартний віджет меню з мінімальним JavaScript для інтерактивності, що обмежувало можливості для створення динамічного дворівневого дизайну.
- Аналіз конкурентів. Вивчили структуру меню та навігацію на сайтах конкурентів, щоб впровадити найкращі практики і зробити меню більш привабливим і зручним для користувачів.
На основі аналізу ми склали технічне завдання. По-перше, потрібно було створити дворівневе меню, що буде коректно відображатись на усіх пристроях. При цьому зберегти швидкість завантаження сторінок та нтегрувати меню з адмін-панеллю WordPress.
На етапі проєктування ми створили прототип меню у Figma, щоб узгодити дизайн із клієнтом.
Прототип включав десктопну (горизонтальне меню з випадаючими підкатегоріями) та мобільну версію (бургер-меню, яке розгортається в повноекранний список). Після затвердження прототипу ми перейшли до технічної реалізації.
Технічна реалізація дворівневого меню
Розробка дворівневого меню велася з використанням PHP, JavaScript, HTML і CSS, з урахуванням особливостей платформи WordPress.
Для мобільних пристроїв реалізували бургер-меню, яке активується при ширині екрана менше 768 пікселів. Також додали можливість згортання/розгортання підкатегорій через іконки «>»/«<».
Інтеграція з WordPress:
- Налаштували меню так, щоб клієнт міг легко додавати, видаляти або редагувати категорії через адмін-панель WordPress (Розділ «Зовнішній вигляд» → «Меню»).
- Додали підтримку динамічних категорій WooCommerce, щоб нові категорії товарів автоматично з’являлися в меню після їх створення.
Завдяки комплексному підходу до розробки меню ми досягли максимальної зручності для користувачів і забезпечили клієнту повну керованість навігацією через адмін-панель WordPress.
Тестування та оптимізація нового меню
Після реалізації ми провели кілька етапів тестування:
- Функціональне тестування. Перевірили, чи всі підкатегорії розгортаються коректно, чи немає конфліктів із іншими елементами сайту.
- Кросбраузерність. Протестували меню в Chrome, Firefox, Safari, Edge і на мобільних браузерах (iOS Safari, Samsung Internet).
- Адаптивність. Перевірили відображення на екранах із роздільною здатністю від 320 пікселів (iPhone SE) до 1920 пікселів (десктопи).
- Швидкість. Пиміряли вплив нового меню на час завантаження сторінок через Google PageSpeed Insights. Завдяки легкому JavaScript і кешуванню вплив виявився мінімальним (збільшення часу завантаження на 0.1 секунди).
Виявили дрібний баг: на деяких Android-пристроях підкатегорії не розгорталися при першому кліку через конфлікт із touch-подіями. Ми вирішили це, додавши обробку touchstart у JavaScript.
Розробка автоматичної системи привітань
Ми інтегрували систему автоматичних SMS-повідомлень. Клієнт при реєстрації вказує дату народження, яка зберігається в базі даних WordPress. За день до дня народження система автоматично генерує повідомлення з привітанням і персональним промокодом на знижку. Для цього ми налаштували плагін для роботи з SMS-шлюзами, створили шаблон повідомлення, додали відстеження використання промокодів та інтегрували систему автоматичних нагадувань про акції та знижки.
Оптимізація розміру зображень
Для прискорення завантаження ми оптимізували всі зображення на сайті. Використали інструменти стиснення (TinyPNG), змінили формат з PNG на WebP та налаштували lazy loading (відкладене завантаження) для зображень, які з’являються нижче видимої області екрана. Це дозволило зменшити розмір зображень на 60% без суттєвої втрати якості.
Запуск оновлень і моніторинг
Після впровадження всіх змін ми провели тестування:
- Перевірили коректність роботи меню на різних пристроях.
- Протестували відправку SMS і активацію промокодів.
- Відстежили швидкість завантаження через Google PageSpeed Insights. Після запуску ми раз на місяць перевіряємо сайт на наявність багів і оновлюємо функціонал за потреби.
- Тестували сумісність з основними браузерами, щоб забезпечити коректне відображення та функціонування сайту в усіх популярних веб-браузерах (Chrome, Firefox, Safari, Edge).
Результати тестування підтвердили успішну реалізацію змін, і завдяки регулярному моніторингу ми забезпечуємо безперебійну роботу сайту та постійне покращення його ефективності.
Маєте схожий запит або шукаєте рішення для свого бізнесу? Фахівці NML Digital завжди готові допомогти вам!
Особливості кейса
Цей проєкт вирізняється кількома аспектами:
- Гнучкість співпраці. Відсутність жорсткіх дедлайнів дозволила нам експериментувати та пропонувати оптимальні рішення.
- Конкурентна ніша. Ринок жіночого одягу в Україні перенасичений, тому кожен елемент сайту мав бути продуманим, щоб вирізнятися серед конкурентів.
- Інтеграція з існуючими системами. Вдалося без проблем інтегрувати нові функції з наявними системами, такими як WooCommerce, що забезпечило збереження ефективності роботи без перерв у функціонуванні магазину.
- Автоматизація взаємодії. Система привітань із днем народження стала фішкою, яка підвищила лояльність клієнтів.
Ще одна особливість – акцент на користувацькому досвіді. Ми не просто виконували технічні задачі, а думали, як зробити сайт зручнішим для клієнтів Booriva. Наприклад, під час оптимізації зображень ми враховували, що більшість користувачів заходять із мобільних пристроїв, тому швидкість завантаження була критичною.
Проєкт із Booriva триває вже півтора року, і ми продовжуємо співпрацю. За цей час ми вдосконалили навігацію, прискорили сайт, автоматизували взаємодію з клієнтами та оновили рекламні матеріали.
