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

Core Designer Wirex Віталій Дуленко поділився досвідом як продуктове мислення допомогло розробити продукт Wirex Business. А ще списком книг, які допомагають розібратись, як насправді думає користувач.

Стрімке зростання і розвиток фінтех-ринку супроводжується не тільки технологічними інноваціями, але і розвитком дизайн-рішень. Із сотні фінансових продуктів користувач обирає той, чий додаток є максимально зручним і легким для використання. Довіру і лояльність користувачів завойовують продуктові дизайнери, які беруть за основу Product Thinking — продуктове мислення.

Product Thinking — це цілісний підхід до розробки продукту, який ґрунтується на потребах користувача і його досвіді використання продукту. Ключове тут слово — цілісність. Адже наш мозок влаштований так, що він сприймає все у комплексі, вибудовуючи взаємозв’язки між елементами та формуючи загальну картину. Користувач взаємодіє не з окремим екраном або кнопкою, а з усім додатком у цілому, формуючи комплексне враження про нього, як про продукт.

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

Крок 1. Start with Why

Мені пощастило, і я був залучений до створення нового продукту від самого початку, на етапі формування його концепції. Мав повну свободу проводити дослідження, аналіз та формувати концепцію продукту разом з продуктовими аналітиками. Моє перше завдання як дизайнера було сформувати чітке «навіщо» — навіщо потрібен Wirex Business? Навіщо він користувачам, які проблеми він має вирішити?

Я використовував методологію 5 Whys, щоб дійти до базової проблеми користувачів і бізнесу:

• Навіщо наш продукт користувачам?
• Щоб швидко і зручно здійснювати платежі, пов’язані з бізнесом.
• Навіщо їм це потрібно?
• Сучасна банківська система застаріла, вона ненадійна і повільна. Рішення на базі блокчейну дозволить проводити операції швидко, надійно й прозоро.
• Навіщо це потрібно користувачам?
• Бізнес працює по всьому світу. Постачальники можуть бути в одній країні, а споживачі — в іншій. Потрібна можливість швидко і комплексно вирішувати всі бізнес-потреби за допомогою однієї програми.

Питання «навіщо?» дозволяють дійти від простого «щоб здійснювати платежі» до глибших потреб користувача.

Щоб дізнатися більше про конкретні вимоги клієнтів до додатка, я провів кілька опитувань, а також досліджував запити у твіттері за запитом #banking #hate. Я люблю вивчати відгуки у твіттері. Якщо читати між рядків — не те, що написав користувач, а те, що він хотів цим сказати — можна отримати цінні інсайди про потреби користувачів, про які вони не скажуть під час інтерв’ю. Крім того, я провів аналіз конкурентів, як стосовно набору функціоналу, так і стосовно того, як вони подають себе як продукт.

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

У результаті першого етапу ми отримали чітке розуміння, що ми робимо і навіщо. Тепер можна думати над тим, як це зробити. Найважливіше — ми отримали певні гіпотези про те, що потрібно нашим користувачам, на основі яких ми надалі валідували ті чи інші дизайн-рішення.

За результатами досліджень, одним з найважливіших показників для підприємців було розуміння поточного стану їхнього бізнесу. Ми це сформулювали у вигляді питання, яким задається власник бізнесу, заходячи в додаток — «How is my business today?». Ми не можемо допомогти користувачеві заробляти більше або побудувати успішний бізнес, що є їхньою кінцевою потребою. Але ми можемо допомогти контролювати та ефективно керувати фінансовими ресурсами бізнесу, що є однією зі складових успішного підприємництва. Сюди входить можливість легко бачити поточний баланс, його зміну, транзакції, які вимагають уваги (оплатити, підтвердити, відхилити, нагадати контрагентам про переказ), здійснювати платежі та ін.

Тобто я думав про інтерфейс не на рівні «Куди поставити цю кнопку?», а на рівні «Користувачам треба бачити стан платежів, щоб ефективно контролювати потік коштів. Як це зробити найкращим чином?».

Крок 2. Створюємо сценарії використання

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

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

Registration -> Verification -> Add Funds -> Make Transfer

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

Крок 3. Будуємо journey maps і карту додатку

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

Клікніть, щоб побачити зображення повністю

За допомогою схематичної послідовності ми вибудовуємо і з’єднуємо призначені для користувача дії в одне ціле (звідки і куди) і продумуємо стани (а що якщо?). Уже на цьому етапі можна побачити основні зв’язки важливі для бізнесу, яким варто приділити увагу. Наприклад, тут користувачеві треба зробити певний вибір (як це краще організувати?), тут ввести дані (як це зробити зручно?). Також важливо виділити патерни, що повторюються.

Journey maps допомогли детально опрацювати кожен флоу, враховуючи цілі, думки, бажання і емоції користувача на кожному етапі.

Клікніть, щоб побачити зображення повністю

Крок 4. Проєктуємо інтерфейс

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

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

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

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

Крок 5. Тестуємо і перевіряємо гіпотези

Ми запустили Wirex Business в тестовому режимі, що дозволило нам отримувати зворотний зв’язок від користувачів та проводити опитування. На основі отриманих даних ми перевіряли наші початкові гіпотези та метрики, і у разі необхідності вносили зміни. Такі відгуки, як наприклад «The interface is too user friendly», підтримували нас в нашому прагненні створити відмінний продукт.

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

#Reading list. Рекомендації від автора:

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

1. The Design of Everyday Things, Don Norman — вічна класика про дизайн, з яким ми взаємодіємо щодня.
2. Don’t Make Me Think, Steve Krug — проста та ефективна відповідь на запитання «Що потрібно користувачеві?».
3. Thinking, Fast and Slow, Daniel Kahneman — сучасний підхід до розуміння мислення людини та когнітивних помилок.
4. Nudge, Richard Thaler — економісти — кращі друзі дизайнерів, коли справа доходить до архітектури вибору.
5. The Art of Systems Thinking: Essential Skills for Creativity and Problem Solving, Joseph O’Connor — навчила бачити у всьому системи, намагатися розібратися в тому, як вони працюють і як ними керувати.

Фото каверу на Facebook: paad / iStock