Український ветеранський фонд: перебудова та оптимізація архітектури сайту

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

Цей кейс — моя власна ініціатива. Його мета — запропонувати UI/UX-рішення, які перетворять сайт Фонду на інклюзивний, безпечний та інтуїтивно зрозумілий простір для наших захисників і захисниць.

Зміст

01 // Аудит поточного сайту

02 // Дослідження потреб ветеранської спільноти та оптимізація структури сайту

03 // Валідація рішень 

04 // Посилання на поточну версію та оптимізований концепт сайту для порівняння

05 // Замість підсумків

01 // Аудит сайту

Безпека даних та стійкість до кібератак 

Проблема:

Лише за перше півріччя 2026 року команда CERT-UA опрацювала 3309 кібератак. Державні ресурси — головна ціль ворога. Жодне оновлення інформаційної архітектури та дизайну не має сенсу без дотримання суворих протоколів захисту даних, шифрування трафіку, стійкості до DDoS-атак та повної відповідності вимогам КСЗІ.

Рішення:

Порушення семантичної структури та SEO

Під час аудиту виявлено порушення в ієрархії заголовків, зокрема пропуск тегу H4. Також на сторінці зафіксовано відсутність альтернативного тексту (alt-text) для зображень. Якщо атрибут title для графічних елементів ніяк не впливає на доступність чи пошукову оптимізацію платформи, то без альтернативного тексту сайт втрачає видимість у пошукових системах. Що ще важливіше — це робить ресурс частково недоступним для ветеранської спільноти та їхніх рідних, які мають порушення зору і користуються скрінрідерами.

Рішення

• Відновити семантичну ієрархію: Перепроєктувати структуру сторінок так, щоб теги заголовків (H1–H6) йшли послідовно. Це дозволить пошуковим роботам правильно інтерпретувати контент.
• Впровадити обов'язковий alt-text: Додати опис до всіх ключових зображень для забезпечення цифрової доступності (Accessibility) сайту.
• Оптимізувати роботу з контентом (CMS): Налаштувати адмін-панель сайту так, щоб поле alt-text було обов'язковим для заповнення при завантаженні нових медіафайлів.

Навігація та аналітика поведінки 

Проблема

Дані SimilarWeb вказують на проблеми з навігацією. Показник відмов (Bounce Rate) сягає майже 48,68% — половина користувачів закриває сторінку сайту, не зробивши жодного кліку. Середня тривалість візиту решти відвідувачів (Avg Visit Duration) становить понад дві хвилини, за цей час вони встигають переглянути в середньому 2.22 сторінки (Pages per Visit). 

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

Рішення

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

Швидкість завантаження сторінки

Проблема

Тест PageSpeed Insights показує, що мобільна та комп'ютерна версії сайту мають проблеми зі швидкістю завантаження (48 та 66 балів). В умовах слабкого чи нестабільного зв’язку (наприклад, у госпіталях, на полігонах чи в дорозі) це може критично ускладнити доступ до допомоги.

Рішення

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

02 // Дослідження потреб ветеранської спільноти та оптимізація структури сайту

Натомість збір даних базувався на аналізі досліджень, статей, а також на експертній консультації з практикуючою психологинею проєкту «Ветеранське коло», тренеркою ГО «ЦЗВЛ».

Що потрібно ветеранам?

1. Потреба в безпеці

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

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

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

Рішення:

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

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

Також, спираючись на дослідження архітектора та дослідника середовищ відновлення Романа Заставного, було оновлено фірмові кольори. Оскільки точкові зміни лише на сайті не дадуть потрібного результату, палітру варто переробити на рівні всього бренду Фонду. Це дозволить створити цілісне терапевтичне середовище, де спокій та комфорт транслюватимуться всюди: від інтерфейсу платформи до будь-якого візуального елемента.

2. Запит на оперативну допомогу

Офіційне опитування Українського ветеранського фонду чітко вказує на головні запити ветеранської спільноти. Ключовою потребою є матеріальна допомога (59,8%) та медична підтримка (12,8%). Наступними за пріоритетністю йдуть юридичні, психологічні, інформаційні та освітні програми. 

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

Рішення

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

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

Також було оптимізовано шлях користувача для різних сценаріїв взаємодії:

3. Передбачуваність і контроль

