За кулисами добра: как сделать сайт для благотворительного фонда без лишней драмы

На благотворительные сборы у многих уже иммунитет: слишком много развелось мошенников. Рассказываем, как студии не попасть на негодяев и сделать хороший сайт для действительно хороших людей. Например, как в фонде «‎Гармония Жизни».

С чего мы стартовали: маленькая презентация и большие планы

Сайт для благотворительной организации мы в NAJES делали впервые. Наш клиент — Николай Винидиктов, занимается недвижимостью. В 2021 году мы разработали для него персональный сайт, который поддерживаем по сегодняшний день.

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

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

<p>До появления сайта Николай рассказывал о фонде с помощью такой небольшой презентации на 19 слайдов</p>

До появления сайта Николай рассказывал о фонде с помощью такой небольшой презентации на 19 слайдов

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

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

Так эта история стала для нас практически некоммерческой. Работать над сайтом мы начали в июле 2023 года.

Подготовительный этап

Для начала проанализировали сайты других фондов — как крупных, так и мелких. Выписали идеи, которые хотим использовать. На созвоне с клиентом что-то решили внедрить сразу, что-то оставить на потом, когда фонд подрастет.

От начала и до конца атмосфера на этом проекте была неформальная, теплая. Иногда мы даже прямо во время созвона, в лайф-режиме внедряли какие-то фишки на сайт. В целом в фонде знали, чего хотят, и были вовлечены в процесс.

На этом проекте чаще всего мы взаимодействовали с Маргаритой — директором фонда. Она предоставила нам тексты и примерную структуру сайта, которую мы уже допиливали вместе. С Николаем, как с учредителем фонда, мы согласовывали ключевые моменты, например, дизайн-концепцию.

Дизайн-концепция: баланс между радостью и грустью

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

Первая дизайн-концепция клиенту не зашла. В ней мы сделали упор на детей: дизайн получился слишком жизнерадостным, ярким, с игривыми шрифтами. Николай сказал: «‎Нужно, чтобы люди видели, что женщины страдают», то есть добавить в концепцию больше реальности вместо детского восприятия.

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

За кулисами добра: как сделать сайт для благотворительного фонда без лишней драмы

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

Хотелось, наоборот, сместить акцент с мрачных историй на то, что мы можем делать добро.

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

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

Дизайн как история

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

Поэтому в дизайне мы используем hand-draw графику, как будто сделанную детской рукой. Этими рисунками мы рассказываем историю, ее можно проследить по скроллу на главной.

Там, где показаны проблемы женщин, графика в серых тонах
Там, где показаны проблемы женщин, графика в серых тонах
<p>Там, где присутствует логотип фонда, графика становится цветной</p>

Там, где присутствует логотип фонда, графика становится цветной

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

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

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

Николай Соколов, дизайнер NAJES

Добавили элементы доверия

По данным ВЦИОМ, 24% россиян не доверяют благотворительным фондам. Среди причин — непрозрачность процессов, вероятность обмана, недостаток информации о самом фонде. Для нас было важно показать на сайте, что фонд живет активной жизнью и действительно помогает людям.

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

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

С «‎Гармонией Жизни» ситуация другая. У фонда много проектов и людей, которым они помогают адресно. Это мы показали в блоке «‎Мы помогли». При наведении на имя всплывают реальные фотографии тех, кто получил помощь от фонда.

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

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

У посетителей есть возможность нажать на «‎Подробнее» и перейти на страницу с расширенной информацией, фото и видео. Всего мы сделали около 20 страниц с такими историями.

Юридическая информация. На странице «‎О фонде» мы сделали акцентные кнопки, которые по клику ведут на устав, свидетельство, оферту и реквизиты. Так мы показываем, что фонду скрывать нечего и его деятельность абсолютно законна.

Делать это очень важно. Можно считать, что лицо благотворительного фонда — это его организаторы и волонтеры. Но нельзя забывать и о документах.

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

«‎Хочу помочь»: главный посыл на сайте

Как мы говорили выше, основная цель сайта — это централизованный сбор донатов. Посетители приходят на сайт сразу с намерением сделать пожертвование. Поэтому мы сделали акцентной кнопку «‎Хочу помочь». Кнопки с таким посылом есть в разных местах и на главной, и на вспомогательных страницах сайта.

<p>Кнопки для тех, кто хочет помочь</p>

