Доброзичливий дизайн і мільйон нових користувачів: рік експериментів в Яндекс.Гроші

Яндекс.Гроші продовжують масштабний редизайн сервісу, започаткований два роки тому — про перші результати ми докладно розповідали на Хабре. Зворотний зв'язок, отриманий за цей час від спільноти і постійних користувачів, підтвердила нашу гіпотезу: щоб зробити сервіс зручним для нової аудиторії, потрібно частіше повторювати мантру «я нерепрезентативен» і дивитись на прилади.

У цьому пості я розповім, як за допомогою серії експериментів ми допомогли дизайнерам продуктів перейти від парадигми «удосконалюй» до циклу «експериментуй з новим → виміряй → повтори».

Перед тим, як заглибитися в теорію, пропоную всім читачам наочний експеримент: на картинці нижче — два варіанти форми введення даних карти. Спробуйте вгадати, який з них дає велику конверсію. Правильна відповідь — в тексті. До речі, таку гру ми проводимо всередині компанії після кожного експерименту — і в середньому 75% колег не вгадують правильний.

imageimage

Невеликий історичний відступ: Яндекс.Гроші існують з 2002 року, і перші десять років — тобто більшу частину життя — наша аудиторія була дуже схожа на аудиторію Хабра: досвідчені інтернет-користувачі, які працюють в IT та суміжних галузях. Навіть якщо потрібну дію заховати в чотири кліка від головної сторінки (так робити, звичайно, не треба) вони впораються, тому що прийшли в сервіс з чіткою метою і сильною мотивацією.

На початку 2010-х аудиторія інтернет-платежів стрімко змінилася: офісні працівники і домогосподарки оплачують в інтернеті рахунку та замовляють доставку продуктів, школярі замість обідів витрачають кишенькові гроші на покупку ігрових цінностей, їх батьки скидаються в вотсаппе на витрати в школі і дитячому садку, благодійники використовують гаманці для збору пожертвувань і т. д. Рівень інтернет-грамотності, вік, звички у «новеньких» сильно відрізняються. А ще зовсім новий тип мотивації і дослідження сервісів: в опитуваннях відвідувачів сайту Яндекс.Грошей на питання «навіщо?» ми все частіше отримуємо відповідь: «просто так, без всякої мети, з цікавості».

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

Сервіс повинен був з порога говорити: тут все легко і зрозуміло, тут безпечно і можна оплатити все, що потрібно, одним або іншим зручним способом. Пріоритетом ми вирішили зробити самі затребувані широкими масами продукти, а інші додавати поступово і ненав'язливо. Як це досягти на рівні продукту?

— сфокусувати інтерфейс на цільовому дії;
— писати короткі і ємні тексти;
— прибрати все, що не відноситься до цільового дії;
— додати те, що допоможе швидко і легко освоїтися на сервісі.

Експерименти з реалізацією нових пріоритетів ми тестували на різних сторінках, я детально розповім про перших двох, які безпосередньо визначають якість онбординга:

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

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

Крок перший: «морда» повинна бути красивою, а контрастною


Новичковая морда в 2013 році


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

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


Проміжна версія новічкова морди в 2015 році — «лісова»

