Редизайн футбольного медіапорталу Vital Football
Vital Football – незалежна спортивна медіаплатформа, яка багато років висвітлює події англійського футболу: від матчів Premier League до нижчих дивізіонів, інтерв’ю, оглядів турів і колонок уболівальників. Портал має велику лояльну спільноту, але з часом зіткнувся з типовими проблемами зрілих медіа: застарілий інтерфейс, перевантажені сторінки, складна структура розділів і падіння показників залученості на мобільних пристроях.
Команда Promodex долучилася до проєкту як технологічний і продуктовий партнер. Наше завдання – повністю оновити фронтенд-частину порталу на WordPress, не втрачаючи контентну спадщину й аудиторію, а також інтегрувати сучасну аналітику, рекламні платформи й інструменти SEO без шкоди для швидкодії.
Вихідні виклики та цілі проєкту
На старті ми отримали типовий для новинних порталів набір болей:
- несистемна структура рубрик і тегів – складно знайти потрібну лігу, клуб або аналітичний матеріал;
- застарілий дизайн, що не відповідав очікуванням сучасних користувачів та брендів-рекламодавців;
- низькі показники на мобільних пристроях, складне читання довгих текстів на малих екранах;
- нагружені сторінки з великою кількістю скриптів і рекламних блоків;
- розрізнена аналітика – частина даних у Google Analytics, частина в сторонніх сервісах.
Головна мета співпраці – перезібрати користувацький досвід навколо ключового сценарію: уболівальник відкриває сайт, миттєво знаходить цікавий контент (новини, огляди, відео, статистику по клубу), зручно читає його з будь-якого пристрою й при цьому не стикається з «важкою» рекламою чи повільним завантаженням.
Концепція нового інтерфейсу
Ми запропонували підхід «content first»: дизайн не змагається з фотографіями, заголовками й аналітикою, а підсилює їх. На всіх ключових сторінках з’явилися великі візуальні блоки з яскравими фото матчів, чітка типографіка та логічна ієрархія заголовків.
Оновлена головна сторінка об’єднує три ключові блоки: «TODAY'S TOP STORIES», «LATEST NEWS» та персоналізовану стрічку «MY FEED». Це дозволяє відразу відповісти на три питання користувача: що головне сталося сьогодні, що нового з’явилося в стрічці та який контент може бути персонально цікавий.
Для першого екрану ми використали великий медійний слайдер із повноекранним фото, заголовком, лігою, датою та CTA-кнопкою «Read more». На ньому редакція виносить головні матеріали дня – наприклад, великий огляд туру «FA Cup fourth round: what we learned in Saturday's matches».
Сторінка окремої новини отримала чіткий фокус на контенті: великий заголовок, дата, ліга, автор, велике фото та розгорнутий текст матеріалу з хорошою читабельністю на будь-якому екрані. Праворуч або під статтею – блок «Latest news», який утримує користувача в межах сайту й підказує, що варто прочитати далі.
Структура клубних розділів: від хаосу до системи
Значна частина трафіку надходить на сторінки клубів – фанати переходять одразу в розділ улюбленої команди. Для таких сторінок ми розробили окрему логіку навігації. У верхній частині клубного хаба розміщений логотип клубу та назва, а нижче – таби: Overview, News, Video, Standings & Matches, Squad, Achievements, Join us in the forum. Кожен таб – окрема «лендінг-сторінка» всередині клубу.
Для відео розділу ми зробили повноцінну галерею з великими прев’ю, датою, лігою й назвою відео. Користувач легко перемикається між останніми хайлайтами, добірками голів і оглядами матчів.
У табі News зібрана стрічка клубних новин: короткі картки з прев’ю, тегами ліг і часом публікації. Це окрема «міні-редакція» всередині порталу, де фанати конкретної команди можуть стежити лише за своїм клубом.
Таким чином, фанат конкретного клубу отримує єдиний центр інформації, де можна прочитати новини, подивитися відео, перевірити турнірну таблицю й одразу перейти до обговорення на форумі Vital Football.
Головна сторінка як медіа-хаб
На головному екрані порталу ми збалансували редакційний контент і комерційні блоки. У шапці розміщені основні розділи: Home, News and Views, Video, About Vital та посилання на повний портал форумів. Нижче – великий слайдер, блоки з топ-історіями, останніми новинами та персоналізованою стрічкою «My Feed».
Усі елементи побудовані на єдиній сітці й працюють як «модулі», які редакція може комбінувати: посилювати відео, виводити більше аналітики або робити акцент на клубних новинах залежно від інформаційного дня.
Технічна реалізація та стек технологій
Портал історично працює на CMS WordPress, тому наше завдання було не просто «намалювати» новий дизайн, а вписати його в існуючу екосистему без зупинки публікацій. Ми обрали гібридний підхід: класична WordPress-адмінка + сучасний фронтенд із компонентною системою стилів.
- Front-end: HTML5, CSS3, JavaScript, бібліотека styled-components 5.3.6 для побудови модульних стилів і швидкого рендерингу.
- Back-end: PHP, MySQL, кастомні шаблони WordPress для новин, клубних сторінок та відео-розділів.
- Вебсервер: Nginx 1.22.1 як вебсервер і зворотний проксі, оптимізований під високі навантаження.
- Аналітика: Google Analytics, Google Tag Manager, Oracle Moat Measurement для детальної оцінки рекламних показів.
- Монетизація: інтеграція рекламних мереж Teads та Taboola з урахуванням їхнього впливу на швидкість сторінки.
- SEO та соціальні мережі: Open Graph, sitemap.xml, robots.txt, canonical, hreflang для різних мов і регіонів.
- Безпека: повсюдний HTTPS, політика HSTS, коректне налаштування кешування й заголовків безпеки.
Використання styled-components дозволило зменшити кількість зайвих CSS-файлів, позбутися дублювання стилів і спростити підтримку великої команди фронтенд-розробників у майбутньому.
Аналітика, реклама й продуктивність
Для медіапорталу критично важливо не просто показати рекламу, а зробити це так, щоб користувач не відчував, що контенту стало менше. Тому інтеграцію Teads і Taboola ми проєктували разом із новою контентною сіткою: рекламні блоки з’являються в логічних точках сторінки, не перекриваючи заголовок або ключові абзаци.
Через Google Tag Manager та Oracle Moat ми налаштували єдину систему збору подій: перегляди сторінок, кліки по рекламних блоках, час взаємодії, глибину скролу тощо. Це дозволило редакції й відділу монетизації працювати з реальними цифрами, а не з розрізненими звітами.
Під час розробки ми постійно тримали фокус на PageSpeed: оптимізували зображення, ввели ледаче завантаження, об’єднали скрипти й стилі там, де це можливо, та винесли важкі елементи «нижче фолду».
Покращення показників і результат для бізнесу
Уже в перші місяці після запуску оновленого інтерфейсу Vital Football зафіксував суттєві зміни в поведінці аудиторії та технічних метриках.
- Швидкість завантаження сторінок зросла приблизно на 41% завдяки переходу на компонентний підхід до стилів і оптимізації ресурсів.
- Кількість переглядів сторінок на одного користувача збільшилася на ~35% – користувачам стало легше переходити між новинами, відео та клубними розділами.
- Показники SEO продемонстрували зростання видимості бренду у Google приблизно на 27% протягом перших трьох місяців після релізу.
- Рекламна монетизація стала більш прозорою: через Oracle Moat команда бачить якість показів, viewability та ефективність різних форматів.
- Мобільна аудиторія отримала повноцінний досвід – без горизонтального скролу, з великими інтерактивними елементами та швидким відображенням сторінок.
Головний результат – Vital Football зберіг свою ідентичність як фанатський медіабренд, але отримав сучасний, швидкий і комерційно ефективний портал, готовий до подальшого масштабування.
Висновок
Редизайн Vital Football став прикладом того, як можна оновити великий контентний проєкт без «перезавантаження» бренду і втрати лояльної аудиторії. Завдяки новому дизайну, продуманому UX клубних і новинних розділів, компонентному фронтенду й інтегрованій аналітиці, портал отримав друге життя та готовий до роботи в умовах дедалі більш конкурентного ринку спортивних медіа.
Для Promodex цей кейс – ще одне підтвердження, що ми вміємо працювати не тільки з e-commerce, а й із високонавантаженими медіапроєктами, де важлива кожна мілісекунда, кожен блок контенту й кожен рекламний показ.