Технічне завдання: Сайт благодійної організації InHarmony

Перелік того, що хотілось би отримати на сайті https://inharmony.com.ua/

Інформація повина бути в гугл фалі - https://docs.google.com/spreadsheets/d/1_Cl124-AEEkdZSbCvvj1KkjAdB8NSP3d/edit?usp=sharing&ouid=105403187829970204387&rtpof=true&sd=true

Референс: https://uanimals.org/

Мінімалістичний дизайн, якісне подання інформації, ефективні блоки зборів.

1. Мета проєкту

Створення платформи для збору пожертв
Інформування про діяльність організації
Публікація звітності
Збільшення органічного трафіку через SEO

2. Технічні вимоги та дизайн

2.1. Локалізація

Українська (за замовчуванням)
Англійська
Автоматичне визначення мови браузера
Можливість перемикання мов на будь-якій сторінці

2.2. Адаптивність та кросбраузерність

Мобільні: 320-414px
Планшети: 768-1024px
Десктоп: від 1024px
Підтримка браузерів:

Chrome (останні 2 версії)
Firefox (останні 2 версії)
Safari (останні 2 версії)
Edge (останні 2 версії)

2.3. Дизайн концепція

Мінімалістичний, сучасний дизайн
Емоційний візуальний контент
Інтуїтивна навігація
Анімації:

Плавні переходи між сторінками
Анімації при скролі
Інтерактивні прогрес-бари
Паралакс-ефекти
Мікроанімації для інтерактивних елементів

3. Структура сайту

3.1. Хедер (фіксований)

Логотип (посилання на головну)
Навігаційне меню:

Головна
Поточні збори
Звітність
Блог
Про нас

Перемикач мов (UA/EN)
Кнопка "Допомогти" (червона, акцентна)
Соцмережі (іконки):

Instagram
Telegram
TikTok
Facebook

3.2. Головна сторінка

Hero секція

Повноекранне відео на фоні
Заголовок місії
Кнопка "Допомогти зараз"
Статистика:

Загальна сума зборів
Кількість реалізованих проєктів
Кількість врятованих життів

Актуальні збори

Сітка з 3-4 актуальних зборів
Для кожного збору:

Фото
Заголовок
Короткий опис
Живий лічильник суми
Прогрес-бар
Зібрано/Ціль
Кнопка "Підтримати"
Індикатор терміновості
Кількість донорів

Кнопка "Всі збори"

Блок соціальних доказів

Стрічка останніх донатів:

Ім'я донора/Anonymous
Сума
Час донату

Лічильник донатів за 24 години
Кількість шерів у соцмережах
Відгуки отримувачів допомоги
Загальна кількість донорів

Про організацію

Заголовок
Короткий опис діяльності
Ключові напрямки роботи
Фото команди
Кнопка "Дізнатися більше"

Останні досягнення

Слайдер з реалізованими проєктами
Для кожного проєкту:

Фото "до/після"
Опис результату
Сума збору
Термін реалізації

Форма донату

Фіксовані суми
Поле для введення кастомної суми
Опція регулярного донату
Перемикач "Anonymous/Public"
Чекбокс "+3% комісії"
Кнопки платіжних систем

Останні публікації

3 останні статті
Для кожної:

Зображення
Заголовок
Короткий опис
Дата
Кнопка "Читати"

3.3. Сторінка зборів

Фільтри

Категорії:

Медична допомога
Допомога тваринам
Гуманітарні проекти
Інше

Сортування:

За терміновістю
За сумою
За прогресом

Картка збору

Фото/відео
Заголовок
Опис
Живий лічильник зібраної суми
Прогрес-бар
Індикатор терміновості:

Відлік часу
Візуалізація терміновості

Соціальні докази:

Кількість донорів
Останні донати
Відгуки отримувачів

Кнопки шерингу з лічильниками
Форма донату

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

Sticky-плашка внизу екрану:

Кнопка "DONATE"
Поточна сума збору
Відсоток виконання

3.4. Сторінка звітності

Фінансові звіти

Щомісячні звіти
Фільтр по даті
Можливість завантаження PDF
Візуалізація даних

Реалізовані проекти

Фотогалерея
Текстовий опис
Фінальна сума
Термін реалізації
Результати
Відгуки бенефіціарів

3.5. Блог

SEO-оптимізовані статті
Категорії
Теги
Пошук
Кнопки шерингу
Форма донату в кінці статті

3.6. Про команду

Історія організації
Місія та цінності
Команда:

Фото
Ім'я
Посада
Опис

Партнери (логотипи)

3.7. Історії успіху

Категорії історій
Фото/відео галерея
Текстові історії
Відгуки бенефіціарів
Статистика допомоги
Форма донату
Кнопки шерингу

3.8. Футер

Контактна інформація:

Адреса
Email
Телефон

Соціальні мережі
Навігаційне меню
Privacy Policy
Реквізити
Форма зворотного зв'язку:

Ім'я
Email
Повідомлення

4. Платіжні системи та донати

4.1. Способи оплати

Кредитна картка (WayForPay):

Одноразовий платіж
Щомісячна підписка

Банківський переказ:

Реквізити
QR-код

PayPal:

Одноразовий
Регулярний

Криптовалюти:

Bitcoin
Ethereum
USDT

4.2. Форма донату

Основні поля

Вибір суми:

