Реализация
Новый сайт должен был стать не только технологичным рабочим инструментом, но и визуально красивым ресурсом. После нескольких обсуждений у нас родилась идея — использовать в концепции акварельные образы. Акварель — это нежность и хрупкость, как и кожа ребёнка-бабочки. Команде фонда понравилась эта аллюзия: она не только эмоционально сочетается с бабочками и детьми, но и визуально отражает особенность людей с БЭ. Кроме того, мы понимали, что правильный выбор образа поможет прочно закрепить ассоциацию с НКО. Со временем акварель станет узнаваемым элементом стиля фонда «Дети-бабочки».
Главная страница сайта deti-bela.ru
Ещё мы интегрировали сайт с Регистром больных БЭ и ихтиозом — платформой для ведения учёта и системного анализа данных подопечных фонда. Теперь информация о детях-бабочках и детях-рыбках автоматически подгружается и выстраивается в удобные диаграммы о помощи. Любой пользователь сайта может посмотреть, на какие программы пошли деньги, и проследить объёмы пожертвований за каждый год.
Наглядные отчёты о помощи детям-бабочкам и детям-рыбкам
Чтобы сайт мотивировал доноров жертвовать средства, вместе с командой фонда мы добавили элементы геймификации в раздел «Помочь». Выбирая разные суммы (100, 200, 500 рублей), вы видите описание, сколько и каких бинтов можно приобрести.
Нажимайте «Помочь», выбирайте сумму пожертвования и наблюдайте, как одна, три, а затем и больше «бабочек» облачаются в бинты – жизненно важный для них атрибут
Немаловажно было сделать страницу с пожертвованиями удобной для бизнеса. Мы реализовали возможность регистрации для юридических и физических лиц. Личный кабинет адаптируется под выбранный вариант. Если компания совершает пожертвование на сумму более 3000 рублей, ей предложат оставить данные. После этого автоматически сформируется удобный документ с уже заполненной информацией и отправится на почту. Останется просто перевести деньги по договору.
Личный кабинет предусматривает регистрацию как физических лиц, так и бизнеса
Этап работ №1
Аналитика
Мы провели аналитику бизнес-процессов фонда, чтобы интегрировать их в будущий сайт.
Кроме того, мы изучили гугл-аналитику, чтобы понять движение пользователей по ресурсу и увидеть работающие инструменты, которые стоит сохранить, и неработающие, которые можно сделать иначе.
Этап работ №2
Дизайн-концепция
Сначала мы определились с концепцией и нарисовали фирменный стиль будущего сайта. Согласовав концепцию с командой фонда и утвердив главную страницу и элементы анимации, мы завершили дизайн остальных страниц сайта.
Этап работ №3
Вёрстка и программирование
Одной из задач этого этапа была интеграция сайта с Регистром больных БЭ и ихтиозом. Все данные в карточках детей подгружаются именно из Регистра: фотографии, диагноз, отчётность.
Здесь же стояла задача разработки личного кабинета с возможностью регистрации как в качестве юридического лица, так и физического. Ещё мы реализовали возможность отмечать в своём кабинете детей, которым пользователь хочет помогать и за судьбой которых хочет следить.
Сайт адаптируется и хорошо смотрится во всех популярных разрешениях: на ПК, планшетах и мобильных устройствах.
Этап работ №4
Наполнение контентом, тестирование и запуск
Мы создали административную панель, чтобы в дальнейшем контент-менеджер фонда смог добавлять информацию в разделах с контентными страницами — теми, которые чаще других нуждаются в изменении — самостоятельно. Например, добавлять и редактировать программы фонда и образовательные статьи.
Когда мы запустили сайт, критичных багов не было — всё работало. А значит, вместе с командой фонда мы смогли организовать рабочие процессы и не допустить базовых ошибок.
.svg)
