sobaka@pavlova.cc
+7 (812) 320-57-87

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

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

Разработали логику вывода подсказок в новом банк-клиенте.
Контекст
Результат
2015
~ 600 000 ₽
Бюджет
В апреле 2016 года сайт Tinkoff.ru превратился в финансовую платформу. Проще говоря, в единый платежный сервис — как для клиентов банка, так и для тех, у кого еще нет карты «Тинькофф». Как это работает, можно увидеть в разделе «Платежи».
Оплата штрафа и квартиры без регистрации | Sobakapav.ru
Заплатить за квартиру и проверить штрафы можно без регистрации
Одна платформа для всех — для не-клиентов и клиентов. У последних, естественно, помимо форм оплаты есть и все традиционные для интернет-банков возможности: управление счетами и картами, отчеты об операциях, автоплатежи и т. д.
Дашборд и лента операций  | Sobakapav.ru
Основная часть экрана отдана под дашборд и ленту операций. Справа есть еще панель с картами и счетами, вы увидите ее на других скриншотах
С точки зрения функций в платформе не было революционных изменений. Это и логично, набор банковских услуг всегда более-менее стандартный. А вот визуальные отличия существенные. Для сравнения: одна из предыдущих версий онлайн-банка выглядела так.
Добровольное приглашение на тестовую версию нового кабинета | Sobakapav.ru
Плашка в верхней части экрана ненавязчиво предлагает перейти на новую версию. Пока что добровольно
«Тинькофф Банк» пришел к нам в разгар работы над платформой и попросил придумать, как безболезненно перевести пользователей предыдущих версий интернет-банка на новую платформу и помочь им сориентироваться в изменившемся интерфейсе. Это называется онбординг.
Профессиональный заказчик
+
Заведомо адекватное отношение к процессу, рискам и потенциальным проблемам.
Было интересно посмотреть, как устроен изнутри «самый онлайновый» банк России.
Ну это же «Тинькофф»
+
-
-
Работа над платформой уже заканчивалась. Для нас это означало — бросить все и бежать проектировать.
Сроки
Мы можем оценить новый интернет-банк только по картинкам. Придется угадывать и уточнять, как работает каждая кнопка, куда ведет тот или иной пункт меню.
Все в процессе
Процесс
Погружение
Мы собрали и изучили всё, до чего смогли дотянуться: предыдущие версии интернет-банка, скриншоты новой платформы, описание прототипов, структурные схемы…
Часть карты платформы, используемая при погружении в проект | Sobakapav.ru
Фрагмент карты платформы «Тинькофф Банка»
Чтобы лучше уяснить контекст проекта, почитали статьи «Тинькофф Банка» на Хабре.
Работали параллельно. Пока аналитик вникал в отличия и продумывал логику, проектировщик набрасывал варианты вывода подсказок.
Концептуальное проектирование
Текстовый слайдер в верхней части страницы. С его помощью можно рассказать о чем угодно, да еще и не ограничиваясь объемом.
Слайдер с подсказками в верхней части интерфейса | Sobakapav.ru
Слайдер в верхней части экрана с текстовыми подсказками
Тур с «выключенным» светом при первом посещении платформы. Так можно рассказать пользователям о новой структуре страницы.
Всплывающая подсказка затемняет фон | Sobakapav.ru
При выводе подсказки страница затемняется, в фокусе остается только то, о чем идет речь
Возможно, экскурсию надо проводить не по всему интерфейсу, а по отдельным функциям. Предусмотрим и такой вариант.
Фиксация фокуса на отдельных моментах | Sobakapav.ru
Аналогичная фокусировка, только уже на отдельных функциях
Что если команда «Тинькофф Банка» снимет скринкаст или даже игровой видеоролик о новых возможностях?
Использование видео без автоматического проигрывания | Sobakapav.ru
Если видео, то ни в коем случае оно не должно открываться само. Только по клику на ссылку «Встречайте новый интернет-банк»
Прикинули, как это будет выглядеть в мобильной версии.
Тестовый мобильный вариант интерфейса | Sobakapav.ru
Предыдущие варианты — это своего рода экскурсия при первом визите. Более интересным кажется вариант выдавать подсказки по мере того, как пользователь взаимодействует (или, наоборот, не взаимодействует) с интерфейсом. Это также могут быть слайдеры.
Слайдер с подсказками и ссылкой на подробное описание | Sobakapav.ru
Боковой слайдер с несколькими подсказками и ссылкой на подробное описание
И самый минималистичный вариант для коротких точечных подсказок.
Подсказки без ссылок и заголовка | Sobakapav.ru
Короткая подсказка без заголовка и ссылки на подробности
В итоге остановились на двух решениях. При первом посещении проведем тур из трех шагов (больше — утомительно) для знакомства с изменившейся структурой страницы, а дальше будем использовать точечные подсказки.
Аналитика
Главная сложность — многообразие вариантов. Фактически у нас было три категории пользователей.
  1. Совсем новички, которые не видели старых интерфейсов.
  2. Пользователя предыдущей версии.
  3. Пользователи еще более старой версии.
Сначала мы разобрались в принципиальных отличиях версий.
Затем задались контекстами. Человек не заходит в интернет-банк просто так. Ему надо заплатить за телефон, проверить остаток на счете или выполнить какую-то новую для себя операцию.
Google Docs
Чтобы подсказки были полезными и уместными, нужно задаться контекстом
Уже на этапе аналитики появились первые версии подсказок. Дальше — отшлифовать текст и логику.
Логика и тексты
Часть подсказок мы решили показать при первом посещении нового интернет-банка. Сами подсказки будут разными для новичка и для пользователей одной из предыдущих версий.
Подсказки при онбординге | Sobakapav.ru
Бо́льшую часть подсказок мы выводим в зависимости от контекста. И не все разом, а согласно приоритетам. Часть подсказок привязана к конкретным действиям. Например, оплата услуги.
Всплывающие подсказки, зависящие от действия пользователя | Sobakapav.ru
Подсказка выбирается в зависимости от того, что сделал пользователь
А еще пользователь сам может попросить подсказку. Классический вариант с вопросиком.
Подсказки, всплывающие при наведении на знак вопроса | Sobakapav.ru
Некоторые подсказки показываются при наведении на знак вопроса
«Тинькофф Банк» в узких кругах известен своим перфекционизмом по отношению к текстам. Мы, кстати, тоже. И хотя наше представление о том, какой текст считать идеальным, отличается от мнения редакции банка, не было никаких конфликтов.
Над текстом каждой подсказки работало пять человек. Трое с нашей стороны, двое — со стороны банка. Делать это в прототипах было неудобно, обсуждали и исправляли в таблицах Google.
Обсуждение текстов подсказок | Sobakapav.ru
Финальный результат — прототипы, которые вы уже видели, и все те же подсказки в одном документе, чтобы коллегам было проще внедрять онбординг.
Список подсказок и их приоритетов | Sobakapav.ru
Проект был не такой линейный, как может показаться из кейса. Но легкой жизни нам никто не обещал, легко должно стать пользователю. И стало — подсказки появились, мы их видели своими глазами.
Новая весрия интерфейса банка с внедренным онбордингом | Sobakapav.ru
Новая версия интернет-банка появилась сразу с нашим онбордингом

«Проектирование и копирайтинг выполнены на достаточном уровне. Логику взаимодействия вы продумали неплохо».

Ненавязчивый онбординг помог клиентам безболезненно перейти на новую версию сайта.

Евгений Клейменов
Руководитель отдела интернет-проектов
Результат
~ 600 000 ₽
Бюджет
Другие кейсы
Made on
Tilda