Редизайн iOS-приложения «Тинькофф банка» — рассказ команды

Пользовательский опыт и новые функции.

В закладки

Когда нам становится грустно зимними вечерами, мы вспоминаем, что наше мобильное приложение признано лучшим в России в 2013, 2014, 2015 и 2016 годах (по данным Deloitte и Markswebb Rank&Report). После мы выпиваем очередную чашку кофе и продолжаем работать над улучшением приложения.

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

Чтобы сделать просмотр информации удобнее, мы обновили дизайн в соответствии со стилем iOS 11. Экран «Счета» стал информативнее — клиент видит все свои счета и карты и может их скрыть или переименовать.

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

Ранее при выборе конкретного счёта пользователь видел только актуальную ставку, по которой банк начислял проценты на остаток — до 6% годовых. Теперь мы добавили на этот экран счёта ещё и предварительную сумму кэшбека за покупки, которую клиент получит в конце расчётного периода.

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

Мы внедрили в приложение функцию оплаты по QR-коду прямо из квитанции. Теперь вместо ручного заполнения реквизитов достаточно с помощью смартфона просканировать QR-код. Это значительно упростило процесс оплаты квартплат, электроэнергии, штрафов и других услуг.

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

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

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

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

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

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

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

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

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

Не забыли и про владельцев iPhone X — Face ID присутствует. Владельцы других устройств по-прежнему могут воспользоваться входом по отпечатку пальца или по четырёхзначному коду доступа.

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

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Виктор Енюков", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 83, "likes": 31, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 30080, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 30080, "author_id": 124345, "diff_limit": 1000, "urls": {"diff":"\/comments\/30080\/get","add":"\/comments\/30080\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/30080"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

83 комментария 83 комм.

Популярные

По порядку

Написать комментарий...
29

Немного не в тему, но понравилась пасхалка в «Инвестициях»

Ответить
32

Ребята из Тинькофф, вы молодцы.
Но от статьи, в заголовке которой есть слова "Рассказ команды" ожидаешь не пересказа changelog с комментариями, а описание процесса, инструментов, проблем. Какой-то кухни внутренней немного.
А тут просто изложение на тему "что мы поменяли в приложении".
Ну окей

Ответить

Комментарий удален

12

Пожелание, хочу, чтобы после фразы "переведи 100 рублей Олегу" на экране появлялся довольный-предовольный Тиньков

Ответить
0

Интересная идея)

Ответить
2

Оо.. Привет. Как у вас там дела? Ещё конкурсы какие-то планируете?
Сколько раз в день кушают разработчики? А другие сотрудники?

Ответить
6

Дела хорошие, конкурсы интересные, да и в остальном все супер. Сами как?)

Ответить
1

З@ебали звонить и предлагать свои услуги.

Ответить

Комментарий удален

0

Пожалуйста, направьте на connect@tinkoff.ru номер, на который поступают звонки – исключим из базы обзвона.

Ответить
0

конечно исключите. Я то точно это знаю.

Ответить
7

Был очень доволен старым дизайном, как на Android так и на iOS, но после обновления дизайна на iOS версии, что-то стало грустновато.
1. Огромная шапка "Счета"(ну и остальные разделы) и какие-то предложения, которые в общем-то и не нужны на главном экране заняли 30-40 % экрана на iPhone SE, далее большие отступы между блоками(карты, вклады...).
2. Чересчур много цветов в разделе - "Оплата".
3. В разделе - "Еще" может вкладку - "Инфо", расположить первым? Ведь настройки не так часто меняешь.

В остальном один из лучших приложений(из среди мною используемых - Сбербанк, Альфабанк), желаю удачи!)

Ответить
15

Увы, но огромная плашка с заголовком - это новый стиль 11го айоса

Ответить
1

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

Ответить
3

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

Ответить

Комментарий удален

10

Лично я до сих пор считаю что они лучше чем этот дешевый флэт. :)

Ответить
5

Нормально все выглядит в 2017

Ответить
0

Вызывает ностальгию по Windows 3.11))

Ответить
2

Если тут есть люди, которые помнят, что это.

Ответить
2

тут есть люди помнящие звук загрузки робокопа на спектрум

Ответить

Комментарий удален

8

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

Ответить
4

Давно кстати иконки в ворде рисуете? Я ничего не упустил?

Ответить
5

Ворд - не самая популярная программа среди дизайнеров. Нет, рисуем в другой.

Ответить
10

Ох уж эти фразы про «мы добавили поддержку Face ID”, когда все приложения с поддержкой Touch ID и так работают с новой технологией

Ответить

Комментарий удален

Комментарий удален

2

И что?

Ответить
5

Спасибо всем за конструктивную критику, пожелания, и замечания! Обратная связь не останется без внимания – мы все фиксируем, чтобы сделать приложение еще лучше.

Ответить
0

Очень надеюсь на возможность копировать реквизиту виртуальной карты

Ответить

Комментарий удален

4

Ой как интересно, хочу у вас кредит оформить

Ответить
4

Следующим номером программы хотелось бы услышать о редизайне приложения "ВКармане", ЕВПОЧЯ.

Ответить
3

Поле Поиска лучше сворачивать при скролле вниз

Ответить
0

Вот точно такой же пример

Ответить
2

А что такого суперсекретного в названии оператора, что его нужно замазывать?

Ответить
0

