кейси
UX Case Study: як я створювала свій перший додаток для сортування сміття
Сервіс розпізнає упакування і дозволяє замовити кур’єра
13 Грудень, 2019

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

Фото з Unsplash

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

  • не знаємо правил сортування відходів вдома;
  • графік роботи станцій прийому вторсировини невідомий, крім того, розташовані станції незручно;
  • не вміємо відрізняти та розподіляти категорії відходів;
  • купуємо «речі для зручного сортування» (багаторазові торбинки, контейнери для їжі, води тощо);
  • не маємо змоги позбутися всіх відходів на одній станції: деякі не приймають на переробку певні види відходів,
  • тому потрібно звертатися до інших організацій (найчастіше це стосується небезпечних відходів).

Цільова аудиторія мого додатку — свідома молодь, студенти з Києва та регіонів (люди до 30 років), що поєднують навчання з роботою та небайдужі до глобальних проблем.

Фото з Unsplash

1. Відкриття та дослідження

Фаза «відкриття» допомагає визначити вимоги, цілі та бар’єри проєкту, зрозуміти, що відомо і про що варто дізнатися. У процесі я створила канву ціннісної пропозиції (The Value Proposition Canvas), яка відображає відповідність між потребами цільового користувача та цінністю продукту.

Канва ціннісної пропозиції

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

Аби зрозуміти, що важливо для потенційного користувача, провела інтерв’ю з тими, хто вже сортує відходи (знайшла їх на станції «Україна без сміття»). Розмови (тривалістю 1-2 години) записала на диктофон.

Цілі інтерв’ю:

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

Звіт після інтерв’ю

Підсумки інтерв’ю:

  • Не всі станції приймають усі види відходів без виключень.
  • У магазинах «Ласка» (приймають одяг у хорошому стані) та «H&M» можна здати одяг на переробку.
  • Крім «Україна без сміття», прийомом вторсировини займається ще організація «Silpo Recycling».
  • Великі об’єми пластику можуть викликати алергію.
  • Синтепон, який використовують для утеплення зимового одягу, — це перероблені ПЕТ-пляшки.
  • Скло і метал не втрачають своїх властивостей, на відміну від пластику.

Фото: Unsplash

Історія користувача №1:

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

Історія користувача №2:

Як користувач я хочу мати розділ з категоріями відходів для того, щоб вміти розрізняти їх.

Історія користувача №3:

Як користувач я хочу мати можливість замовити кур’єра, щоб не витрачати час на вивіз сміття.

дізнатися більше

Шлях користувача (User Flow)

Після інтерв’ю стало зрозуміло, як користувач буде взаємодіяти з вебдодатком. Зважаючи на цю інформацію, я створила ключовий сценарій, на основі якого побудовано шлях користувача (user flow).

Основний сценарій

Валерії — 24. Вона живе в Києві, часто подорожує з чоловіком, уже не студентка і має більше вільного часу, ніж у студентські роки.

Два тижні тому Валерія серйозно задумалась над сортуванням відходів (на це вплинула велика кількість сміття в океані, побачена на відпочинку). Про неприємну знахідку розповіла в Instagram. Валерія вирішила дбати про навколишнє середовище та дізнаватися більше про це в YouTube, Instagram та Facebook, але процес пошуку інформації займає багато часу.

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

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

Повна версія flowchart в Miro

На основі flowchart я визначила основні екрани додатку:

  1. Landing page з інформацією про проєкт.
  2. Форма реєстрації.
  3. Онбординг.
  4. Функція розпізнавання упакування.
  5. Мапа з розташуванням станцій та спеціалізованих контейнерів.
  6. Замовлення кур’єра.
  7. Список умовних позначень.

2. Ідея

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

Інформаційна архітектура – важливий інструмент для впорядкування інформації, який може використовуватися всією командою.

Повна версія Інформаційної Архітектури

Система кольорів

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

Система кольорів

3. Прототип

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

Деталізований прототип

4. Тестування

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

Я шукала відповіді на такі питання:

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

Результати тестування користувачів

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

Що варто покращити:

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

*Ці ідеї згодом вдалося застосувати.

5. Результати

Це був навчальний проєкт у рамках 4-місячного Design Boost Marathon від EPAM University. Найважчим було поєднати початок курсу з поїздкою в Ісландію, де домашні завдання та зідзвони з командою довелося виконувати біля підніжжя вулкану, водоспаду чи на території гейзерів. Я думала, що це неможливо, але змінила думку.

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

Клікабельний прототип десктопної версії в Figma

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