---
publishYear: 2015
name: Tinkoff
title: Онбординг для банка
excerpt: Разработали логику вывода подсказок в новом банк-клиенте.
context: «Тинькофф Банк» сделал новую версию онлайн-банка. Она заметно отличается от двух предыдущих, и нужно помочь клиентам сориентироваться в изменившемся интерфейсе. И «Тинькофф» пришел к нам за онбордингом для банка.
logo:
src: ~/assets/images/portfolio/tinkoff/logo.svg
alt: Tinkoff logo
link: https://www.tbank.ru/
image: ~/assets/images/portfolio/tinkoff/tinkoff.jpg
imageAlt: Онбординг для банка
thumbnail:
src: ~/assets/images/portfolio/cards/tinkoff.svg
alt: Собака Павлова • Тинькофф • Дизайн онбординга для банка
tags:
- fin
- redesign
- content-design
- mass
tags2:
- Финансы
- Дизайн онбординга
- Банковский интерфейс
- Дизайн сложных интерфейсов
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[Дизайн контента](/services/content-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: content-design
- text: |
### Хотите уметь так же?
Научим писать хорошие тексты и делать хорошие интерфейсы.
collection: promo
page: txt
- collection: promo
page: mio
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: qiwi
- collection: portfolio
page: alfastrah-design
- collection: portfolio
page: monetory
- collection: portfolio
page: alfa-arm
- collection: portfolio
page: alfastrahhr
- collection: portfolio
page: opendesk
- collection: portfolio
page: sberbank
- collection: portfolio
page: inbank
- collection: portfolio
page: otkritie
- collection: portfolio
page: alfabank
result:
- src: ~/assets/images/portfolio/png.png
text: Финальный дизайн онбординга
link: https://drive.google.com/open?id=1R61bb5DdolpIU3fbpa8JEQ0GAqiPRCi4
- src: ~/assets/images/portfolio/doc.png
text: Гайдлайны по подсказкам
link: https://drive.google.com/open?id=15E9vwarYqakp4Lv3Hxj6nnE9UprSqHf-
budget: ~ 750 000 ₽
director: Ненавязчивый онбординг помог клиентам безболезненно перейти на новую версию сайта.
review:
text: Проектирование и копирайтинг выполнены на достаточном уровне. Логику взаимодействия вы продумали неплохо.
photo: ~/assets/images/portfolio/tinkoff/person.jpg
person: Евгений Клейменов
position: Руководитель отдела интернет-проектов
metadata:
canonical: https://sobakapav.ru/portfolio/tinkoff
title: Банковский интерфейс • Онбординг для банка Tinkoff
description: "Разработали онбординг пользователей и логику вывода подсказок в новой версии дизайна банка-клиента."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/tinkoff/tinkoff.jpg'
width: 1520
height: 1220
type: website
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Онбординг для банка](#anchor1) • [Плюсы и минусы](#anchor2) • [Дизайн-процесс](#anchor3) • [Концептуальное проектирование](#anchor4) • [Аналитика](#anchor5) • [Логика и тексты онбординга](#anchor6) • [Результат](#anchor7) • [Отзыв, цены, сроки](#anchor8)
</TOC>
## <a name="anchor1" />Онбординг для банка
В апреле 2016 года сайт [Tinkoff.ru](http://www.tinkoff.ru/) превратился в финансовую платформу. Проще говоря, в единый платежный сервис — как для клиентов банка, так и для тех, у кого еще нет карты «Тинькофф». Как это работает, можно увидеть в разделе [«Платежи»](https://www.tinkoff.ru/payments/).
_Заплатить за квартиру и проверить штрафы можно без регистрации_
Одна платформа для всех — для не-клиентов и клиентов. У последних, естественно, помимо форм оплаты есть и все традиционные для интернет-банков возможности: управление счетами и картами, отчеты об операциях, автоплатежи и т. д.
_Основная часть экрана отдана под дашборд и ленту операций. Справа есть еще панель с картами и счетами, вы увидите ее на других скриншотах_
С точки зрения функций в платформе не было революционных изменений. Это и логично, набор банковских услуг всегда более-менее стандартный. А вот визуальные отличия существенные. Для сравнения: одна из предыдущих версий онлайн-банка выглядела так.
_Плашка в верхней части экрана ненавязчиво предлагает перейти на новую версию. Пока что добровольно_
«Тинькофф Банк» пришел к нам в разгар работы над платформой и попросил придумать, как безболезненно перевести пользователей предыдущих версий интернет-банка на новую платформу и помочь им сориентироваться в изменившемся интерфейсе. Это называется онбординг.
## <a name="anchor2" />Плюсы и минусы
>+ **Профессиональный заказчик**
>Заведомо адекватное отношение к процессу, рискам и потенциальным проблемам.
>+ **Ну это же «Тинькофф»**
>Было интересно посмотреть, как устроен изнутри «самый онлайновый» банк России.
>- **Сроки**
>Работа над платформой уже заканчивалась. Для нас это означало — бросить все и бежать проектировать.
>- **Все в процессе**
>Мы можем оценить новый интернет-банк только по картинкам. Придется угадывать и уточнять, как работает каждая кнопка, куда ведет тот или иной пункт меню.
## <a name="anchor3" />Дизайн-процесс
Мы собрали и изучили всё, до чего смогли дотянуться: предыдущие версии интернет-банка, скриншоты новой платформы, описание прототипов, структурные схемы…
_Фрагмент карты платформы «Тинькофф Банка»_
Чтобы лучше уяснить контекст проекта, почитали статьи «Тинькофф Банка» на Хабре.
- [«Часть команды, часть корабля»](http://habrahabr.ru/company/tcsbank/blog/251103/) про разработку текущей версии.
- [«Новый интернет-банк Тинькофф Кредитные Системы»](http://habrahabr.ru/company/tcsbank/blog/147786/) про старую (пусть вас не смущает название статьи) версию.
- [«Секреты тестирования интерфейсов в ТКС Банке».](http://habrahabr.ru/company/tcsbank/blog/196632/)
- [«Повышаем стабильность Front-end».](http://habrahabr.ru/company/tcsbank/blog/251421/)
Работали параллельно. Пока аналитик вникал в отличия и продумывал логику онбординга, проектировщик набрасывал варианты вывода подсказок.
## <a name="anchor4" />Концептуальное проектирование
Текстовый слайдер в верхней части страницы. С его помощью можно рассказать о чем угодно, да еще и не ограничиваясь объемом.
_Слайдер в верхней части экрана с текстовыми подсказками_
Тур с «выключенным» светом при первом посещении платформы. Так можно рассказать пользователям о новой структуре страницы.
_При выводе подсказки страница затемняется, в фокусе остается только то, о чем идет речь_
Возможно, онбординг-экскурсию надо проводить не по всему интерфейсу банка, а по отдельным функциям. Предусмотрим и такой вариант.
_Аналогичная фокусировка, только уже на отдельных функциях_
Что если команда «Тинькофф Банка» снимет скринкаст или даже игровой видеоролик о новых возможностях?
_Если видео, то ни в коем случае оно не должно открываться само. Только по клику на ссылку «Встречайте новый интернет-банк»_
Прикинули, как онбординг будет выглядеть в мобильной версии банка.
Предыдущие варианты — это своего рода экскурсия при первом визите. Более интересный вариант онбординга: выдавать подсказки по мере того, как пользователь взаимодействует (или, наоборот, не взаимодействует) с интерфейсом банка. Это также могут быть слайдеры.
_Боковой слайдер с несколькими подсказками и ссылкой на подробное описание_
И самый минималистичный вариант для коротких точечных подсказок.
_Короткая подсказка без заголовка и ссылки на подробности_
В итоге остановились на двух решениях. При первом посещении интернет-банка проведем онбординг-гтур из трех шагов (больше — утомительно) для знакомства с изменившейся структурой страницы, а дальше будем использовать точечные подсказки.
## <a name="anchor5" />Аналитика
Главная сложность — многообразие вариантов. Фактически у нас было три категории пользователей.
1. Совсем новички, которые не видели старых интерфейсов.
2. Пользователя предыдущей версии.
3. Пользователи еще более старой версии.
Сначала мы разобрались в принципиальных отличиях версий.
_[Сравнительная таблица интерфейсов](https://drive.google.com/open?id=16rRwvgXoy1kX66AyNUD5VBj9gE7Z5C6a)_
Затем задались контекстами. Человек не заходит в интернет-банк просто так. Ему надо заплатить за телефон, проверить остаток на счете или выполнить какую-то новую для себя операцию.
_Чтобы подсказки были полезными и уместными, нужно задаться контекстом_
[Жизненные ситуации](https://drive.google.com/open?id=1VChh9p0fo0SgkWj_fxRxsnb-D4KmpxVQ)
Уже на этапе аналитики появились первые версии подсказок. Дальше — отшлифовать текст и логику.
## <a name="anchor6" />Логика и тексты
Часть онбординга мы решили показать при первом посещении нового интернет-банка. Сами подсказки будут разными для новичка и для пользователей одной из предыдущих версий.
_Подсказки_
Бо́льшую часть подсказок мы выводим в зависимости от контекста. И не все разом, а согласно приоритетам. Часть подсказок привязана к конкретным действиям. Например, оплата услуги.
_Подсказка выбирается в зависимости от того, что сделал пользователь_
А еще пользователь сам может попросить подсказку. Классический вариант с вопросиком.
_Некоторые подсказки показываются при наведении на знак вопроса_
«Тинькофф Банк» в узких кругах известен своим перфекционизмом по отношению к текстам. Мы, кстати, тоже. И хотя наше представление о том, какой текст считать идеальным, отличается от мнения редакции банка, не было никаких конфликтов.
Над текстом каждой подсказки работало пять человек. Трое с нашей стороны, двое — со стороны банка. Делать это в прототипах онбординга было неудобно, обсуждали и исправляли в таблицах Google.
_Работа над текстами подсказок_
## <a name="anchor7" />Результат
[Финальный результат](https://drive.google.com/file/d/15E9vwarYqakp4Lv3Hxj6nnE9UprSqHf-/view) — прототипы, которые вы уже видели, и все те же подсказки в одном документе, чтобы коллегам было проще внедрять онбординг в интерфейс банка.
_Финальный результат. Таблица с текстами подсказок, приоритетами и условиями_
Проект был не такой линейный, как может показаться из кейса. Но легкой жизни нам никто не обещал, легко должно стать пользователю. И стало — подсказки появились, мы их видели своими глазами.
_Новая версия интернет-банка появилась сразу с нашим онбордингом_
## <a name="anchor8" />