Про проєкт

ФК Харків (до ребрендингу Металіст 1925) — професійний український футбольний клуб із міста Харків із великою спільнотою вболівальників, жіночою командою та дитячою академією.

Разом із командою Linecore ми перемогли в тендері на створення єдиної цифрової екосистеми, яка мала об'єднати всі точки взаємодії клубу з уболівальниками в одному продукті.

В результаті редизайну було створено 700+ UX/UI-екранів

Задачі та цілі

  • Об'єднати всі цифрові продукти клубу (корпоративний сайт, фаншоп, фан-клуб та інші) в одну платформу;
  • Створити єдину інформаційну архітектуру для різних типів контенту й сервісів;
  • Врахувати потреби вболівальників, гравців, журналістів, академії та співробітників клубу;
  • Спроєктувати навігацію для масштабної цифрової екосистеми;
  • Інтегрувати eCommerce, продаж квитків і програму лояльності;
  • Зробити сайт головною точкою взаємодії між клубом і його спільнотою.

Головна сторінка та навігація для сервісів і кожної аудиторії клубу

  • Побудували інформаційну архітектуру, яка об'єднала розрізнені сервіси клубу в одну навігацію замість кількох окремих сайтів (від команд та статистики до академії, фаншопу й корпоративної інформації);
  • Сервіси пов'язані між собою: з матчу можна перейти до квитків чи мерчу, зі сторінки гравця — до статистики та матчів тощо, щоб не повертати користувача на головну для кожного наступного кроку;
  • Соцмережі, як-от підписка на YouTube чи Facebook, та спонсори винесені у шапку сайту, а не сховані чи мінімізовані, адже мета розширити спільноту. Завдяки цьому спонсори отримують постійну видимість на кожній сторінці, а навігація сприяє клубу рости на різних каналах.

Пошук в одну дію: гравці, матчі, магазин, новини

  • Глобальний пошук працює по всіх типах контенту одразу. Під час введення запиту користувач отримує інстант-видачу, згруповану за категоріями з лічильниками збігів («Гравці», «Матчі», «Магазин», «Новини») і прев'ю двох останніх новин поруч.
  • Якщо збігів немає, в інстант-видачі користувач бачить повідомлення «За вашим запитом нічого не знайдено» з рекомендацією прибрати зайві символи. А на сторінці результатів система пропонує уточнити запит або переглянути останні новини, щоб навіть невдалий пошук не ставав кінцем користувацького сценарію.

Команда в деталях: склад, штаб і статистика кожного гравця

  • Розділ «Команди» охоплює не лише склад футболістів, а й тренерський штаб, медичний та адміністративний персонал, календар матчів, статистику, турнірні таблиці. Кожна підкатегорія має власну головну сторінку з переходом на індивідуальні сторінки кожного учасника команди та на інші сервіси клубу.
  • Майже кожна сторінка розділу (профіль, календар, розклад, статистика, турнірна таблиця тощо) закінчується блоками: останні новини й фаншоп. Навіть якщо вболівальник зайшов лише за статистикою одного гравця, він за клік від актуальних новин і покупки. Так дизайн підтримує і залучення, і комерцію на кожному кроці користувача.

Новини та матч-центр: усе навколо матчу — до, під час і після гри

Новини — це не проста стрічка, а фільтрована система: категорії (Біографія, Трансфери, Гравці, Клуб тощо), чотири варіанти сортування (за алфавітом, спочатку нові, за популярністю, за датою), і пошук не тільки за темою, а й за людиною. Під статтями є повноцінна система коментарів із відповідями й лайками, де офіційний акаунт клубу відповідає користувачам прямо в тредах, а не окремим каналом. 

