Команда Lazarev.agency працювала над новим волонтерським проєктом — редизайном вебсайту благодійного фонду Сергія Притули. В агенції прагнули створити онлайн-майданчик, який ефективно та прозоро буде комунікувати з людьми та приносити результати. Надважливо було чітко донести суть своєї діяльності та здобути цінний актив — довіру людей. Коли дизайн був готовий, естафету передали команді розробників Brights. Які завдання вирішували під час редизайну, який підхід обрали та що з цього вийшло —Lazarev.agency розповіли у детальному кейсі.

Виклики та завдання проєкту

Версією «до» був сайт фонду, основна функція якого полягала у тому, що користувачі могли подавати заявки на допомогу, заповнивши спеціальну форму та/або зробити благодійний внесок за реквізитами. Вебсайту бракувало чіткої комунікації, яка б донесла користувачам детальну інформацію про сам благодійний фонд, його роботу та збори, які він проводить.

Дизайн вебсайту благодійного фонду Сергія Притули

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

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

Тому серед основних завдань Lazarev. були:

– створити сайт, що стане головним хабом, на якому люди знайдуть необхідну інформацію про фонд, його процес роботи, переглядатимуть новини, звітність та закупівлі;

– об’єднати категорії мілітарної та гуманітарної допомоги на одному сайті;

– максимально покращити взаємодію людей із сайтом фонду й заохочувати людей безперешкодно донатити як в Україні, так і за її межами.

Дослідження

Юзабіліті аудит

В агенції проаналізували сайт, дослідили, що і як працює, щоб розуміти, як можна покращити досвід користувача. Наприклад, виявили, що інформація на блоках з платіжними реквізитами фонду неструктурована, тому її важко переглядати.

Ще однією проблемою була адаптивність сайту під різні пристрої. Відтак головне меню зливалося з фоном вебсторінки, що створювало перешкоди для користувацького досвіду.

Вебсторінки сайту фонду до та після редизайну:

Попередній дизайн

Новий дизайн

Дизайн вебсторінки для донатів

Команда Lazarev.agency також вивчила аналітику вебсайту, проаналізувала соцмережі фонду та коментарі, які люди залишали під дописами. Це допомогло знайти інформацію про проблеми, з якими вони стикаються, коли взаємодіють із сайтом фонду. Наприклад, дізналися, що люди не могли знайти форму для заповнення на отримання допомоги. Виявилося, вона знаходилася всередині сторінки й загубилася серед решти тексту.

Команда також поспілкувалася з кол-центром фонду, щоб дізнатися, з якими запитаннями люди звертаються найчастіше. Спойлер — їх додали в оновлений розділ запитання-відповідь.

Аналіз конкурентів

Основними конкурентами фонду є «Повернись живим» та United24. У Lazarev.agency проаналізували також непрямих конкурентів як KOLO, Volonterska, Donor.ua тощо.

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

Опитування та інтерв’ю

За допомогою опитувань та інтерв’ю у Lazarev.agency спілкувалися з військовими, волонтерами, бізнесами, які прагнуть співпрацювати з фондом і загалом українцями, які роблять благодійні внески.

Мета — зрозуміти взаємодію з фондами кожного сегменту, виявити проблеми, потреби, очікування та патерни поведінки людей. Наприклад, з’ясувалося, що щоб волонтерам заповнити заявку на отримання допомоги, потрібно витратити чимало часу й мати специфічні знання. Аби спростити цей процес, команда агенції додала на вебсторінці форму для заповнення та інструкцію, з якими напрямами працює фонд, яку допомогу і як можна отримати.

Вебсторінки гуманітарної та військової допомоги

«З військовими ми застосували різні способи комунікації, щоб було зручно для всіх — хто не міг взяти участь в інтерв’ю, ми просили заповнювати опитувальник. Також одним з викликів цього проєкту було те, що ми мали справу з військовою інформацією й тому деякі дані залишилися конфіденційними», — розповідає Head of UX Володимир Хлюпін.

Усю інформацію, яку зібрали, команда Lazarev.agency перетворила на ідеї, як зробити взаємодію людей з фондом максимально простою та заохочувати українців більше підтримувати благодійні ініціативи організації.

UX-частина: побудова досвіду користувача