Не знаю, просто люблю замазывать (:

Ответить
3

выглядит как прототип, который бросили на половине.

Ответить

Комментарий удален

0

Подскажите, проблема только с привязанными картами банка ВТБ24?

Ответить
3

О такой проблеме с картами ВТБ-24 знаем и уже работаем над исправлением. Ориентировочно до конца дня починим. Извините за неудобства.

Ответить
0

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

Ответить
–1

И это очень хорошо! Наконец-то! Бесит аж жуть

Ответить
0

тиньков - топ

Ответить

Комментарий удален

2

Смешно

Ответить
0

А можно уже две дебетовые на одного человека оформить?
Как отображаются в одном кабинете?

Ответить
0

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

Ответить
1

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

Ответить
0

Возможно, реализуем это в дальнейшем. Спасибо за обратную связь.

Ответить
0

После входа в новое приложение кажется, что у меня уменьшается экран 😒

Ответить
0

«Экран „Счета“ стал информативнее — клиент видит все свои счета и карты и может сразу поменять их местами, скрыть или переименовать».

Как их поменять местами?

Ответить
0

Поменять местами нельзя, неточность в статье уже исправили, насколько видим.

Ответить
0

Плохо! у меня теперь по дефолту везде долларовая карта подставляется. Как думаете, это мне нужно?

Ответить
0

У вас точно не скрыта рублевая карта (она доступна для выбора при оплате)?

Ответить
0

Еще лайфхак, как быть: можно скрыть счет, который хотите отобразить вторым, а затем снова показать его. Он переместится.

Ответить
0

Жаль. Хочется менять местами.

Ответить
0

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

А если серьёзно — редизайн крутой, пожалуй, лучшее в плане UX за всё время.

Неприятно лишь то, что ставка по кредитке у клиента с нехилыми оборотами по дебетовке равна ставке по кредитке у клиента с околонулевыми оборотами, и её снижение приходится выпрашивать у саппорта :)

Ответить
0

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

Ответить
0

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

Ответить
–2

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

Ответить
0

Эммм, а кеширование не решит эту проблему?
Это ведь приложение в котором информация очееень редко изменяется.

Ответить
0

Для доступа к моей учётной записи прекрасно подходит код, отпечаток пальца, как это было раньше, или FACE ID, если хотите. Это приложение — не банк, это приложение нужно, чтобы здесь и сейчас получить доступ к важным документам. Представьте как вы меня подставили, когда, находясь в заграничной поездке, я не смог воспользоваться критически важными данными в купленном мной, да-да были времена, когда она была платная и её покупали, приложении. Пришлось в срочном порядке искать другие пути получения данных, хранимых в нём. А приложение я удалил.

Ответить
0

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

ВОТ СПАСИБО-ТО ВАМ ПРЕОГРОМНОЕ!!111111
Наверно, и козу скоро выгнать можно будет, да?

Ответить

Комментарий удален

–1

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

Ответить
–1

Чтобы оплатить государственный детский сад надо, как я понимаю, делать перевод в бюджетную организацию, с этим есть несколько проблем:
1. На квитанции из сада присутствует QR-код, но как его отсканировать... Где быстрая оплата по QR-коду?
2. В квитанции есть УИН, который каждый раз разный, но при сохранении шаблона, он вносится внутрь шаблона, и каждый раз надо его редактировать (подтверждение по смс и т.п.). Логичнее было бы вынести его за шаблон

Или под андроид еще не обновились?

Ответить
1

1. На Android обновление приложения ожидается в скором времени, в нем добавим возможность оплаты по QR-коду из квитанций (за квартплату, электроэнергию, штрафы, в бюджет). Пока что обновили только приложение для iOS.
2. Спасибо за предложение, приняли.

Ответить
–1

Если сторонней читалкой отсканировать этот QR, что там вшито?

Ответить
0

Только что то часть страничек остались от предыдущего дизайна, не?

Ответить
0

А можно сделать чтобы на вкладке "Оплатить" все-таки и платежи и переводы влезали? Раньше кнопки были круглые, но не влезали из-за дурацких баннеров с предложением оформить вторую карту. Сейчас на этой странице баннеров нет, но теперь сами кнопки огромные и не влезают все равно.

Ответить
0

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

Ответить
0

А FaceID на приложении Тинькоф Бизнес по-прежнему не работает)

Ответить
0

Раньше было лучшее приложение. А теперь просто приложение. Ужасные цвета и иконки в разделе оплатить. Стало сложнее найти нужный раздел.

Ответить
0

Наконец-то стало возможным скрыть счётчик промо-акций! Раньше никак не скрывался.

Ответить
0

Касаемо приложения. Сделайте изменение цвета у карт других банков. Карта Сбербанка не всегда зелёная, например. Будет визуально гораздо легче понять где какая карта, без сверки последних четырёх цифр. :-)

Ответить
0

Редизайн сделали, а переводы висят.

Ответить
0

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

Ответить
0

Лучше бы вернули старый дизайн интернет-банку поскольку новый это медленное и неудобное самое настоящее убожество.

Ответить
0

Обновление мне понравилось, стало удобнее не смотря на стиль iOS 11 (все приложения рано или поздно к нему причешут). Когда ждать обновление для Бизнес и Инветсиции, чтобы все было в одном стиле?

Ответить
0

Сроков, к сожалению, нет, следите за новостями ;)

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления