ANDRII SADOVYI

UX · UI · PRODUCT-дизайнер

НАЗАД

DREVLIANY

Lead Product & UI/UX Designer (End-to-End)

2024

Ukraine (Charitable Foundation)

КОМПЛЕКСНИЙ ДИЗАЙН ЛЕНДІНГУ ДЛЯ УКРАЇНСЬКОГО БЛАГОДІЙНОГО ФОНДУ «ДРЕВЛЯНИ», ЗОСЕРЕДЖЕНОГО НА ГУМАНІТАРНІЙ ДОПОМОЗІ, КООРДИНАЦІЇ ВОЛОНТЕРІВ ТА ЗБОРІ ПОЖЕРТВ. СПРОЄКТОВАНО ТЕПЛИЙ, ДОВІРЛИВИЙ ВІЗУАЛЬНИЙ ДОСВІД З КІЛЬКОМА КАНАЛАМИ ПОЖЕРТВ, ПРОЗОРОЮ ПРЕЗЕНТАЦІЄЮ КОМАНДИ, ПОКАЗОМ ПАРТНЕРІВ ТА ЧІТКИМИ ШЛЯХАМИ ДЛЯ ТИХ, ХТО ПОТРЕБУЄ ДОПОМОГИ.

ВИКЛИК

ПРОБЛЕМА

Благодійні фонди в Україні стикаються з унікальною кризою довіри під час війни:

  • Донори скептично ставляться до того, куди насправді йдуть їхні гроші
  • Люди, які потребують допомоги, не знають, як її запросити
  • Волонтери мають труднощі з пошуком легітимних організацій для приєднання
  • Міжнародні партнери потребують доказів достовірності перед співпрацею
  • Емоційна втома змушує людей прогортати повз загальні повідомлення «допоможіть нам»

РІШЕННЯ

Позиціювати Древлани не як чергову сторінку пожертв, а як прозору, орієнтовану на людину платформу — де кожна гривня відстежувана, кожен член команди видимий, кожен партнер названий, і кожна дія (дати, отримати, стати волонтером) має чіткий шлях.

HERO-СЕКЦІЯ — ЕМОЦІЙНИЙ ЯКІР ТА МИТТЄВА ДІЯ

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував спокійний, сповнений надії hero з:

  • Велике кругле фото зелених українських полів — символізує життя, землю та майбутнє
  • Смілива типографіка «ДРЕВЛЯНИ» з гербом фонду
  • Чітке формулювання місії про захист незалежності України
  • Миттєвий емоційний зв'язок: «Це ваш особистий вклад в оборону та захист незалежності України»

БЛОК ПОЖЕРТВ — «ПОЖЕРТВУВАТИ» З 3 КАНАЛАМИ

ПРОБЛЕМА

Різні донори мають різні вподобання — одні довіряють картковим платежам, інші віддають перевагу крипто, міжнародним донорам потрібен SWIFT. Нав'язування одного методу втрачає конверсію.

РІШЕННЯ

Я спроєктував помітний блок пожертв з 3 опціями:

  • Карткою (Card) — зелений, основний, для локальних донорів
  • SWIFT — синій, для міжнародних прихильників
  • Крипта (Crypto) — жовтий, для технічно підкованих донорів
  • Кожна опція має власну іконку та чітке візуальне розрізнення

МІСІЯ ТА ТРИ ШЛЯХИ — «ДОПОМОГТИ / ОТРИМАТИ / СТАТИ ВОЛОНТЕРОМ»

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував блок дій з 3 карток з різними візуальними ідентичностями:

  • Допомогти (Help) — червона іконка серця, для донорів
  • Отримати допомогу (Receive help) — іконка відкритої руки, для тих, хто потребує
  • Стати волонтером (Become a volunteer) — іконка рукостискання, для волонтерів
  • Кожна картка має чіткий CTA та короткий опис

ІСТОРІЯ ФОНДУ — ВІДЕО ТА ФОТОГАЛЕРЕЯ

ПРОБЛЕМА

Текстові секції «про нас» виглядають корпоративно та невикликають довіри. Люди повинні бачити роботу фонду, щоб повірити.

РІШЕННЯ

Я спроєктував мультимедійну секцію сторітелінгу:

  • Відеоблок з вбудовуваннями YouTube, що показують реальну діяльність фонду
  • Фотоколаж в органічному, заокругленому лейауті з волонтерами, розподілом допомоги та реальними моментами
  • Два чіткі CTA: «ВІДЕО ПРО НАС» та «ФОТО ПРО НАС» з кнопками «УСІ ВІДЕО» / «УСІ ФОТО»
  • Автентичні, недопрацьовані зображення, що будують довіру через реалізм

