Редизайн: Как разрабатывалось новое приложение «Тинкофф Банка»

Команда Tinkoff Mobile рассказала AD о том, как проводился редизайн мобильного приложения «Тинькофф Банка», какие задачи ставились и что из этого получилось.

В феврале мы радикально обновили интернет-банк и мобильное приложение. Для банка без отделений и банкоматов это большой и сложный шаг. 90%
наших клиентов обслуживаются через интернет, поэтому мы инвестируем много сил и
средств, чтобы онлайн-каналы были доведены до совершенства.

Было:

Стало:

Предыстория

Последние два года мобильный банк выглядел так:

Эксперты называют предыдущую версию приложения лучшим мобильным банком
на российском рынке. В 2013 и 2014 году это признала крупная аудиторская и
консалтинговая компания
Deloitte. Такую же награду мы получили от российского агентства Markswebb Rank&Report — тоже в 2013 и в 2014 году. А еще нас отмечали Frank Research Group и Synovate Comcon.

Клиенты и эксперты полюбили приложение за функциональность,
которой на тот момент не было у других банков.

Несмотря на признание, мы понимали, что пришло время
радикально обновить приложение — многое изменилось в интерфейсах финансовых сервисов, появились новые технологические возможности, обновился наш
сайт и интернет-банк. Поэтому последние восемь месяцев мы работали над
следующей версией мобильного приложения.

За годы накопились ограничения и условия, о которых стоит
рассказать отдельно.

Информативность

В мире, где царит минимализм, iOS 7 и плоский дизайн, старое приложение
выглядит нагруженным. За годы оно обросло функциями, из-за чего информативность
интерфейса снизилась. В результате клиенты стали тратить лишние секунды на
навигацию и поиск. По этой же причине о других функциях они просто не знали.

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

Чтобы решить эту задачу, мы
поставили перед собой две цели:

Избавиться от избыточных функций и лишней глубины настроек — когда пользователю дано явно больше возможностей, чем нужно.
Избавиться от сценариев, дублирующих друг друга. Раньше некоторые действия можно было
совершить двумя или тремя способами. В новой версии во всех подобных случаях мы
оставили один самый логичный и популярный сценарий совершения действия.

Бизнес

За два года у менеджмента банка сформировался свой список конкретных требований и
пожеланий. Этот список тоже оказал влияние на подход дизайнеров к поиску
решений.

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

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

Аналитика

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

В процессе мы поняли, что некоторые функции были не очень
нужными, а что-то фундаментально важное наоборот нужно вытащить на поверхность. Поэтому новый интерфейс строился с учетом востребованности операции или действия.

Например, экран поиска ближайшего банкомата мы убрали во вспомогательный раздел именно по этой причине.

Еще одним источником данных были моноприложения. Это наши
небольшие мобильные финансовые продукты, которые выполняют одну конкретную
функцию. Например, «Штрафы ГИБДД» и «С карты на карту». В моноприложениях мы тестировали наши интерфейсные гипотезы. Проводили A/B-тесты, которые помогли нам упростить сценарии работы с операциями. Например, так мы узнали, что людям удобнее вводить срок действия карты не с помощью интерфейса выбора даты, а просто цифрами в строчку.

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

Стиль

Раньше приложение и интернет-банк были сделаны в разных стилях:

Нам было важно сделать так, чтобы клиент при взаимодействии с любыми банковскими сервисами (в вебе или в приложении) понимал, что находится
в одной экосистеме. Это помогает тем, кто работает со всеми нашими продуктами,
не теряться при смене экрана. Это в плюс и маркетингу: единство интерфейса улучшает узнаваемость бренда и повышает лояльность
к банку.

Понятно, что просто взять и перенести веб-интерфейс в
телефон нельзя. Люди по-разному пользуются приложениями и веб-браузерами.
Поэтому мы стараемся просто синхронизировать их стиль: зафиксировали палитру
цветов, способ начертания иконок, ключевые интерфейсные модули. Все это нашло
отражение в нашем внутреннем стилевом гайдлайне.

Кусочек гайдлайна

Синхронизация стилей не затронула типографику. Мы сразу же приняли волевое решение использовать в приложениях только стандартные системные
шрифты платформ (Helvetica у iOS и Roboto у Android). Во-первых, так привычнее
для пользователя. Во-вторых, это ускоряет разработку: кастомные шрифты — это
лишние затраты на разработку, верстку и тестирование.

Процесс

В дизайн-отделе банка есть специалисты, которые отвечают за веб-интерфейс, а есть
ребята, целиком занятые приложениями. Сложность была в том, чтобы
синхронизировать понимание задачи и подход к стилю.

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

Но откроем маленький секрет: в банковских приложениях
интересы клиента часто пересекаются с интересами бизнеса. Когда возникают
противоречия, всей команде приходится искать компромиссное решение, чтобы
одновременно и позаботиться об интересах пользователей, и о развитии бизнеса.

Все подобные проблемы
решались переговорами, А/В-тестами, совместными решениями. Поэтому заказчики
внутри банка были глубоко в процессе: каждую неделю оценивали текущий
результат, давали комментарии, предлагали идеи.

