Статті
Кейс-стаді: UX/UI для благодійної платформи «Опіка Ангела»
3 вересня, 2020
Марія Бліндюк
Журналістка Telegraf.Design
Дмитро Орлик
Senior Experience Designer
Стати автором

Нещодавно студенти OffGrid Design School у офісі компанії EPAM розробили онлайн-платформу для допомоги родителям, які втратили дитину під час вагітності або пологів. Команда розповіла Telegraf.Design, як робили дослідження, розробляли сайт та проводили UX.

Про проєкт

«Опіка Ангела» – перша в Україні онлайн-платформа, головним завданням якої є допомога людям, які втратили дитину під час вагітності чи пологів. Фокус проєкту спрямовано на вирішення емоційних викликів та підтримку родин, які переживають або пережили втрату. Під час роботи над проєктом студенти OffGrid Design School в офісі компанії EPAM розробляли платформу, що зможе допомогти родителям пережити травму.

Над проєктом працювали: Дмитро Орлик – Senior UX Designer, Христина Новак – UX Designer та студенти EPAM Design Вікторія Шамрай, Софія Шарак і Володимир Малик.Для організації процесів команда застосовувала методологію Agile, для менеджменту завдань – Trello, а для комунікації – Skype.

Дослідження

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

Інтерв’ю зі стейкхолдерами

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

Інтерв’ю з користувачами

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

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

Загалом команда провела вісім інтерв’ю: шість із родителями та два – з лікарями.

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

В Україні не було подібних сервісів, тому досліджували закордонні аналоги.

Головні інсайти, отримані в результаті аналізу 11 сайтів:

  • три надавали онлайн-підтримку;
  • три надавали професійні психологічні консультації;
  • один сайт мав власну платформу з онлайн-курсами.

Опитування

Форму зворотного зв’язку розмістили у фейсбук-спільноті, щоби зібрати більше даних для платформи. З 30 відповідей стало зрозуміло:

  • 27 користувачів упродовж дня частіше користуються смартфоном, ніж комп’ютером;
  • 26 опитаних відчувають потребу поділитися своєю історією;
  • 23 респонденти потребують психологічної допомоги;
  • 20 респондентів хотіли би шукати допомогу анонімно.

Персони

Після опитування та інтерв’ю сформувалися два типи користувачів (персон).

  • Користувачка (ключова персона). Втратила дитину два роки тому. Має негативний досвід спілкування з лікарями. Знає, що є й інші родителі, які переживають таку ж ситуацію, тому вона хоче допомогти їм не почуватися самотніми.
  • Користувач. Працює неонатологом 15 років. Але, попри досвід, не знає, як підтримувати пацієнтів у складній ситуації, тому намагається уникнути незручних розмов.

 

User Journey Map

Цей тип мапи обрали, оскільки головний фокус проєкту на головній персоні – Користувачці, матері, яка втратила дитину.

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

Пріоритизація проблем та генерація рішень

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

Модель Кано

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

  • анонімний онлайн-чат;
  • можливість організувати подію на сайті;
  • можливість читати історії інших родителів та поділитися своєю;
  • можливість зареєструватися на безоплатні сеанси з психотерапевтом.

Користувацькі маршрути

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

Створили п’ять маршрутів:

  • Заповнення форми на отримання підтримки;
  • Запис на прийом до психотерапевта;
  • Завантаження брошур;
  • Заповнення форми реєстрації для волонтерів;
  • Отримання допомоги в найшвидший та найзручніший спосіб – анонімний онлайн-чат.

Інформаційна архітектура та мапа сайту

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

Тестування з користувачами

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

Імплементація дизайну

Щоби спростити та прискорити розробку, почали роботу над UI-кітом. Для цього обрали інструмент Figma.

UI-кіт

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

Брендинг

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

Data-driven testing: використання Framer, Netlify та Hotjar

Для отримання кількісних метрик провели тестування, використовуючи Framer (інструмент для створення прототипу), Netlify (ресурс для розміщення прототипу на сервері) та Hotjar (сервіс збору аналітики).

Отримані результати допомогли оновити структуру інформації та сторінок. Пізніше завдяки цим результатам змогли відстежувати відсоток успішно виконаних дій. Після 15 сесій тестувань та даних теплової карти змінили форму запису до психолога – додали інформацію про місцезнаходження лікаря.

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

Проєкт наразі

Зараз команда докладає зусилля для запуску платформи спільно з інженерами з лабораторії EPAM University, що допоможе родинам пережити складну ситуацію разом. Кількість добровольців, які працюють над проєктом, зросла до 24 учасників.

avatar
Марія Бліндюк
Журналістка Telegraf.Design
Колонка
avatar
Вікторія Шамрай
Experience Designer
Колонка
avatar
Христина Новак
Experience Designer
Колонка
avatar
Дмитро Орлик
Senior Experience Designer
Колонка

У нас є ще дещо для вас