Кейс Redmadrobot: Редизайн мобильного приложения банка «Открытие»02.09.2016 18:23

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

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

1. Медлительность. Долгая загрузка главного экрана, каталога платежей, выписки и других разделов. Чтобы добраться до выписки и платежей, приходится продираться через кучу спиннеров, кэширование не продумано.
2. Неудобно платить и переводить деньги. Почти никакой перевод или платеж нельзя совершить в пару кликов, даже если пользователь повторяет его каждую неделю или месяц и даже при наличии шаблона. Неудобно переводить деньги с карты на карту и между счетами. Шаблоны платежей и история операций труднодоступны.
3. Неясные сведения о банкоматах и офисах. Непродуманно отображаются объекты с одинаковыми координатами. Текст на экране описания объекта обрезается.
4. Неполная информация по банковским продуктам. Отсутствует информация об условиях тарифов и возможностях продукта. Непонятно, как можно использовать продукт выгоднее.
5. Практически нет возможности более очевидно осуществлять кросс-продажи продуктов и платежей и другую коммуникацию.

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

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

Проанализировав накопленный опыт по продукту, обновленный список бизнес-задач и пользовательские проблемы, мы выделили два главных фокуса редизайна:

• оптимизация платежной функциональности;
• персонализация продукта.

В ноябре прошлого года началась работа над логикой нового «Открытия», в январе дизайн-концепция была согласована с заказчиком, после чего мы подготовили нативный прототип и передали его на тестирование в Usability Lab. В итоге мы полностью переделали приложение, положив на новый код обновленную логику и UI.

Главный экран «Мои деньги»

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

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

• Переводить деньги между счетами. Это одна из самых частых операций в мобильном банке: в старой версии 28% пользователей, открывших раздел «Платежи», переводило к схеме перевода денег.
• Пополнять карту.
• Оплачивать счет за услуги.
• Совершать платеж по шаблону.

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

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

Попутно мы экспериментировали с функциональным наполнением раздела. Один из модулей, который не попал в первый релиз, но появится в будущем — микровиджет PFM (personal finance management) — краткая сводка о том, сколько денег получил и потратил клиент.

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

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

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

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

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

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

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

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

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

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

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

Платежи и переводы

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

Проблемой предыдущей версии был длинный список платежей с несколькими уровнями вложений. Чтобы перевести деньги между счетами (около 30% операций в этом разделе), нужно было выбрать меню «Переводы» и перейти в раздел «Перевести между своими картами или счетами». При этом каждый раз приходилось ждать, пока загрузится список разделов.

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

После выхода первой версии приложения мы специально перевели наш «зарплатный проект» из «Альфа-Банка» в «Банк Открытие», и все 120 человек стали получать белую зарплату на карту «Открытия» и пользоваться нашим мобильным банком. Это позволяет на собственной шкуре почувствовать все прелести своего продукта. Для нас показателен процент людей, которые сразу после получения денег переводят всю сумму на карту «Рокетбанка», — он снижается.

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

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

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

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

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

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

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

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

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

Несмотря на вау-эффект, от этого интерфейсного решения мы отказались: среднее время на поиск нужной категории по сравнению с поиском в привычном списке увеличилось на 2,5 секунды.

Мне эти кружки сразу не понравились.

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

Более 30% пользователей повторяют платеж из истории либо платят по шаблону. Мы думали, как сделать повторные операции удобнее, и пришли к решению объединить эти сущности в одной ленте. В начале ленты отображаются избранные платежи, а затем все остальные. Кстати, платеж из истории можно сохранить как шаблон, и он будет «прикреплен» в начале ленты. Еще одно микроулучшение — история операций также показывается внутри каждой категории услуг.

Отрисовано 579 экранов.
Сделано более 10 итераций по каждому из ключевых экранов.
Добавилось 10 новых фич.
В тестировании приняли участие 97 человек.

Расширилась функциональность неавторизованной зоны

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

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

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

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

Кстати, фон брендируется под карту, продвижение которой наиболее актуально для банка.

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

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

Чат, профиль пользователя и банковские продукты

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

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

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

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

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

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

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

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

После нажатия на кнопку «Полезное» в разделе банковского продукта появляется развернутая информация о тарифе и условиях обслуживания.

Использование возможностей iOS для улучшения UX

Чтобы вход в приложение был более комфортным, мы добавили возможность повторного вызова TouchID и реализовали поддержку технологии Apple 3D Touch для моментального перехода к самым востребованным действиям: отправить деньги другому человеку, пополнить свой счет с карты, оплатить услуги или перевести средства между счетами.

Spotlight Search в iOS 9 позволяет искать не только по базе контактов и заметкам, но и по индексированным объектам приложения. Даже не заходя в приложение, через Spotlight можно найти нужный шаблон и, нажав на него, сразу попасть на экран соответствующего платежа.

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

Анимация

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

Переход на страницу банковского продукта

Итоги и планы

Обновленное приложение «Открытия» появилось в App Store в июле, и сейчас мы собираем и анализируем пользовательский фидбэк и метрики. В старой версии приложения, с одной стороны, существовали технические ограничения (старый код и необходимость поддерживать iOS ниже 9-й версии), с другой — активно расширялась функциональность (за первые полтора года добавилось более 30 новых фич). Все это ограничивало возможности по улучшению UX.

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

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

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

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

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