Три сценария

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

Просмотр счетов. Это
когда клиент приходит в приложение, чтобы узнать, сколько осталось денег, или
изменить настройки своих банковских продуктов. На экране счетов должно быть как
можно меньше лишней информации.

Работа с операциями. Когда
в приложение приходят изучать поступления и расходы. Самое сложное — это анализ трат: нужно показать массу данных и
придумать простой способ работы с ними.

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

Итак, мы выделили самое важное: счета, ленту операций и
платежи. Три сценария очевидным образом разделили интерфейс на три вкладки.
Проявился скелет приложения — три главных его раздела:

Всё, что не относится к этим разделам, — дополнительные экраны. Они все переехали в дополнительное меню справа. Это акции, ближайшие
точки пополнения, банкоматы, настройки, контакты и курсы валют:

Дополнительное меню мы перенесли вправо осознанно: экраны становятся больше, а подавляющее большинство людей держит смартфон правой рукой или обеими. В ближайшем будущем мы хотим перенести иконку меню вниз, в tab bar в версии для iPhone, и вынести основные пункты в scrollable tabs в Android-версии (например, как это сделал Facebook).

Теперь заглянем в каждый
основной раздел и посмотрим, как он сделан.

Счета

Это стартовый экран. Когда клиент попадает сюда, приложение показывает ему, сколько осталось денег на всех его счетах:

Потом клиент действует по одному из трех сценариев.

1.
На странице счета изучает детали по каждому подключенному
банковскому продукту — вкладам, кредиткам, накопительным счетам.

В верхней части экрана — самые важные данные. Например, для
дебетовых карт отобразится общий заработок по кэшбэкам:

Для кредитов — сумма задолженности и даты ближайшего платежа:

Для кредиток с программой лояльности —
количество заработанных миль и баллов:

Отсюда каждый счет можно пополнить любыми доступными способами. У каждого продукта свои условия пополнения, поэтому лишние варианты
просто не показываются:

Дальше на экране — бесконечный список с историей операций по выбранному продукту:

2.
Второй сценарий — настройка статуса карт. Иногда пользователям нужно срочно заблокировать или перевыпустить карту. Поэтому у
каждого продукта есть контекстное меню, которое открывается по левому свайпу:

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

3.
Последний сценарий на экране счетов — открытие новых продуктов. Для этого нужно нажать на синюю кнопку с плюсом (см. скриншот выше).

В версии 3.0 эта кнопка всегда под рукой. Правда, она
вызвала нарекания от владельцев смартфонов с небольшими экранами. Особенно тех,
у которых открыто много счетов. Поэтому в ближайших обновлениях эта кнопка
спрячется в подвал экрана, где не будет никому мешаться.

Тут много интересного. Клиенты подают заявки на любые карты банка:

Открывают вклады:

Создают цели:

Кстати, с экраном счетов и tab bar связана одна из немногих правок, к которой приложил руку лично Олег Юрьевич. Он
попросил вернуть иконкам карт герб: это важный образ для бренда, и в приложении
он потерялся. Поскольку других замечаний у него было, мы склонили голову и
подчинились.

События

Здесь клиент изучает свой бюджет и историю операций. Мы хотели сделать так, чтобы он анализировал свои финансовые привычки без
дополнительных инструментов. Приложение помогает исследовать свои траты:
изучать их структуру по категориям и фильтровать в истории — по дате, бренду и
платежным инструментам.

Появилась задача дать клиенту как можно больше различных
способов фильтрации, но сохранить простоту и ясность взаимодействия.

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

При этом нам важно было оставить возможность детализировать
траты по каждому продукту. Операции по конкретному счету или карте по-прежнему
можно смотреть — но не в аналитическом разделе, а на экране счетов (см. в
предыдущем разделе).

Все это привело нас к простому и ясному решению: каждый
параметр операции — это отдельный тег. Тегами являются:

число, дата, месяц или год, когда совершена операция;
название счета (продукт, с которого совершена
операция);
бренд (где сделана операция);
категория покупки (распознается автоматически по MCC) или тип перевода (это способ появится в одном из ближайших обновлений).

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

Для этого теги крепко сцеплены с инфографической частью —
пайчартом, где структура трат представлена визуально. «Пирог» трат отображает
расходы по примененному фильтру, а заодно упаковывает их в категории.

Когда пользователь применяет фильтры, приложение наглядно
отображает результат каждого его шага. Сортировка получилась простой и
информативной, но пока она работает не на полную мощность — сейчас мы
развиваем идею, чтобы сделать навигацию по тратам еще удобнее. Посмотрим на
некоторые детали.

Первое, что видит клиент, — пайчарт с тратами за последний
месяц. Показывается список из 6 самых затратных категорий:

Все, что не влезает в этот список, попадает в пункт «Остальное»:

Пайчарт можно свернуть, и тогда та же информация отобразится в виде истории операций. Тут никаких откровений нет, это привычный список
расходов по карте.

У каждой операции есть собственный экран (для этого надо нажать на нее). Для покупок отобразится географическая метка и сумма начисленных бонусов:

