-
Про клієнта
OHAYU це міжнародний сервіс eSIM для подорожей, цифрових кочівників та віддалених команд. Блог бренду - це основний інформаційний ресурс із порадами щодо мобільного зв'язку та інтернету за кордоном, тревелінгу та технічних рішень.
-
Цілі проєкту
Нашою основною задачею було оновити зовнішній вигляд та структуру блогу відповідно до нового дизайну, а також покращити юзабіліті та зберегти SEO-показники.
-
Тип робіт
WordPress-розробка, редизайн, UX/UI для блогу
-
Редизайн
Повністю оновлено зовнішній вигляд блогу відповідно до дизайну в Figma — головна сторінка, сторінки статей, кастомна 404.
-
Швидкодія
Оптимізовано швидкість завантаження блогу, що позитивно вплинуло на взаємодію користувачів із контентом.
-
SEO
Збережено та покращено SEO-структуру сайту: мета-теги, правильна пагінація, breadcrumbs, індексація змісту, без втрати позицій у Google.
-
Редагування
Спрощено щоденну роботу контент-команди завдяки сумісності з Gutenberg і кастомним компонентам (автори, банери, теги).
Проєкт ми реалізували поетапно - від клонування сайту до повного впровадження на продакшн. Робота велась у тісній комунікації з командою OHAYU через Google документи, Telegram та дзвінки в Google Meet.
Цілі проєкту
Під час виконання роботи ми виконували такі завдання.
- Впровадження кастомного дизайну з Figma;
- Оптимізація швидкості завантаження сторінок;
- Максимальна зручність редагування для контент-команди;
- адаптація під мобільні пристрої з обов’язковим тестуванням популярних моделей iPhone та Android, оскільки основний трафік сайту надходить користувачів мобільних телефонів.
Складність проєкту полягала в тому, що основний сайт створено на React SPA, тобто неможливо було скопіювати частину хедеру, чи стильові елементи, все треба було робити з нуля.
Основні реалізовані рішення
Хедер-меню та навігація
- Фіксована шапка як на основному сайті https://ohayu.com/, щоб складалось повне враження знаходження на тому самому сайту, без стрибків навігації
- Випадаюче меню з категоріями блогу та довідки
- Адаптивність на всіх екранах
Сторінки
- Головна сторінка блогу з фільтрами, хмара тегів, CTA-блоками
- Категорії, теги та сторінки авторів з SEO-полями та пагінацією
- Сторінка статті з індексом змісту, кнопками шарингу, блоками «Читайте також»
- Кастомна 404 та сторінка без результатів пошуку
Контент і зручність роботи редакторів
- Стилізований пошук
- Автоматичний зміст (ToC) на основі H2
- CTA-блоки з банерами та підтримкою UTM-міток
- Гутенберг-сумісні компоненти: автори, теги, банери
- Breadcrumbs та розмітка для Google
Дизайн
Макети реалізовано відповідно до Figma-дизайну:
Технології
- WordPress (кастомна тема)
- Yoast SEO, Site Kit від Google
- Кастомний функціонал змісту
- Власні стилі та скрипти
Результати
- Покращення показників швидкості
- SEO-структура збережена й оптимізована
- Вищий рівень взаємодії з контентом
- Спрощення публікації та редагування для редакторів
Подивитись проєкт
Саме час обговорити проєкт, якщо ви хочете запустити струм у свій бізнес