Онбординг для банка

В апреле 2016 года сайт Tinkoff.ru превратился в финансовую платформу. Проще говоря, в единый платежный сервис — как для клиентов банка, так и для тех, у кого еще нет карты «Тинькофф». Как это работает, можно увидеть в разделе «Платежи».

Одна платформа для всех — для не-клиентов и клиентов. У последних, естественно, помимо форм оплаты есть и все традиционные для интернет-банков возможности: управление счетами и картами, отчеты об операциях, автоплатежи и т. д.

С точки зрения функций в платформе не было революционных изменений. Это и логично, набор банковских услуг всегда более-менее стандартный. А вот визуальные отличия существенные. Для сравнения: одна из предыдущих версий онлайн-банка выглядела так.

«Тинькофф Банк» пришел к нам в разгар работы над платформой и попросил придумать, как безболезненно перевести пользователей предыдущих версий интернет-банка на новую платформу и помочь им сориентироваться в изменившемся интерфейсе. Это называется онбординг.

Процесс

Мы собрали и изучили всё, до чего смогли дотянуться: предыдущие версии интернет-банка, скриншоты новой платформы, описание прототипов, структурные схемы…

Чтобы лучше уяснить контекст проекта, почитали статьи «Тинькофф Банка» на Хабре.

Работали параллельно. Пока аналитик вникал в отличия и продумывал логику, проектировщик набрасывал варианты вывода подсказок.

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

Тур с «выключенным» светом при первом посещении платформы. Так можно рассказать пользователям о новой структуре страницы.

Возможно, экскурсию надо проводить не по всему интерфейсу, а по отдельным функциям. Предусмотрим и такой вариант.

Что если команда «Тинькофф Банка» снимет скринкаст или даже игровой видеоролик о новых возможностях?

Прикинули, как это будет выглядеть в мобильной версии.

Предыдущие варианты — это своего рода экскурсия при первом визите. Более интересным кажется вариант выдавать подсказки по мере того, как пользователь взаимодействует (или, наоборот, не взаимодействует) с интерфейсом. Это также могут быть слайдеры.

И самый минималистичный вариант для коротких точечных подсказок.

В итоге остановились на двух решениях. При первом посещении проведем тур из трех шагов (больше — утомительно) для знакомства с изменившейся структурой страницы, а дальше будем использовать точечные подсказки.

Аналитика

Главная сложность — многообразие вариантов. Фактически у нас было три категории пользователей.

Сначала мы разобрались в принципиальных отличиях версий.

Затем задались контекстами. Человек не заходит в интернет-банк просто так. Ему надо заплатить за телефон, проверить остаток на счете или выполнить какую-то новую для себя операцию.

Уже на этапе аналитики появились первые версии подсказок. Дальше — отшлифовать текст и логику.

Логика и тексты

Часть подсказок мы решили показать при первом посещении нового интернет-банка. Сами подсказки будут разными для новичка и для пользователей одной из предыдущих версий.

Бо́льшую часть подсказок мы выводим в зависимости от контекста. И не все разом, а согласно приоритетам. Часть подсказок привязана к конкретным действиям. Например, оплата услуги.

А еще пользователь сам может попросить подсказку. Классический вариант с вопросиком.

«Тинькофф Банк» в узких кругах известен своим перфекционизмом по отношению к текстам. Мы, кстати, тоже. И хотя наше представление о том, какой текст считать идеальным, отличается от мнения редакции банка, не было никаких конфликтов.

Над текстом каждой подсказки работало пять человек. Трое с нашей стороны, двое — со стороны банка. Делать это в прототипах было неудобно, обсуждали и исправляли в таблицах Google.

Финальный результат — прототипы, которые вы уже видели, и все те же подсказки в одном документе, чтобы коллегам было проще внедрять онбординг.

Проект был не такой линейный, как может показаться из кейса. Но легкой жизни нам никто не обещал, легко должно стать пользователю. И стало — подсказки появились, мы их видели своими глазами.