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

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)

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

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

1. мы сначала делаем форму с опросом (поля ниже напишу)
2. Затем отправляем на форму оплаты платежной системы (это будет уже backend, тут дизайн не нужен, они стандратные и на стороне платежки будут настраиватся)
3. Давайте добавим в футер пункт
• “Скасувати місячну підписку”
• и там дадим форму опроса, как на сайте референса “https://uanimals.org/cancel-the-monthly-benefit/”

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

• Вибір суми:
• Фіксовані варіанти
• Кастомна сума
• Регулярність:
• Одноразово
• Щомісячно
• ❗️Додати підпис зі стрілкою, як в прикладі - “Регулярна допомога рятує більше життів!”
• Призначення: (должен быть выпадающий список активных сборов)
• Конкретний збір (из нашего списка активных сборов) - тут выбирается автоматом, если донатит на странице сбора. Если же переход с хэдера, то по дефолту ставим “Підтримати фонд”
• Підтримати фонд (добавить для тех, кто просто хочет задонатить)
• Перемикач "Anonymous/Public Donation"
• Для тех кто публично, то такие поля
• Ім’я
• Email
• Повідомлення (коментар)
• Чекбокс “🫶 Додати 2%, комісія банку”

Выше мы рассмотрели теорию, а сейчас перейдем к практике.

Выделяют следующие виды воронок:

Воронка продаж не может быть универсальной для всех форм бизнеса. Она меняется в зависимости от специфики продукта, схемы продаж, каналов распространения, размера бизнеса. Кроме того, она обязательно корректируется в процессе работы. Невозможно сразу создать идеальную схему: все нужно проверять. Но мы рассмотрим наиболее общий вариант.

Описанные выше 5 этапов «Лестницы Ханта» трансформируются в 4. Дело в том, что маркетологи с помощью таргетированной рекламы не могут воздействовать на человека без конкретной проблемы.

По типам выделяют следующие 4 этапа воронки:

1. Top of the funnel – верхняя часть воронки.

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

Совет: если вы что-то продаете, то на данном этапе, старайтесь просто познакомить аудиторию с вашим продуктом и избегайте какой-либо конверсионной истории.

2. Middle of the funnel – средняя часть воронки.

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

Когда уже привлекли и подогрели n-количество клиентов, на этом этапе воронки, и правильно квалифицировали, тогда дальше подводим их к сделке, а именно, к следующему этапу воронки.

3. Bottom of the funnel – Завершающий этап воронки.

Финальная стадия, при которой пользователь уже практически определился с продуктом и для принятия окончательного решения – предлагаем что-нибудь в подарок или дополнительную скидку. Тем самым, у пользователя не останется сомнений для оформления сделки.

Например, это может быть: пробная версия чего-либо, какая-то тестовая история и другие похожие лид-магниты. Также, можно привлечь за счет скидки, ограниченной по времени.

Для данного этапа, лучше всего подойдет динамическая реклама каталога товаров в Facebook или же динамический ретаргетинг.

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

Пример: Людочке необходим новый телефон, но она не знает какой лучше выбрать. Посмотрев различные модели телефонов в интернет-магазине “H”, она решила, что сначала посоветуется с мужем, а потом только будет оформлять заказ, поэтому, все просматриваемые страницы были закрыты. Но, зайдя спустя 20 минут в Instagram, полистать ленту, она вдруг видит рекламу только что просматриваемого телефона на сайте “H” и решает еще раз изучить его параметры.

4. Защита бренда или лояльная аудитория

На данном этапе мы стараемся добиться максимального удержания конечного пользователя. Чтобы сделать его фанатом нашего продукта и впоследствии продавать ему новинки. Превратить его в адвоката бренда, т.е. он должен рассказывать каждому другу, и делиться эмоциями о приобретении.