У платежей и переводов эта страница выглядит иначе. Здесь данных мало, зато можно выслать чек, повторить перевод или добавить его в
избранное:

Мы пытались сделать список событий наглядным и чистым. Для этого мы отобрали и адаптировали несколько тысяч логотипов популярных брендов:

Вот так это выглядит в ленте:

Если приложение не узнаёт бренд, то показывает типовые иконки с буквами, как в почтовых клиентах:

У операций тоже свои типовые иконки:

Забегая вперед, скажу, что иконки как в мобильном, так и в интернет-банке скоро поменяются и станут ярче. А еще вернутся иконки категорий.

Платежи

Обычно это самый скучный раздел. У большинства банковских приложений здесь находится поисковая строка плюс набор типовых операций из топа
самых популярных (оплата телефона, интернета, ЖКХ или переводы между счетами).

Мы хотели пойти дальше: помочь пользователю сразу платить, а
не искать. Поэтому попытались избавиться от лишних взаимодействий.

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

Разбиваем переводы на разделы. Упрощаем названия категорий:
пытаемся сделать так, чтобы человек меньше сталкивался с незнакомыми
сущностями. В итоге — избавляемся от банковского языка и банковской теории:

Было

Стало

Третьему лицо в другой банк

Людям

Юридическому лицу

Организациям

Клиенту другого банка по номеру карты

С карты на карту

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

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

Когда мы работали над этим экраном, то смотрели на интерфейсы современных магазинов мобильных приложений. Они далеко не идеальны,
но уверенно справляются с тем, чтобы быть витриной для сотен и тысяч самых
разных продуктов. Это помогло нам выстроить навигацию. Все-таки у нас больше
3000 платежных партнеров.

Бизнесу понравилась идея маркетплейса: банку выгодно, когда
пользователю удобно платить, так он совершает больше операций. Возможно, потом
мы будем выводить на этом экране персональные предложения или продвигать новых
подключенных партнеров.

Смотрим на детали

Самыми первыми отображаются избранные платежи (в прошлом — шаблоны). Сюда попадают
операции, которые ранее добавили в избранное. Удобство в том, что они всегда на
самом верху и доступны в одно нажатие. Порядок шаблонов в списке можно
редактировать. Когда попадаем на страницу платежа, остается только указать
сумму:

Дальше — сами платежи, о категоризации которых мы уже говорили. Все категории не влезают
на главную, поэтому тем, кому нужно, показываем их в виде списка:

В переводах много специальных экранов. Например, меню переводов между счетами.
Ничего лишнего, только выбор продуктов, суммы и комиссия (нулевую тоже
отображаем, чтобы не вызывать лишних сомнений):

Чем сложнее операция, тем больше может вместить экран совершения операции.
Например, когда в операцию между счетами включена конвертация валют (если вы
переводите деньги с рублевой карты на валютный счет), показываются настройки
ввода валют:

Интерфейс перевода с карты на карту, как и в старой версии, предлагает отсканировать
карту, чтобы не вбивать ее номер (это наше ноу-хау). Если переводим с новой
карты, приложение сразу предлагает сохранить ее реквизиты:

Любой перевод сразу же можно превратить в шаблон — регулярный или автоматический:

Совсем новая фича — привязка контактов к платежам. Мы часто оплачиваем счета наших
близких или переводим друзьям. Когда таких шаблонов много, в них становится
сложно ориентироваться. Мы решили плотно заняться этой проблемой.

Теперь любой платеж можно привязать к контакту из записной книги. Делается в
несколько движений. Выбираем контакт:

Потом выбираем шаблон, с которым мы хотим связать контакт:

Например, мы хотим связать знакомого с его же картой, на которую уже совершали перевод.
Это будет выглядеть так:

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

Обратная связь и планы

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

К сожалению, сделать сразу идеальный интерфейс невозможно.
Поэтому сейчас мы получаем много отзывов из серии «верните все как было». Мы
знали, что это произойдет, но эмоции пользователей тоже понимаем.

Внутри команды мы верим, что пройдет пара-тройка месяцев, и
клиенты, которые сейчас ругаются, поймут, что ошибались. Вспомните, как после презентации iOS 7 80% отзывов тоже были негативными. А сейчас это
вершина, к простоте и функциональности которой стремятся все дизайнеры в мире.

На самом деле, мы максимально сгладили переход от старого продукта к новому. Перемен было запланировано гораздо больше, но мы решили не внедрять все сразу, а постепенно, осторожно погружать клиента в новую среду.
Новая платформа теперь есть, и мы сосредоточимся на том, чтобы развивать ее.

Сейчас мы исправляем ошибки и баги, которые попали в
финальную версию приложения. Параллельно работаем над новыми фичами и
функциями. Пока не расскажем, какими.

Как видите, наше приложение и интернет-банк уверенно
двигаются в сторону полноценного PFM-сервиса (то есть персонального финансового
менеджера). Но это только первые шаги.

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

P.S. На самом деле, весь редизайн затевался, чтобы поменять иконку. Вот так: