кейси
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

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




Колонка
Як ANGRY agency створювали айдентику для фотопроєкту «Кров чарівна»
27 грудня, 2021

Громадська організація «Агенти крові» проводить другий сезон благодійної акції «Кров Чарівна» задля привернення уваги людей до проблеми нестачі донорської крові взимку. Акція триває з початку грудня 2021 року до кінця лютого 2022. Протягом цього періоду професійні фотографи знімають портрети усіх донорів крові в столичному Інституті Амосова та в Одеській станції переливання крові. Хоча фотопроєкт стартував у 2020 році, першу айдентику він отримав тільки цьогоріч. Розробкою єдиного візуального стилю займалася креативна агенція ANGRY agency.

Команда ANGRY agency спільно з «Агентами крові» розповіли, як працювали над айдентикою найдобрішої акції цієї зими.

Бриф

Олена Балбек, засновниця ГО «Агенти крові»:

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

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

Логотип

Інна Алімова, артдиректорка ANGRY agency:

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

У першому варіанті логотипу ми перетворили тире на магічну паличку. Так ми підкреслили ідею магічного впливу кожної донації.

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

Інші елементи візуальної стилістики

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

Slider image
Slider image

Шрифти 

Шрифти ми залишили такі ж, які «Агенти крові» використовують в інших проєктах, зокрема і в Art Donation. Такий підхід допомагає зберегти певну цілісність візуального стилю. Однакові шрифти і на логотипі «Агентів крові», і в інших різних проєктах ніби об’єднують всі ініціативи благодійників під одним впізнаваним брендом «Агенти крові».

Кольори

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

Комплексне рішення 

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

Slider image
Slider image
Slider image
Slider image
Slider image

Перші результати

Олена Балбек, засновниця ГО «Агенти крові»:

Мені здається, айдентика спрацювала. Хоча вона зовсім не про кров, втім проміжні результати чергувань показують — віжуали помітні, вони привертають увагу й заохочують приєднуватися до проєкту.

Ще кілька слів про рішення, які обрали ANGRY. По-перше, вони за межами моди, тобто будуть актуальними довгі роки. По-друге, приємно, що ми так точно влучили у Pantone 2022 року. Вибір Pantone вкотре підтвердив, чарівність — актуальна тема для багатьох.

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