Редизайн сайту благодійного фонду Сергія Притули: кейс Lazarev.agency

Якісний UX/UI-дизайн потрібен усім. Ну гаразд, не усім, лише тим, хто прагне створити онлайн-майданчик, який ефективно та прозоро буде комунікувати з людьми і давати результати. Окрім бізнесів, це стосується і благодійних фондів. Для останніх також надважливо чітко донести суть своєї діяльності та здобути цінний актив — довіру людей. Щоб досягти цього через візуальну комунікацію, дизайн — один із потужних інструментів.

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

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

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

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

А тепер до дизайну.

Але спочатку було дослідження сайту 

Дизайн-процес Lazarev.agency гнучкий, але дослідження — це та константа, яка формує наші подальші кроки.

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

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

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

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

Новий дизайн

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

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

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

Підписуйтеся на наші соцмережі

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

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

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

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

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

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

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

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

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

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

До речі про останнє.

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

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

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

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

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

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

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

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

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

Новини

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

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

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

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

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

Ми побудували наш підхід до візуального дизайну сайту на універсальності та простоті. А це означає, що весь контент має балансувати між тим, щоб бути структурованим, читабельним і привабливим.

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

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

Сітка

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

Коли ж дизайн був готовий, ми передали естафету нашим партнерам — команді розробників Brights↗ .

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

Команди Lazarev. і Brights провели колосальну роботу, вивчаючи конкретні завдання фонду і розробляючи рішення, які допомагають нам звітувати перед благодійниками та фандрейзити кошти на наступні закупівлі.

Замість висновку

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

Підписуйтеся на наші соцмережі