Разработка сайта БФ «свет.дети»

Благотворительный фонд «свет.дети» помогает детям с онкологическими заболеваниями. Команда фонда пришла к нам за обновлением сайта.

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

Этап 1: Аналитика и исследования

У фонда был рабочий сайт. Но некоторые UX/UI-решения устарели, технически поддерживать и развивать инструмент стало сложно. Поэтому начали с диагностики текущего сайта и глубинного интервью с клиентом.
Проанализировали существующую структуру и предложили её оптимизировать.

Этап 2: Проектирование и дизайн

В поисках актуальных UX/UI-решений проанализировали референсы, которые нам прислал клиент. Отправной точкой стали сайты благотворительных организаций: «Фонда Константина Хабенского», БФ «Жизнь как чудо», фонда «Антон тут рядом ».

Далее разобрали интерфейсы c похожими функциональными задачами и эмоциональным посылом. В подборку попали 30 сайтов разных тематик.

Определили лучшие решения:

• использовать простую навигацию;

• не перегружать первый экран главной страницы;

• использовать для акцента яркие цвета и элементы логотипа фонда;

• разбить плотную вёрстку воздушными блоками, чтобы информация не подавалась монотонно;

• добавить прогресс-бар и виджеты в карточки сбора пожертвований для нативного напоминания о главной цели.
  

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

Предложили минималистичный дизайн. Благодаря чёткой структуре и «нежной» простоте сайт транслирует главную мысль и цель проекта — «помогать легко». Окружаем пользователя заботой с первого экрана и мягко на каждом шаге подталкиваем его дарить заботу и надежду другому.

Проработали разные способы оказания помощи:

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

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

Этап 3: Разработка и тестирование

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

Дизайнеры и разработчики двигались параллельными треками. Каждые несколько недель дизайнеры получали готовые макеты на тестирование. Вначале проверяли вёрстку, а когда была готова административная панель управления сайтом — тестировали всё вместе. Основная цель — понять, как будет работать сайт, наполненный реальным контентом. Процесс занял больше 3 месяцев. 

На этапе разработки решили несколько глобальных задач:

— Перенос базы данных

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

Из-за особенностей архитектуры старого сайта часть контента переносилась вручную командой проекта.

— Интеграция двух платежных систем и Битрикс24

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

Также фонд внедрил систему аналитики, поэтому потребовалась сложная интеграция с Битрикс24.

Этап 4: Поддержка и развитие проекта

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

Разработали новый сайт для благотворительного фонда «свет.дети». Для нас было важно сделать удобный и понятный инструмент для взаимодействия с аудиторией фонда.
В процессе решили несколько задач:

• создали новый визуальный стиль сайта;

• укрепили доверие к фонду: расширили и структурировали всю информацию о фонде, в том числе пересобрали отдельные страницы для волонтёров и компаний. Также разработали новый раздел «Наше медиа»;

• выстроили коммуникацию с разной ЦА: подопечными, спонсорами, донорами, волонтёрами и сотрудниками фонда.

• переработали личный кабинет;

• предложили механики привлечения доноров;

• сделали процесс пожертвований проще и удобнее.