Для людей із досвідом бойових дій, у стані стресу, з ПТСР чи наслідками акубаротравм критично важливо повністю контролювати простір навколо себе. Будь-який несподіваний чи хаотичний рух на екрані викликає тривогу, змушуючи мозок витрачати сили на сканування потенційних загроз. Тому інтерфейс, навігація та тексти мають бути передбачуваними та зрозумілими, даючи людині відчуття стабільності.  

Рішення:  

• Статична архітектура: Повна відмова від автоматичної анімації слайдерів та банерних форматів на користь статичної сітки нативних контентних карток відповідно до стандарту доступності WCAG 2.2.
• Зміна Tone of Voice: Складні юридичні описи програм викладено простою та зрозумілою мовою, що забезпечує швидке орієнтування для користувачів без додаткового інформаційного навантаження.
• Єдина дизайн-система: Ключові послуги Фонду сформовані у єдину дизайн-систему, аби зберегти передбачуваність та стабільність для користувачів.

4. Потреба у видимості та причетності

Повернення до цивільного життя — тривалий процес. За даними Veteran Hub, адаптація ветеранів триває від 1,5 до 3 років. Різка відмова від військової ідентичності є травматичною і неприйнятною. Саме тому в поточному розділі «Історії успіху» світлини фокусуються переважно на військовому минулому захисників та захисниць, демонструючи їх на позиції чи зі зброєю. 

Психологиня проєкту «Ветеранське коло» підтверджує: ветеранам критично важливо відчувати визнання свого бойового досвіду. Водночас вони прагнуть бути прикладом для побратимів і посестер в цивільному житті.

Проте саме тут виникає неочевидний парадокс: цивільні користувачі через відсутність бойового досвіду мають зовсім інший тип сприйняття — емоційний. Коли на екрані з'являється велике портретне фото людини у формі ЗСУ, мозок цивільного миттєво перемикається в режим глибокої емпатії та рефлексії.

Виникає ефект когнітивного витіснення: увага повністю концентрується на емоціях й долі особистості. Як наслідок, в пам'яті не формується потрібний асоціативний зв'язок — «ветеран / ветеранка — надійний надавач послуги» та «досягнення підприємця завдяки підтримці Фонду».

Рішення:  

Щоб розв'язати цей когнітивний розрив — закрити потреби ветеранської спільноти та подолати бар'єр емоційного сприйняття цивільними, за основу шаблону головного фото для картки «Історії успіху» взято світлини, де органічно поєднуються мілітарний образ та контекст їхньої власної справи.

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

Мозок цивільного бачить раціональну картину: «О, це ветеран, і він робить файний сік чи кує метал. Я можу купити це прямо зараз і підтримати цю справу!». Формується зв'язок: «ветеран / ветеранка — сильний, надійний підприємець». 

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

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

03 // Валідація рішень

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

Показники від SEO Meta демонструють повністю оптимізовану семантичну структуру, де додано альтернативний текст (alt-text) для зображень. Атрибут title не використано, адже, як було згадано вище, в сучасній веброзробці він не є обов'язковим для графічних елементів і ніяк не впливає на доступність чи пошукову оптимізацію платформи. Cайт адаптований для скрінрідерів, якими користуються ветерани, ветеранки та їхні рідні з порушеннями зору.

Результати тесту PageSpeed Insights підтвердили ефективність редизайну: мобільна та десктопна продуктивність (Performance) зросла з 48 та 66 балів до 84 та 98 відповідно. Показник доступності (Accessibility) підвищився до 95 балів, а відповідність стандартам розробки (Best Practices) та пошукова оптимізація (SEO) досягли максимальних 100 зі 100 можливих.

05 // Посилання на поточну версію та оптимізований концепт для порівняння 

Поточний сайт ↗

архів сайту, якщо старий дизайн оновлено

Оптимізований концепт ↗

06 // Замість підсумків

Я проєктував цей інтерфейс із думкою про комфорт наших захисників і захисниць, тому офіційно надаю повний дозвіл команді Українського ветеранського фонду на безкоштовне використання та копіювання всіх UI/UX-напрацювань цього кейсу. Водночас жоден цифровий продукт не має сенсу без реального досвіду користувачів.

Якщо ви є ветераном, ветеранкою або членом їхніх родин — поділіться, будь ласка, своєю думкою про оновлений концепт сайту тут у коментарях. Чи комфортно вашим очам? Чи легко знайти необхідну інформацію? Чи залишились елементи, які для вас зайві або незручні? Для мене надзвичайно важливо почути ваш голос.

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

У//