Registration
Задача
Оптимізувати процес реєстрації, враховуючи результати досліджень та отриманий зворотній звʼязок від клієнтів. Головною метою було скорочення часу, необхідного для завершення реєстрації, та підвищення рівня інтуїтивної зрозумілості цього процесу для користувачів.
Інструменти
Figma, Adobe After Effects
Рік
2023
Моя роль
UX/UI дизайн, дослідження, аналіз даних, прототипування, юзабіліті-тестування, розробка матеріалів для анімації.
Флоу
Всі ці процеси були проаналізовані на базі результатів досліджень та отриманого зворотнього звʼязку від клієнтів. Кожен з цих процесів був покращений або перероблений зовсім, як за логікою так і за UI. Була проведена комплексна робота з поліпшення екранів у співпраці з UX-райтером, юристами, розробниками, продактами.
Проблеми
Відсутність знайомства
Немає можливості ознайомитися із застосунком та продуктами, що пропонує банк. Гарною практикою вважається дати потенційним користувачам якусь цінність під час першого візиту.
Незрозуміле введення номеру
Клієнт для входу вводить номер який не зареєстровано. Не можна вставити скопійований номер телефону. Не відображає курсор, а просто вивалює цифрову клаву. Без курсору неможливо змінити положення початку вводу, тому якщо я помилився в мене немає можливості самостійно виправити помилку без ресету системи.
Введення коду
Слабкий контраст. Користувачі не розуміють куди приходить код.
Замовлення дзвінка
Незрозуміло, які саме цифри потрібно вводити. Часто вводять останні чотири цифри номера, з якого здійснюється дзвінок, хоча потрібно вводити ті що диктує автовідповідач.
Перелік дій після введення номера
По-перше, цей опис не охоплює всіх подальших гілок реєстрації. По-друге, він не містить жодної конкретної інформації щодо документів, даних тощо.
Введення номера
Крок 1
Крок 2
Гайд
Рішення
Реєстрація та вхід
Розділяємо флоу на 2 гілки - реєстрацію та вхід. Якщо клієнт захоче увійти за номером, який не зареєстровано, йому буде зрозуміло, що робити далі. Додано слайдер-сторіз для ознайомлення нових користувачів із банком.
Введення номеру робимо зрозумілим
Для поля вводу використовуємо базовий елемент, який інтуїтивно зрозумілий користувачеві. Додаємо маску номера телефону для спрощення введення. Завдяки цьому рішенню з'являється весь функціонал, до якого були зауваження (зміна положення курсору, вставка номера телефону, повна очистка поля і т. д.).
Введення коду
Використовуємо стандартні поля вводу, як і на попередньому екрані. В пріоритеті - використання СМС-повідомлення, що майже повністю усуває ризик відсутності нотифікації, а також надає можливість автоматичного введення коду.
Замовлення дзвінка
В заголовку пишемо потрібну дію. Додаємо анімацію, яка ілюструє процес запиту дзвінка.
Перелік дій після введення номера
Прибираємо екран, який не виконує жодної функції для користувача.
Welcome Guide
Крок 1
Крок 2
Якщо код не прийшов
В результаті роботи було створено флоу з урахуванням всіх можливих помилок та користувацьких кейсів з дописами. Аби дізнатися всі можливі варіанти розвитку шляху юзера була налагоджена тісна співпраця з відділом підтримки клієнтів, юристами, розробниками.
Після реалізації показники позитивної оцінки клієнтів від процесу під час тестування збільшилися на 53%, а зауваження та непорозуміння зникли. Усі тестові клієнти, які розпочали процес реєстрації, без перешкод змогли успішно перейти на наступний етап 🥳.
Фото
Логіка
В результаті співпраці з відділом верифікаторів, юристів та розробників було виявлено процеси, які необхідно покращити. Наприклад, вдалося налагодити автоматичне розпізнання ідентифікаційного коду на ID-картці, щоб не запитувати його у клієнта, якщо він там вказаний. Також був вдосконалений процес автофото, щоб уникнути некоректних знімків, які часто робили клієнти.
Анкета
Дизайн
Елементи полів вводу були змінені згідно з гайдами Material Design. Раніше використовувані поля та випадаючі списки були кастомні, працювали не коректно та були інтуїтивно незрозумілі для користувачів.
Розуміння
В співпраці з UX-райтером та юристами було спрощено назви складних банківських запитань, які завжди викликали у клієнтів нерозуміння. Напевно, можна сказати що всі пункти анкети були переписані.
Логіка
Під час спілкування з верифікаторами та юристами я виявила, що можна прибрати деякі поля з анкети, аби не навантажувати користувача, оскільки цю інформацію можна отримувати автоматично через запит до державних структур. Також я вирішила розділити анкету на 3 групи за типом питань (Дохід, Зайнятість, Особисті дані), оскільки раніше всі ці питання були на одному екрані, що дуже навантажувало користувача. Крім того, була проведена значна робота над дрібницями, такими як підказки та можливість вибору з варіантів замість ручного заповнення та ін.
Інше
Робота над цим розділом проводилась комплексно, тому неможливо розділити її на шматочки. Як і в кейсах вище, була проведена робота над текстами, візуалом та логікою. Найбільшим викликом у цій роботі було виявлення всіх можливих помилок та причин відмов, розробка логіки перенаправлення клієнта за різними сценаріями, визначення етапів, на яких виконуються перевірки даних та пошук можливостей для скорочення часу очікування клієнта на результат.
Але в результаті роботи була створена якісна система, за якою можна відстежувати всі ці шляхи. Кількість екранів очікування та перевірки документів була скорочена з 5 до 2, а швидкість їх опрацювання збільшилася у 2 рази завдяки налагодженню паралельних процесів.
Результат
Стало зрозуміліше
Тестова група мала на 80% менше питань щодо процесу реєстрації.
Стало швидше
Кількість екранів очікування та перевірок була скорочена з 8 до 4, а швидкість їх опрацювання збільшилася у 2 рази завдяки налагодженню паралельних процесів. Завдяки автоматизації процесів, було виключено 4 екрани з флоу. З анкети було прибрано 20% полів для заповнення за рахунок автоматичного отримання інформації. Швидкість проходження реєстрації збільшилася на 34%.
Простіше в реалізації
Ресурс розробників є важливою складовою. Шляхом надання зрозумілого опису за схемою разом з усіма посиланнями та прикладами використання, розробникам стало зручніше працювати. Все це прискорило процес реалізації.
Задоволення
Ніщо так не радує, як успішний результат роботи з позитивними показниками вдосконалення процесів. Величезна кількість виконаної роботи принесла свої плоди і отримала позитивну оцінку від тестової групи користувачів 🥳.