Перш за все, оновлений сайт став платформою, що об’єднує два головні напрями діяльності фонду — військову та гуманітарну допомогу.

Головна сторінка сайту зустрічає людей 3D-моделлю народного Байрактара, великими кнопками, які закликають відвідувачів зробити внесок або подати запит на допомогу. Тут же аудиторія може переглянути актуальні збори фонду та підтримати їх гривнею або іншою валютою.

Новий спосіб донатити

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

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

Як результат, зріс середній час залучення користувачів. У січні та лютому показник був 14 секунд, а в березні й квітні — 26 секунд. А ще завдяки гейміфікації сторінки донатів, середній час взаємодії практично подвоївся з 10 секунд до 18. Кількість відвідувачів, які покинули сайт без будь-якої дії, навпаки зменшилася на 18%.

Перемикач між гривневими та валютними рахунками фонду та інтерактивний віджет для донатів

Вебсторінка «Партнери», щоб підсилити підтримку фонду

Щоб заохочувати бізнес співпрацювати з фондом та підтримувати його благодійні ініціативи, оновили вебсторінку «Партнери». Тут як компанії, так і окремі люди можуть дізнатися про типи партнерства, як почати співпрацювати з фондом і які матеріали для цього потрібні.

Дизайн вебсторінки «Партнери»

Інформаційний хаб фонду

Зробити сайт прозорою базою знань про фонд — одна з головних цілей проєкту, яка стала основою роботи Lazarev.agency.

«Коли ми працювали над проєктом, нашою ціллю було зробити нову версію дизайну, за допомогою якого кожна взаємодія користувачів із сайтом є ефективною, зрозумілою та прозорою», — UX Designer Олександр Головко.

Дизайн вебсторінки «Проєкти»

Новини

Разом із командою фонду у Lazarev.agency вирішили, що важливо також додати новинний розділ з пресрелізами та оновленнями. Такий хід допомагає інформувати людей про діяльність організації та підтримувати прозорість роботи фонду.

Дизайн вебсторінки «Новини»

Питання-відповіді

Команда Lazarev.agency створила цілу бібліотеку з інформацією, яка може цікавити людей. А для кожного запитання зробили окрему вебсторінку, де користувачі знайдуть пов’язані теми та контакти для зв’язку з гарячою лінією фонду, якщо їм потрібно більше інформації.

Дизайн розділу «Питання-відповіді»

Що по UI-частині?

У Lazarev.agency побудували підхід до візуального дизайну сайту на універсальності та простоті: весь контент повинен балансувати між тим, щоб бути структурованим, читабельним і привабливим.

Також важливим моментом було те, щоб сайт вантажився максимально швидко при різній швидкості інтернету на будь-якому пристрої. Адже люди, які потребують зв’язатися з фондом — це військові та волонтери, які можуть знаходитися у місцях, де є проблеми зі зв’язком. Тому у Lazarev.agency наповнили сайт лише необхідним контентом та уникали великої кількості зображень, анімацій та інших елементів, які можуть його обтяжувати.

Але це не означає, що їх зовсім немає. Команда агенції розробила брендові 3D-моделі, які відображають конкретний розділ сайту, наприклад, гуманітарна, військова допомога, звітність тощо.

«Коли ми працювали над 3D-моделями, нам важливо було зберегти гармонію між тим, щоб додати візуальної естетики та не перетягувати усю увагу на неї», — Lead Product Designer Анна Дем’яненко.

Брендові 3D-моделі для сайту

Сітка

І насамкінець — модульна сітка сайту. Її зробили із 3-4 колонками для того, щоб люди з першого екрану бачили плашку із закликом зробити внесок, яка супроводжуватиме їх по всій вебсторінці. А це підвищує шанси конверсії — у цьому випадку донату.

Вебсторінка для донатів

«Кожна задача, яку ми виконуємо у Фонді, — від закупівлі бронетехніки до поста у соцмережах, — спрямована на те, щоб допомагати Силам Оборони України, а також цивільним на деокупованих і прифронтових територіях. Для цього зокрема потрібно підтримувати рівень довіри до організації, акумулювати донати, залучати партнерів. Сайт також має працювати на це», — розповідає директорка Благодійного Фонду Сергія Притули Анна Гвоздяр.