Матч-центр побудований навколо п'яти вкладок, що повторюють хронологію гри: 

  • Анонс (форма команд, стадіон, історія особистих зустрічей, час початку, трансляція, купити квиток, спрогнозувати стартовий склад або перейти до обговорення матчу в Гостьовій через Telegram); 
  • Склади (тактична розстановка обох команд на графічній схемі поля, а нижче — основний і запасний склад із хвилинами виходу на заміну та бригадою арбітрів); 
  • Наживо (текстова трансляція по хвилинах з іконкою під тип події (гол, картка, заміна, фінальний свисток) і лайком під кожним записом);
  • Статистика (удари по воротах (загальні й у площину воріт), кутові, фоли, офсайди, попередження — і окремо виносить голи та картки з прив'язкою до хвилин матчу); 

Медіацентр: фото, відео та життя клубу

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

No items found.

Fan Zone та Гостьова: спільнота вболівальників, прогнози та живе спілкування

  • У Fan Zone паралельно працюють кілька механік участі. 
  • Прогнози — дві функції: «Вгадай склад» (обрати  11 гравців до матчу, після гри — результат, збіги, помилки, бали) і «Конкурс прогнозів» (вгадати рахунок матчу з виведенням результатів у публічний сезонний рейтинг), обидві з історією спроб.
  • Гостьова як простір для спілкування: дописи, коментарі, пошук за темами, рейтинг найактивніших авторів, персональні профілі з нагородами, статистикою та історією активності.

Академія: Від першого пасу — до великої гри 

  • Для Академії використали ту саму логіку «мінісайту всередині сайту»: окремі сторінки для академій у різних містах, а для кожної вікової команди — власний профіль зі складом, тренерським штабом, новинами та медіаматеріалами. Такий підхід дозволив зберегти єдину логіку навігації та спростити підтримку всього розділу.
  • Дизайн сторінки відбору будувався на основі того як батьки насправді шукають інформацію. Тому тут не просто форма запису, а довідник за роком народження дитини з контактом тренера для кожного віку, умовами відбору та можливістю залишити заявку. 

Клуб: історія, бренд і все, що стоїть за гербом 

Розділ «Клуб» об'єднав корпоративну частину платформи: історію, керівництво, стадіони, контакти та брендбук. Для керівництва створили окремі профілі з біографією, новинами й медіаматеріалами, а контакти структурували за напрямами — від пресслужби до дитячої академії.

Для двох домашніх стадіонів реалізували окремі міні-хаби з інтерактивними схемами трибун, панорамами, правилами поведінки, медіазонами та формою акредитації. З урахуванням українських реалій на схемі також позначили розташування укриттів.

Брендбук перетворили на повноцінний центр бренду з файлами для завантаження, правилами використання айдентики та рекомендаціями для партнерів і медіа.

Особистий кабінет: історія покупок й програма лояльності в одному місці

В Особистому кабінеті об'єднали історію замовлень, обране, заявки на акредитацію (для журналістів), завантаження власного контенту та персональний PASS ID та абонемент з QR-кодом. 

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

Фаншоп та квитки: від шарфа до сезонного абонемента

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

Продумали й увесь сценарій покупки квитків: від інтерактивної схеми стадіону й сезонних абонементів до бронювання місць у автобусі на виїзні матчі. 

Усі покупки (мерч, квитки, клубні аукціони на ексклюзивні лоти та абонементи) оформлюються через єдиний кошик і чекаут.

Результати

  • 700+ UX/UI-екранів для desktop та mobile, що охоплюють усі цифрові продукти футбольного клубу;
  • Об'єднано сервіси від корпоративного сайту й матч-центру до фаншопу в одну систему із єдиною навігацією, логікою взаємодії та користувацьким досвідом.
  • Світла та темна теми інтерфейсу, адаптовані під різні сценарії використання й бренд клубу.
  • Детальний UI Kit (дизайн-система), що дозволяють швидко розвивати продукт, без втрати стилістики;
  • Повний ребрендинг клубу під час розробки. Після зміни назви з «Металіста 1925» на «ФК Харків»: оновили бренд-елементи та контент, зберігши всю архітектуру, компоненти й користувацькі сценарії;
  • Спільна реалізація з командою Linecore, яка забезпечила подальшу розробку й інтеграцію всієї цифрової платформи.

Напишіть нам, і почнемо співпрацю!

Ваше повідомлення було відправлене! Ми зв'яжемося з вами якомога швидше

Відправити ще одну заявку
Doublecheck your form data please