UX Case Study: «Кишеньковий притулок» — мобільний застосунок притулку «Домівка врятованих тварин», в якому користувач дистанційно може стати куратором тварини з притулку.
Наша команда Purple Team працювала над проєктом «Кишеньковий притулок» протягом трьох місяців в форматі навчання в OffGrid Design School. Ми раді поділитися з вами результатами та процесом роботи.
Коротко про проєкт:
Щодня притулок «Домівка врятованих тварин» поповнюється новими тваринами, більшість з яких потребують вартісного лікування та особливого догляду. Домівка почала шукати нові методи підтримки та фінансування, нові способи, як заохочувати людей до допомоги притулку. Так виникла ідея створення мобільного застосунку з функціоналом дистанційного кураторства над твариною.
«Кишеньковий притулок» — це мобільний застосунок, в якому кожен може допомогти тваринам в притулку дистанційно. Основною метою проєкту було залучити більше людей до підтримки тварин, постраждалих від насильства та війни.
Стейкхолдери:
Притулок «Домівка врятованих тварин» — це організація, яка до початку повномасштабного вторгнення займалася порятунком диких та свійських тварин. Зараз притулок активно приймає тварин з прифронтових територій, евакуюючи цілі зоопарки, та приймаючи покинутих домашніх улюбленців.
Наша команда:
Аліна Ткаченко — Student
Анастасія Жукова — Student
Вадим Кот — Student
Христина Салабан — Student
Наші координатори:
Наталія Шевченко — Experience Designer
Соломія Породко — Experience Designer
Процес
В роботі над цим проєктом ми застосували процес Design Thinking, який допоміг нам детально пропрацювати всі деталі проєкту в обмежені терміни — всього за три місяці. Для продуктивної роботи в команді ми використали методологію SCRUM.
Ось наш процес та основні активності:
Discovery
Kick-off
Наше дослідження почалося з Kick-off meeting, на якому ми обговорили питання, що допомогли нам краще зрозуміти вимоги та бачення бізнесу, ось деякі з питань:
- Яка основна мотивація створення саме застосунку з можливістю кураторства?
- Хто ваша основна ЦА?
- Які критерії успішності запуску продукту?
- Якщо користувач застосунку не має можливості пожертвувати кошти для Домівки, але хоче бути корисним, що застосунок йому може запропонувати?
- З якими питаннями найчастіше звертаються люди за консультацією до вас?
- Як ми будемо з вами комунікувати?
Завдяки цій зустрічі ми отримати ключову інформацію та дізнатися більше про ідею та мету проєкту.
Найкраще зрозуміти внутрішні процеси притулку та мотивацію стейкхолдерів нам допомогла особиста зустріч в притулку, де ми змогли поспілкуватися також з іншими працівниками Домівки.
Design Brief
На основі отриманих даних ми розробили дизайн-бриф. Ми склали три прото-персони, які репрезентували нашу гіпотетичну аудиторію. Це допомогло нам краще зрозуміти наших потенційних користувачів. Також визначили Problem Statement та створили Lean Canvas.
Competitor Analysis
Наступним кроком був аналіз восьми українських та чотирьох закордонних притулків для тварин.
Ключові інсайти:
- Головна особливість Домівки саме у її мешканцях, оскільки це єдиний притулок, в якому є не тільки собаки та коти, а й дикі тварини: лисиці, кабани, мавпи та багато інших.
- Багато притулків пропонують адопцію тварин, у Домівці навпаки актуальним є кураторство, оскільки диких та свійських тварин забрати як домашнього улюбленця неможливо.
User Survey
Ми підготували україномовне та англомовне опитування, на які отримали 133 відповіді. Для нас було важливо, щоб ці опитування пройшло якомога більше людей, адже це б допомогло сформувати більш об’єктивну картину аудиторії.
User Interview
Майже одночасно з опитуванням, проходили наші інтерв’ю-сесії із потенційними користувачами майбутнього застосунку.
Для нас було важливо дізнатися:
- Як потенційні користувачі допомагають притулкам для тварин
- Яким способом надсилають благодійні пожертви
- З якими проблемами стикаються у притулках
З інтерв’ю ми отримали багато інсайтів та цікавих думок, які оформлені в Affinity Diagram нижче.
Опитування та інтерв’ю з іноземцями підтвердили гіпотезу, що іноземці також можуть стати потенційними користувачами нашого застосунку, адже люди з різних країн готові допомагати українським притулкам.
Personas
Результати кількісних та якісних досліджень допомогли нам далі детально пропрацювати три персони. В результаті ми проектували застосунок для реальних користувачів, враховуючи їхні цілі та потреби.
CJM Workshop
Наступним нашим кроком було проведення CJM Workshop. Метою цієї активності було оцінити больові точки в досвіді відвідувачів притулку і знайти можливості для покращення їхнього досвіду.
До активності ми запросили трьох потенційних користувачів та нашого стейкхолдера.
Після ми пріоритезували ідеї за допомогою Impact Effort Matrix, виписали проблеми та рішення, а також розробили Action Plan, основою якого стали потреби наших потенційних користувачів.
Ideation
Brainstorm
Нам сподобалося як з’являлися ідеї під час CJM Workshop, тому вирішили провести ще два: Storyboard та Walt Disney Rooms, щоб знайти оригінальні ідеї для розв’язання проблем та цілей користувачів.
Ми пріоритезувати усіх ідей за допомогою Dot Voting.
Ідеї розділили на:
- Обов’язкові функції застосунку
- Необов’язкові функції, які зроблять роботу в застосунку приємнішою
- Ідеї на наступну імплементацію
Sitemap та User flow
Після дослідження, воркшопів та пріоритезації ідей ми почали працювати над інформаційною архітектурою. Оскільки на той момент у Домівки мав запуститися сайт, ми вирішили зосередити увагу користувачів застосунку на головному — кураторстві. Наша робота почалася з mind map, після чого ми розробили карту застосунку, яку пізніше кілька разів змінювали та доповнювали, щоб досягти кращого результату.
Ми виділили три основні сторінки:
- Сторінка притулку, де можна знайти тварину та стати її куратором
- Сторінка допомоги, де можна відправити благодійну пожертву та дізнатися більше про притулок
- Сторінка профілю, де можна побачити свої досягнення
Паралельно з Sitemap ми розробляли User flows. Основний User flow — це оформлення підписки на кураторство.
Другорядні User Flows:
- Відправлення благодійної пожертви
- Сканування QR коду з вольєра в притулку
- Зміна умов кураторства та відмова від нього
- Тест для швидкого пошуку улюбленця
- Підписка на подію притулку
- Отримання нагород за допомогу притулку
Prototyping
Wireflows
Роботу над Wireframes ми почали з воркшопу Crazy Eights, який допоміг згенерувати велику кількість ідей. В кінцевому варіанті було створено понад 10 Mi-Fi Wireframes, завдяки яким наша команда змогла краще побачити та зрозуміти шляхи користувача, функціональність застосунку та його структуру. Далі ми об’єднали всі Wireframes в прототип.
Testing
Основною метою тестування було перевірити зручність використання застосунку. Нам важливо було побачити чи розуміють користувачі процес оформлення кураторства, чи не виникає труднощів у них на цьому етапі. Крім того, одним із завдань було визначити чи комфортним для користувачів є процес реєстрації в застосунку.
У тестуванні взяли участь шість потенційних користувачів, від яких ми отримали корисні інсайти, основні з них:
- Користувачі не помічали фільтр через незрозумілу для них іконку. Тому ми змінили цю іконку та розмір фільтра.
- Користувачі помилково використовували світчер у фільтрі. Тому ми змінили його розташування.
- Користувачі очікують побачити відмову від кураторства в профілі, оскільки це відповідає їхньому попередньому досвіду.
Після тестування ми сформували звіт та план дій.
Delivery
UI Kit
Під час дослідження користувачів ми виявили, що більшість з них використовує операційну систему Android, тому працювати вирішили за дизайн-системою Material, яка добре знайома нашим користувачам.
«Домівка врятованих тварин» має свій фірмовий колір — жовтий, саме тому у застосунку він став основним.
Щодо типографіки, ми обрали сімейство шрифтів Mulish, оскільки воно відкрите, дружнє та добре читається.
Наша робота була організована за принципом атомарного дизайну, тому був створений набір компонентів та варіантів, які згодом було зручно редагувати, що дуже спростило та пришвидшило роботу над проєктом.
Mockups
Враховуючи всі зауваження наших потенційних користувачів, які було отримано в результаті тестувань, ми розпочали роботу над візуальною частиною нашого проєкту.
User testing 2.0
Перед остаточним варіантом ми провели другий етап тестування, щоб оцінити сприйняття та зручність користування, враховуючи візуальну частину.
В результаті цього тестування ми отримали позитивні відгуки та декілька зауважень, враховуючи їх, внесли наступні корективи:
- Додали підказки з описом різниці між повним та частковим кураторством.
- Зменшили кількість досягнень та перегрупували їх.
- Допрацювали опис умов оплати.
Landing Page
В доповнення нашого застосунку було створено Landing Page, в якому ми детально розповіли про те, як працює застосунок, які його особливості та загалом чому варто допомагати тваринам через мобільний застосунок. З цієї сторінки користувачі можуть з легкістю завантажити застосунок.
Завершуючи, хочемо додати
Благодійність зазвичай є безкорисливою справою, проте ми старались створити мобільний застосунок, у якому можна не лише перерахувати кошти на потреби притулку, а й весело провести час, відчути важливість кожної надісланої гривні та стати частиною великої та дуже важливої доброї справи.
Висновки
Наш стейкхолдер була дуже задоволена процесом та фінальним результатом роботи. Ми залишаємося на зв’язку, оскільки незабаром застосунок перейде у руки розробників.
Кожен з нас отримав цінний досвід у проведенні різноманітних дизайн активностей та загалом у роботі в команді. Ми виросли у професійному плані, прокачали хард та софт скіли.
Навчання в OffGrid Design School дало нам багато важливих знань, що допомогло нам створити якісний продукт. Дизайнери OffGrid є справжніми фанатами своєї справи, вони надихають всіх навкруги на гарну роботу та майбутні звершення.
