Дизайнерка Вікторія Михайлюк спробувала полегшити життя українцям, які сортують сміття, і створила навчальний проєкт «Майбутнє». Це вебдодаток, що допомагає сортувати відходи: показує, де розташовані станції, розпізнає упакування і має функцію замовлення кур’єра. Вікторія поділилася, як проводила користувацькі інтерв’ю, тестувала прототипи і що врешті вдалося.
Фото з Unsplash
Сьогодні в Україні сортувати відходи складно, бо умови для цього майже відсутні. Тим часом кількість сміття на звалищах збільшується, а ми отруюємо собі життя нераціональним споживанням. Головна проблема — ми не маємо життєво необхідної інформації:
- не знаємо правил сортування відходів вдома;
- графік роботи станцій прийому вторсировини невідомий, крім того, розташовані станції незручно;
- не вміємо відрізняти та розподіляти категорії відходів;
- купуємо «речі для зручного сортування» (багаторазові торбинки, контейнери для їжі, води тощо);
- не маємо змоги позбутися всіх відходів на одній станції: деякі не приймають на переробку певні види відходів,
- тому потрібно звертатися до інших організацій (найчастіше це стосується небезпечних відходів).
Цільова аудиторія мого додатку — свідома молодь, студенти з Києва та регіонів (люди до 30 років), що поєднують навчання з роботою та небайдужі до глобальних проблем.
Фото з Unsplash
1. Відкриття та дослідження
Фаза «відкриття» допомагає визначити вимоги, цілі та бар’єри проєкту, зрозуміти, що відомо і про що варто дізнатися. У процесі я створила канву ціннісної пропозиції (The Value Proposition Canvas), яка відображає відповідність між потребами цільового користувача та цінністю продукту.
Канва ціннісної пропозиції
Інтерв’ю з користувачами
Аби зрозуміти, що важливо для потенційного користувача, провела інтерв’ю з тими, хто вже сортує відходи (знайшла їх на станції «Україна без сміття»). Розмови (тривалістю 1-2 години) записала на диктофон.
Цілі інтерв’ю:
- Зрозуміти, як юзери шукають необхідну їм інформацію і що найчастіше їх цікавить.
- Зрозуміти основний мотив сортування сміття та як відбувається цей процес.
- Виявити незручності, з якими стикаються в процесі сортування.
- Визначити, куди і як часто утилізують відходи.
Звіт після інтерв’ю
Підсумки інтерв’ю:
- Не всі станції приймають усі види відходів без виключень.
- У магазинах «Ласка» (приймають одяг у хорошому стані) та «H&M» можна здати одяг на переробку.
- Крім «Україна без сміття», прийомом вторсировини займається ще організація «Silpo Recycling».
- Великі об’єми пластику можуть викликати алергію.
- Синтепон, який використовують для утеплення зимового одягу, — це перероблені ПЕТ-пляшки.
- Скло і метал не втрачають своїх властивостей, на відміну від пластику.
Фото: Unsplash
Історія користувача №1:
Як користувач я хочу мати мапу з розташування станцій та їх графіком роботи для того, щоб планувати візит.
Історія користувача №2:
Як користувач я хочу мати розділ з категоріями відходів для того, щоб вміти розрізняти їх.
Історія користувача №3:
Як користувач я хочу мати можливість замовити кур’єра, щоб не витрачати час на вивіз сміття.
Шлях користувача (User Flow)
Після інтерв’ю стало зрозуміло, як користувач буде взаємодіяти з вебдодатком. Зважаючи на цю інформацію, я створила ключовий сценарій, на основі якого побудовано шлях користувача (user flow).
Основний сценарій
Валерії — 24. Вона живе в Києві, часто подорожує з чоловіком, уже не студентка і має більше вільного часу, ніж у студентські роки.
Два тижні тому Валерія серйозно задумалась над сортуванням відходів (на це вплинула велика кількість сміття в океані, побачена на відпочинку). Про неприємну знахідку розповіла в Instagram. Валерія вирішила дбати про навколишнє середовище та дізнаватися більше про це в YouTube, Instagram та Facebook, але процес пошуку інформації займає багато часу.
У дівчини виникає безліч локальних питань, на які вона шукає відповідь: як сортувати відходи вдома, відрізняти умовні позначення на товарах та що робити, коли немає жодних позначень.
Ресайклінґ є частиною процесу утилізації відходів — зменшення споживання, повторного використання та переробки.
На основі flowchart я визначила основні екрани додатку:
- Landing page з інформацією про проєкт.
- Форма реєстрації.
- Онбординг.
- Функція розпізнавання упакування.
- Мапа з розташуванням станцій та спеціалізованих контейнерів.
- Замовлення кур’єра.
- Список умовних позначень.
2. Ідея
Створення інформаційної архітектури допомогло виділити рівні навігації та визначити кількість контенту на сторінках додатку.
Інформаційна архітектура – важливий інструмент для впорядкування інформації, який може використовуватися всією командою.
Повна версія Інформаційної Архітектури
Система кольорів
Основні кольори мого додатку — насичений блакитний та бірюзовий. Перший асоціюється з океаном, льодовиками, підводним життям та небом, це символ свободи, відкритості, відтінок, що викликає спокій та позитивні емоції. Бірюзовий — це рослини, ліс, чисте повітря. Він надихає на зміни, асоціюється з рухом, життям і довкіллям.
Система кольорів
3. Прототип
Зібрана інформація допомогла сформувати бачення того, як виглядатиме майбутній інтерфейс. Створюючи прототип, я базувалася на досвіді компаній з подібними проєктами, також врахувала додаткові функції, про які дізналася під час інтерв’ю.
Деталізований прототип
4. Тестування
Юзер-тестування провела з двома респондентами на деталізованому прототипі. Учасники мали зрозуміти, до якого типу відходів віднести своє сміття і мали позбутися його. Під час тестування я звертала увагу на рухи та поведінку респондентів, аби краще розуміти їхню реакцію на макет.
Я шукала відповіді на такі питання:
- чи достатньо видимі кнопки і чи зрозумілі поля під час реєстрації;
- чи зручна навігація між сторінками;
- чи просто користуватися фільтрами на сторінці мапи;
- чи вдало організовані візуальні індикатори після сканування відходу;
- чи зрозуміло розташовані елементи дизайну: пошук, налаштування, пункти меню тощо.
Результати тестування користувачів
Усі юзери успішно пройшли флоу протягом 20 хвилин, дотримуючись сценарію. Це підтвердило, що інтерфейс можна вважати задовільним.
Що варто покращити:
- підказки на онбордингу зробити акцентнішими;
- додати заголовок з назвою виду відходу після його сканування;
- додати чекбокс, де можна відмінити замовлення кур’єра;
- змінювати вид курсора при наведенні на клікабельний елемент
(при виборі станції на мапі).
*Ці ідеї згодом вдалося застосувати.
5. Результати
Це був навчальний проєкт у рамках 4-місячного Design Boost Marathon від EPAM University. Найважчим було поєднати початок курсу з поїздкою в Ісландію, де домашні завдання та зідзвони з командою довелося виконувати біля підніжжя вулкану, водоспаду чи на території гейзерів. Я думала, що це неможливо, але змінила думку.
Команда дизайнерів Epam не шкодувала часу на повторні пояснення матеріалу, завжди залишалися на зв’язку та створювали теплу атмосферу. Це був неймовірний досвід, який хочеться застосовувати в роботі надалі, У результаті я створила мобільну і десктопну версії додатку.