Ті, хто потрапив на експеримент з лісової мордою, при зустрічі брали мене за рукав і питали, ніж глибокий зміст образу, чому саме ліс. Глибокого сенсу немає: ми тестували кілька випадкових контрастних фонів, і цей виявився найбільш ефективним. Після першого експерименту конверсія з реєстрації гаманця подальше використання (поповнення, прив'язка карти і платежі) зросла на 8%.

Ми продовжили допілівать сторінку з допомогою мультиваріантного тестування: змінилася картинка, основний блок мотиваторів став компактніше, додалися піктограми соцмереж і опції для бізнесу. Це позначилося на зростанні іншого показника — конверсії реєстрацію, яка збільшилася на 6%.


Результат — нинішня «новичковая морда»


Крок другий: оживляюча морда — покажіть, куди натиснути

Перша сторінка Яндекс.Грошей, яку бачать користувачі, тільки що відкрили гаманець, виглядала до редизайну ось так:



Проаналізувавши поведінку користувачів, ми виявили в цієї сторінки три недоліки:

1. Функціональний: вона повідомляла про наступні кроки, але не давала їх зробити — для кожного потрібно перейти на наступну сторінку.
2. Композиційний: на сторінці було 50 різнокольорових посилань, зображень і дуже багато тексту — важко сфокусуватися.
3. Мотиваційний: новачкові не зрозуміло з порога, навіщо робити все, що йому пропонувалося на цій сторінці.

Нову оживляющую морду ми проектували з нуля. У фокусі були два цільових дії: 1) поповнити гаманець і 2) відразу сплатити потрібну послугу.

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


Перший варіант «оживляючої морди»


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


Одна з версій екрану з «паранджею» і підказками


Після цього оживаемость, тобто платіжна активність після реєстрації гаманця, зросла на 7%.

Далі ми протестували шість варіантів вмісту «оживляючої морди» при першому візиті на неї:

1. перша вкладка — карта точок поповнення офлайн
2. перша вкладка — поповнення гаманця з банківської карти
3. перша вкладка — товари і послуги, які можна оплатити на сайті.

Кожен варіант тестувався і з «паранджею» і без неї.

Найкращі показники оживаемости і поповнення гаманців були у варіанта 3 з «паранджею» і іконками-логотипами популярних сервісів, які можна оплатити.



Ми прийшли до висновку: бачачи «товар обличчям», користувачі набагато активніше переходили на сусідні вкладки — поповнити гаманець і прив'язати банківську карту: оживаемость зросла майже 10%. Крім того, люди стали більше цікавитися іншими можливостями сервісу — ми спостерігали помітне зростання випуску банківських карт Яндекс.Грошей та ідентифікацій рахунку.

Крок третій: UX-лабораторія — як люди думають насправді

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

І виявили, що багато в чому помилялися — ось кілька прикладів:

— в якості одного з мотиваторів на новічкова морді ми говорили користувачеві про знижки та бонуси, доступних власникові гаманця, але на оживляючої про них ні слова не було
— паранджа повідомляла користувачеві, що до гаманця можна прив'язати банківську картку і сплачувати прямо з неї, але знайти прив'язку в інтерфейсі було складно;
— величезні кнопки «Поповніть рахунок» і «Відразу платите і переводите» не сприймалися як кнопки — люди не розуміли, що на них можна клікнути;
— в міні-каталозі послуг були тільки найбільш популярні категорії платежів, але користувачі сприймали його як повний — відразу не знайшовши того, що шукали, вони йшли;



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

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

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



Коли ми тестували форму введення даних картки, виникла суперечка, яка краще: подвійна або одинарна. Перевіривши, ми виявили, що людям зручніше використовувати подвійну форму, тому що в житті дійсно потрібно перевернути карту, щоб побачити CVV: у подвійної форми в конверсія була максимальна — в середньому вона збільшилася на 3%. Це і відповідь на запитання, яке я поставив на початку.


Варіант 1: одинарна форма


Варіант 2: подвійна форма


У третій ітерації ми експериментували з різними варіантами міні-каталогу сервісів, які можна оплатити в гаманці.


Варіант 1: тільки постачальники



Варіант 2: багато постачальників та сервісів



Варіант 3: категорії послуг та знижки

Переміг останній варіант, який відразу давав зрозуміти, що на сайті сервісу можна заплатити за самий широкий набір послуг.

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

Всього на повну переробку онбординга — від першої сторінки, зустрічає нового користувача, до першого платежу — пішов рік. В результаті сервіс став зустрічати користувачів тепліше — більш таргетовано, менш багатослівно і більш зрозуміло. І користувачі платять нам взаємністю.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.