Як ми створили для УАФ сайт, що говорить мовою футболу

Українська асоціація футболу — це не просто наш партнер. Це бренд, що уособлює голос нації та впливає на емоції мільйонів.

Старий сайт фан-шопу УАФ не передавав цієї сили: він губив ритм і характер футболу. Тому ми створили новий дизайн, що став продовженням ідеї, духу та енергії. Динамічний, яскравий, єднальний — такий, як сама гра.

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

Хто наш партнер

Українська асоціація футболу (УАФ) — головна організація, що координує розвиток футболу в Україні: від національних збірних і клубів до масових проєктів.

Основні виклики

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

Ми мали:

Стратегія роботи

Ще до старту ми визначили ключовий підхід:

дизайн має говорити мовою бренду, а не бути просто обгорткою.

Для цього ми одразу заклали кілька принципів:

• робота UX і UI в тандемі;
• синхронна адаптація під мобільні пристрої;
• мінімалістична візуальна мова з контрастною типографікою та емоційними візуалами;
• залучення нашої SEO-команди для формування структури й контенту, які одночасно працюють на пошукову видимість і користувацькі сценарії.

Цей підхід визначив увесь подальший процес і став основою для рішень на кожному етапі редизайну:

Головна як вітрина бренду

Головна сторінка стала візуальним ядром сайту. Основна ідея — великі блоки з яскравими кольорами в стилістиці брендбуку, які через контраст і поєднання відтінків створюють живу, спортивну атмосферу.

Зліва — концептуальні вайрфрейми, справа — фінальне UI-оформлення

Живі картки товарів

Каталог товарів був одним із найпроблемніших блоків у старій версії сайту: сірі, невиразні картки без інтерактиву й підказок, що ускладнювали орієнтацію.

Ми змінили це кардинально. Картки стали «живими»:

• користувач може вибрати колір чи розмір товару прямо з каталогу;
• видно кількість відгуків і ключові дії;
• велика кнопка з кошиком чітко веде до покупки;
• на картці одразу є статус товару (новинка, акція, рекомендоване).

Автоматизований пошук і фільтри

1. При натисканні на поле з’являються теги популярних товарів і блок із картками-новинками.
2. Під час введення користувач бачить автопідказки (товари, категорії, сторінки).
3. Якщо точного результату немає, система показує максимально схожі товари.

Також ми додали сортування по тегам (дешеві, дорогі, популярні, зі знижкою) і фільтрування по типу одягу, кольору, розміру, ціні.

Оформлення замовлення

1. Вхід через Google або як гість.
2. Процес розділено на три прості кроки: доставка → контактні дані → оплата.
3. Така структура спрощує взаємодію з сайтом та зменшує когнітивне навантаження на користувача, що робить оформлення замовлення швидким і зручним.

Кошик

Є оформлення замовлення по окремих товарах, зміна кольору та розміру, а також застосування промокоду.

Візуальні меседжі УАФ

Банери ми перетворили на повноцінні візуальні меседжі. Вони задають тон усьому сайту:

«УАФ — це стиль і характер».

Ми зберегли стилістику брендбуку, але створили авторське втілення. Використали бруталістичні шрифти, контрастні кольори, великі CTA-кнопки та чіткий ритм із візуальними паузами.

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

Читайте, як ми оновлювали дизайн Zavezu: простіша форма — більше заявок.

Мобільна версія сайту

Адаптацію під мобільні ми робили паралельно з десктопом — це дало змогу зберегти цілісність стилю і логіки. Ми не просто «стиснули» екрани, а переосмислили структуру, акценти й відступи для малого формату.

Зміни відчутні одразу:

• типографіка залишилася великою і виразною, але стала компактнішою;
• фільтри винесені в зручну кнопку;
• меню спрощене;
• всі CTA — у зоні великого пальця.

Фінальний результат — динамічний і функціональний мобайл, який дає ті ж враження, що й десктоп, але в компактнішому, швидшому форматі.

Що далі

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

Наразі сайт перебуває на етапі технічного впровадження, а дизайн-рішення планується масштабувати на інші напрями.

Для нас цей кейс ще раз довів:

дизайн — не декор, а мова бренду.

Айдентика має бути відчутною в кожному пікселі, а командна злагодженість — ключем до швидких і точних рішень.

Наступний крок після запуску сайту — підключення Retention Marketing, щоби посилити ефект від редизайну.

Кейс створений у співавторстві з Валерією Івановою, UX Specialist в Netpeak Ukraine.