СЕКЦІЯ КОМАНДИ — «КОМАНДА ФОНДУ»

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував прозору вітрину команди з 7 реальними членами:

  • Круглі портретні фото з іменами та ролями
  • Чітка ієрархія: Директор, Головний бухгалтер, Юридичний радник, Члени правління
  • Гуманізуюча деталь: реальні обличчя, реальні імена, реальні позиції
  • Миттєва довіра через прозорість

ПАРТНЕРИ ТА СПІВРОБІТНИЦТВО — ДОВІРА ЧЕРЕЗ АСОЦІАЦІЮ

ПРОБЛЕМА

Нові відвідувачі не знають, чи є фонд легітимним. Логотипи партнерів служать соціальним доказом.

РІШЕННЯ

Я спроєктував дві різні секції партнерів:

  • Партнери — Великі організації: BBC News, European Union, EEAS, УАО, Chernobyl Union, Blago Foundation
  • Співробітництво — Активні колаборації: Kyiv Psychotherapy Center, Fundatia de Binefacere, Baryshivka Council, San Marino Shipping, Kyiv Hemophilia Group
  • Чистий картоковий лейаут з логотипами та підписами «Memorandum» де застосовно

ЗАПИТИ НА ДОПОМОГУ — «ПОТРІБНА ДОПОМОГА»

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував систему запитів на допомогу з 3 категорій:

  • Для розміщення прохання про допомогу хворій дитині — для хворих дітей
  • Прохання про допомогу дорослому хворому — для хворих дорослих
  • Гуманітарна допомога — загальна гуманітарна допомога
  • Кожна картка має фото (дитина, літня людина), опис та CTA «НАДАТИ ДОПОМОГУ»

НОВИНИ — «НОВИНИ БЛАГОДІЙНИХ ПРОЄКТІВ»

ПРОБЛЕМА

Донори хочуть бачити поточну активність, а не просто статичну сторінку «дайте нам гроші».

РІШЕННЯ

Я спроєктував секцію новин з картками проєктів:

  • Допомога дітям України — допомога українським дітям
  • Проєктування та будівництво мережі медичних центрів — будівництво медичних центрів
  • Кожна картка має опис, CTA «ЧИТАТИ ДАЛІ» та кнопку поширення
  • Показує, що фонд активний та зростає

СЕРТИФІКАТИ ТА НАГОРОДИ — «ПОЧЕСНІ ГРАМОТИ ТА ПОДЯКИ»

ПРОБЛЕМА

Довіра потребує доказів. Сертифікати та нагороди підтверджують легітимність фонду.

РІШЕННЯ

Я спроєктував вітрину сертифікатів на основі таймлайну:

  • Навігація таймлайном зліва: Житомир травень 2022, День ЗСУ 2022, Адресна допомога, Южноукраїнська перевезення, Допомога їжань, Християнська лікарня
  • Сітка документів справа з реальними сертифікатами та подячними листами
  • Інтерактивний таймлайн дозволяє користувачам досліджувати різні періоди роботи фонду

КОНТАКТНА ФОРМА — «КОНТАКТИ»

ПРОБЛЕМА

Відвідувачам потрібно кілька способів зв'язатися з фондом — форма, email, телефон, фізична адреса.

РІШЕННЯ

Я спроєктував комплексну контактну секцію:

  • Ліва сторона: Контактна форма з полями Ім'я, Email, Повідомлення + кнопка «ВІДПРАВИТИ»
  • Права сторона: Повні контактні дані:
  • Юридична адреса: 04070, м. Київ, вул. Боричів узвіз, 5
  • Фактична адреса: 01021, м. Київ, вул. Інститутська, 16, оф.2
  • Телефони: +38 044 253 88 55, +38 044 253 88 55
  • Пошта: drevlyani@ukr.net
  • Герб та повний логотип фонду внизу

ФУТЕР — НАВІГАЦІЯ ТА СОЦІАЛЬНИЙ ДОКАЗ

ПРОБЛЕМА

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

РІШЕННЯ

Я спроєктував комплексний футер з:

  • Логотип фонду та повна назва «Благодійний Фонд Древляни»
  • Іконки соцмереж (Telegram, Instagram, Facebook, YouTube, TikTok тощо)
  • Повна навігація: Фонд, Структура, Фото, Команда, Партнери, Допомога, Подяки, Контакти
  • Copyright © 2024 Древляни та посилання «Статут»
НАСТУПНИЙ ПРОЄКТ