Ищете крутые кейсы в digital? Посмотрите на номинантов Workspace Digital Awards 2026!
М-Сошал
Интерактивный благотворительный лендинг «Подари иголки елке»
М-Сошал
#Разработка сайтов под ключ

Интерактивный благотворительный лендинг «Подари иголки елке»

24 
М-Сошал Россия, Брянск
Поделиться: 0 0 0
Интерактивный благотворительный лендинг «Подари иголки елке»
Клиент

Fistashki

Сфера

Маркетинг, дизайн, реклама

Тип сайта

Лендинг пейдж

Сдано

Декабрь 2024

Задача

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

Решение

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

1Разработка идеи

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

2Проработка пользовательского пути

Построили сценарий: форма → переход на сайт фонда → оплата → возврат на лендинг → появление фрагмента елки.

3Проектирование лендинга

Спроектировали страницу с блоком формы, анимацией елки, объяснением механики и примером визуализации.

4Реализация формы пожертвования

Сверстали форму с выбором суммы, полем для комментария и кнопкой перехода к оплате на сайте фонда.

5Интеграция с сайтом фонда

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

6Настройка проверки транзакций

Реализовали callback для получения подтверждения об успешной оплате от фонда.

7Разработка механики визуализации

Создали логику: как только перевод средств подтверждался, система фиксировала факт пожертвования и закрашивала фрагмент изображения елки.

8Адаптивная верстка

Адаптировали лендинг и визуализацию для мобильных, планшетов и десктопов, проверили корректность отображения елки на разных экранах.

9Тестирование

Протестировали полный цикл: заполнение формы, переход, оплату, возврат, появление фрагмента — а также обработку ошибок и повторные пожертвования.

10Запуск

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

Результат

Проект помог собрать пожертвования и зажег более 650 фрагментов изображения, превратив благотворительную механику в вовлекающий и эмоционально понятный digital-опыт.

Комментарий агентства

Анастасия Чубрукова
Анастасия Чубрукова

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


Стек технологий

  • HTML HTML Язык программирования
  • JavaScript JavaScript Язык программирования
  • PHP PHP Язык программирования
  • Next.js Next.js Фреймворк/библиотека
  • React.js React.js Фреймворк/библиотека
  • PostgreSQL PostgreSQL База данных
  • Docker Docker Среда разработки
  • Xcode Xcode Среда разработки
  • Figma Figma Графический редактор
  • NGINX NGINX Веб-сервер

Над проектом работали:


Оцените кейс
Спасибо за оценку
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

М-Сошал с удовольствием обсудит вашу задачу

Оставить заявку