Фіксовані варіанти
Кастомна сума

Регулярність:

Одноразово
Щомісячно

Призначення:

Конкретний збір
Загальний фонд

Коментар

Додаткові опції

Перемикач "Anonymous/Public Donation"
"Donate in memory/honor of someone":

Ім'я особи
Повідомлення
Опція відправки сповіщення

Чекбокс "Add 3% to cover transaction fees"

UX-елементи

Підказки при заповненні
Предпросмотр перед відправкою
Індикатор безпеки платежів
Автозбереження форми
Валідація полів в реальному часі
Індикатор прогресу заповнення

4.3. Точки донату

Головне меню (кнопка)
Картки зборів
Фіксована кнопка на мобільних
Кінець статей блогу
Футер
Exit-intent поп-ап

4.4. Соціальні докази

Кількість успішних донатів
Середня сума донату
Відгуки донорів
Сертифікати безпеки
Логотипи платіжних систем
Останні донати

5. Аналітика та відстеження

5.1. Google Analytics

Налаштування цілей:

Перегляди зборів
Кліки на донат
Успішні платежі

Відстеження конверсій
Шляхи користувачів
Час на сайті
Відмови

5.2. Hotjar

Теплові карти
Записи сесій
Воронки конверсій
Форми зворотного зв'язку
Опитування

5.3. Лічильники та метрики

Живі лічильники зборів:

WebSocket оновлення
Кешування
Fallback

Соціальна активність:

Шеринг
Донори
24-годинна активність

6. Адмін-панель

6.1. Структура і ролі

Адміністратор:

Повний доступ
Управління користувачами
Налаштування сайту

Редактор:

Управління контентом
Модерація
Перегляд статистики

6.2. Модулі адмін-панелі

Дашборд

Загальна статистика
Графіки зборів
Активні збори
Останні донати
Відвідуваність

Управління зборами

Створення/редагування
Категорії
Статуси
Прогрес
Донати

Контент-менеджмент

Статті
Історії успіху
Сторінки
Медіа
SEO

Фінансовий модуль

(за нами)

Транзакції
Звіти
Статистика
Експорт

Email-маркетинг

SendPulse інтеграція
Шаблони
Розсилки
Статистика

Аналітика

Google Analytics
Hotjar
Поведінка
Конверсії
Звіти

6.3. Додаткові модулі

Управління лічильниками

Налаштування
Конфігурація
Моніторинг

Соціальні докази

Модерація відгуків
Налаштування донатів
Testimonials
Лічильники

Аналітика поведінки

Теплові карти
Відмови
A/B тести
Воронки

6.4. Безпека

2FA
Журнал дій
IP-обмеження
Бекапи

7. SEO-оптимізація

(на нас, вам можливо підключити, за бажанням)

7.1. Технічна оптимізація

URL структура
Meta теги
Schema.org
XML карта
Швидкість
Mobile-first

7.2. Контент

Семантичне ядро
Контент-план
Внутрішня перелінковка
Оптимізація медіа

8. Email-маркетинг

(на нас, вам можливо підключити, за бажанням)

8.1. Типи розсилок

Вітальні
Новини
Звіти
Історії успіху
Донорські апдейти

8.2. Автоматизація

Тригери
A/B тести
Сегментація
Персоналізація

9. Технічні особливості

9.1. Живі лічильники

WebSocket
Polling fallback
Mobile оптимізація
Кешування

9.2. Mobile оптимізації

Sticky-елементи
Touch-friendly
Швидкість
Трафік

9.3. UX/UI

Мікроанімації
Skeleton loading
Валідація
Підказки

9.4. Безпека (сервер, на нас)

DDoS захист
Бекапи
Моніторинг
Логування

Комментарий к дизайну, первой версии (от 08.01.25)

В целом вопрос по форме доната, ее нужно изменить.

Нам нужно добавить промежуточный шаг, сначала мы все спрашиваем, а затем уже перенаправляем на оплату где будут предложены методы оплаты картой.
И нужно будет добавить ссылку на отписку ежемесячной платежки

Итого по задачам:

мы сначала делаем форму с опросом (поля ниже напишу)
Затем отправляем на форму оплаты платежной системы (это будет уже backend, тут дизайн не нужен, они стандратные и на стороне платежки будут настраиватся)
Давайте добавим в футер пункт

“Скасувати місячну підписку”

и там дадим форму опроса, как на сайте референса “https://uanimals.org/cancel-the-monthly-benefit/”

Вот пример работы платежи - https://frnt-test.inharmony.com.ua/

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

ФОРМА Оплаты С ОПРОСОМ, описание полей:

Вибір суми:

Фіксовані варіанти
Кастомна сума

Регулярність:

Одноразово
Щомісячно
❗️Додати підпис зі стрілкою, як в прикладі - “Регулярна допомога рятує більше життів!”

Призначення: (должен быть выпадающий список активных сборов)

Конкретний збір (из нашего списка активных сборов) - тут выбирается автоматом, если донатит на странице сбора. Если же переход с хэдера, то по дефолту ставим “Підтримати фонд”
Підтримати фонд (добавить для тех, кто просто хочет задонатить)

Перемикач "Anonymous/Public Donation"
Для тех кто публично, то такие поля

Ім’я
Email
Повідомлення (коментар)

Чекбокс “🫶 Додати 2%, комісія банку”