Кнопки для тех, кто хочет помочь

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

<p>Экран с вариантами, как можно поддержать фонд</p>

Экран с вариантами, как можно поддержать фонд

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

Форма для пожертвований. Такую форму на Тильде мы делали впервые. В ней нет одной фиксированной суммы, как в обычной форме для приема оплаты. Здесь можно выбрать: 300, 500, 1000 ₽ или свой вариант. Недавно фонд заключил партнерку с Qiwi, поэтому прием платежей стал еще проще.

<p>Так выглядит форма для сбора пожертвований</p>

Так выглядит форма для сбора пожертвований

Сначала у нас было много разговоров с разными спецами из ЮKassa. Мы запросили у них HTML-конструктор для такой формы (к слову, поддержка там отличная). Ребята предоставили нам конструктор формы, фонд подписал договор с платежной системой.

Но в форме нам не хватило нужных функций — там не было возможности указать несколько сумм на выбор в виде кнопок (например, 300, 500 и 1000 ₽). Тогда мы попробовали допилить ее силами программиста, он запросил полноценный доступ к API.

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

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

Результаты

Сайт фонда «‎Гармония Жизни» доступен по этой ссылке. Мы будем рады, если вы поможете фонду даже небольшим пожертвованием или предложите другую помощь.

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

Поделимся данными из веб-аналитики.

  • За последний месяц сайт посетили 2 000 человек. Чаще всего смотрели главную страницу и «‎О фонде».
  • В основном люди переходят на сайт по прямой ссылке (47,4%) и из поиска (35,6%). За месяц из Яндекса пришло более 1 000 посетителей.
  • Сайт собирает трафик из поиска не только по брендовым, но и по общим запросам вроде «‎фонд помощи женщинам попавшим в трудную ситуацию».

Это при том, что мы делали классическую SEO-настройку сайта, без дополнительных усилий. Считаем, что это достойный результат для сайта на Тильде.

За кулисами добра: как сделать сайт для благотворительного фонда без лишней драмы
За кулисами добра: как сделать сайт для благотворительного фонда без лишней драмы

Мы попросили Маргариту, директора фонда, поделиться впечатлениями о сайте:

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

Теперь люди сами находят нас в интернете, даже если мы не даем ссылку. Есть те, кто соглашается поучаствовать в работе нашего фонда как раз потому, что сайт вызвал у них интерес и доверие. За 2,5 месяца существования сайта мы получили через него 280 000 ₽, что для начинающего фонда хороший показатель.

Маргарита Усова, директор фонда «‎Гармония Жизни»

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

Мы довольны результатами. На этом проекте мы в неформальной обстановке впервые поработали с тематикой благотворительности. Сайт собирает трафик из поиска: около 1 000 уникальных посетителей в месяц из Яндекса — достойно для молодого сайта на Тильде. А еще мы наконец-то по полной обкатали форму для сбора пожертвований в Тильде и получили сайт для портфолио, который уже привлек новых лидов.

Сергей Мухаев, CEO NAJES

Советы напоследок: как работать над сайтами небольших благотворительных организаций

Благотворительным фондам:

Поймите и примите свои возможности. Нет смысла стартовать с 500-страничного сайта, как у фонда Хабенского. Для начала хватит сайта-визитки. Покажите свои результаты, расскажите о том, в чем нуждается фонд, прикрутите форму для сбора пожертвований.

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

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

Студиям:

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

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

Иногда можно сделать сайт за сниженную стоимость. Во-первых, это будет доброе дело и помощь фонду (но важно обсудить допустимый объем работ). Во-вторых, это будет новый проект в портфолио, особенно если вы не работали с этой нишей, как и мы.

Приходите в NAJES за сайтом и запрыгивайте к нам в телегу. У нас в портфолио — лютая смесь из психологии, ЕГЭ, опасных грузов и недвижки. Теперь еще и благотворительность. Кто следующий?

2222
5 комментариев

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

4
Ответить

очень симпатично получилось, надеюсь это поможет людям удобней вносить пожертвования

3
Ответить

Уже стабильно помогает)

1
Ответить

Очень крутой получился сайт! Стильно и понятно все! Спасибо!

3
Ответить

Николай, спасибо вам! Вы делаете доброе дело, и мы рады, что смогли и можем в этом участвовать:)

1
Ответить