Альфа-версия: как мы сделали новое мобильное приложение Альфа-Банка
И как оно стало лучшим в 2020 году по мнению Markswebb
Все, кто пользуется нашим мобильным банком — а это почти все клиенты Альфы — привыкли к тёмно-синему дизайну. Визуально приложение не менялось с 2016 года, но внутри мы постоянно дорабатывали и улучшали его: добавляли новые фичи, вносили микроизменения в процессы, обновляли пользовательские сценарии.Да, в нашем приложении можно сделать почти всё, без походов в отделение и звонков в поддержку. У него один из самых высоких рейтингов в мире среди банковских приложений — 4,9 в App Store.
Но давайте честно: за 4 года у нас накопилось немало классных идей, которые нельзя реализовать на старой платформе. Нужно было меняться.Меньше чем за год мы переделали мобильный банк так. Получилось так хорошо, что консалтинговое агентство Markswebb (специализируется на исследованиях цифровых сервисов в разных отраслях), назвало наше приложение лучшим. Только с одним промахнулись — не сделали тёмную тему. Исправляемся прямо сейчас! Она появится в одном из ближайших обновлений. Рассказываем, как делали новое приложение, зачем перепридумали логику разделов, что такое виджетная архитектура, как нам помог тест эмоций и как спрятали баланс от посторонних.
Как мы это делали: дизайн-спринты
и провальные гипотезы
Многие банки делают из своих приложений «супераппы» — добавляют в них огромное количество функций. Но что если в погоне за «суперфункциональностью» они забывают о главном — потребностях клиента? Мы решили узнать, что в первую очередь нужно пользователям банковского приложения, провели для этого серию глубинных интервью и опросили около 3000 человек — не только наших клиентов.
Мы выяснили, что людям нужны простые вещи: знать, сколько денег осталось на счетах, сколько они потратили на прошлой неделе, какую сумму можно взять в кредит прямо сейчас и когда будет закрыта ипотека.
Евгений Тонкошкуров, руководитель направления развития мобильного банка: Мы поняли, что клиенты воспринимают мобильный банк как кошелёк в кармане. Его главная функция — быстро и удобно распорядиться деньгами. Над ней мы и работали в первую очередь. А уже в качестве приятного дополнения можно увидеть расширенную информацию о своих тратах, получить кредит в несколько касаний и сделать много чего ещё.
Рассказывает Вячеслав Киржаев, ведущий дизайнер приложения: «Раньше у нас в мобильном банке все было на одном экране. Мало того, что это было неудобно клиентам, это путало и продуктовые команды: у каждой было по несколько новых функций и все хотели ставить их на главную. Когда в приложении стало больше 250 новых функций, мы начали понемногу менять логику, добавили навигационную панель. Но было понятно, что этих изменений мало и нужен глобальный редизайн.
Работу над ним мы начали с обновления платежей и переводов. И почти сразу зашли в тупик: все четыре продуктовые команды, которые принимали в этом участие, не понимали как реализовать всё задуманное в существующем интерфейсе. Тогда мы решили попробовать Design Sprint от Google. Мы закрылись на неделю в переговорке и стало ясно, что подход выбран верно: мы поняли, как переделать платежи и переводы, а главное — как развивать их дальше.
Нам понравился процесс и результаты и мы решили запустить дизайн-спринт по переработке главного экрана мобильного приложения. Но что-то пошло не так: все три разработанных прототипа были забракованы пользователями. В одном случае люди не смогли понять, какие продукты у них открыты, в другом не смогли разобраться с навигацией, а третий оказался «обычным банковским приложением», которое никак не ассоциировалось с Альфой.
Так мы поняли, что одних дизайн-спринтов мало. Мы пришли за помощью к ребятам из подразделения инноваций и те предложили провести глубинные интервью по практике Jobs to be done. Мы же в это время обложились результатами юзабилити-тестов, отзывами клиентов, рекомендациями Markswebb и создали на базе всего этого обновлённый прототип, который затем «прогнали» через ещё один юзабилити-тест среди наших клиентов и тех, кто никогда не пользовался приложением. Когда появились результаты теста и глубинных интервью, мы засели за финальный спринт по интерфейсу. В итоге «картинка сложилась» и мы наконец-то сделали концепт, который лёг в основу нового дизайна.
Для большинства случаев нам отлично подходили стандартные методики: юзабилити-тесты, парные сравнения, дневниковые исследования… Благодаря им мы узнали, насколько пользователям стало проще решать «обычные» задачи. Например, раньше на перевод денег между счетами нужно было потратить 41 секунду, а в новой версии приложения на это уходило всего 14! Перевод по номеру телефона — 35 секунд вместо минуты, а пополнение счёта с карты другого банка — 40 секунд, а не 70! Но как быть с эмоциями? Как узнать, когда пользователь рад, а когда раздражён?
Для этого мы провели тестирование эмоционального отклика — подход, который используют в видеопродакшене, чтобы понять, цепляет ли реклама зрителя. И насколько нам известно, мы — первые, кто применил его в разработке интерфейсов. Пользователю (всего мы прогнали через тест полторы тысячи человек) предлагалось выполнить определенные действия в приложении, а в это время нейросеть пыталась распознать на его лице эмоции. Так мы узнали, что обновлённый мобильный банк вызвал у респондентов на 52% больше положительных и на 11% меньше отрицательных эмоций, чем старый.
Рассказывает Юрий Солодовников, руководитель управления UX/UI: «Как бы мы ни были уверены в том, что выпускаем классный продукт, какие бы исследования ни проводили, клиенты всё равно болезненно воспримут обновление приложения. Особенно того, к которому привыкли за несколько лет. Поэтому мы ещё до релиза попытались определить, что именно может вызывать больше всего затруднений, а после выхода новой версии продолжили собирать фидбек. Угадали почти со всем (и постоянно работаем над улучшениями), кроме тёмной темы.
Оказалось,что все так привыкли к темно-синему интерфейсу, что переключиться на светлый вариант в новой версии было сложно. После выпуска новой версии мы получили такое количество просьб сделать тёмную тему, что бросили все силы на её разработку. Получилось сделать в рекордные сроки. В ноябре мы провели ещё одно большое исследование среди сотрудников банка. Получили хорошую порцию фидбека и много идей на будущее. Например, мы узнали, что людям нужна сортировка продуктов на главном экране и возможность скрывать их, а рекламные баннеры слишком большие.
Что нового в приложении
Для начала мы полностью переписали главный экран на новую — «виджетную» — архитектуру. Теперь вход в приложение будет быстрее, а клиенты смогут настроить экран под себя. Одна из главных фишек — мы теперь можем быстрее добавлять новые функции (а это задел на несколько месяцев работы вперёд), нагрузка на банковские системы снизилась.
Иван Пятков. Дизайн и новые функции — это только внешние изменения. Но есть и другие, которые находятся «под капотом», и они более радикальные. Например, мы перевели интеграцию приложения с внутренними системами банка на микросервисную архитектуру. Это повышает скорость загрузки информации, уменьшает нагрузку на системы, позволяет быстрее добавлять новые функции. Вся эта большая работа позволит нам и дальше в том же активном темпе улучшать приложение, чтобы давать нашим клиентам новые возможности, делать его проще и удобнее.
С помощью блоков на главный экран можно вывести функции обмена валют, перевода по номеру телефона или виджет с картой банкоматов и отделений. Для этого нужно промотать экран до конца и нажать на «Настроить главный экран». Не нужен блок с адресами отделений и банкоматов? Можно убрать. Надо чтобы виджет с курсом был виден сразу при запуске? Поднимите его выше. При желании с глаз можно убрать всё, кроме верхних двух блоков. В будущем появятся виджеты для ипотеки или кредита. Они помогут не пропустить регулярный платёж и увидеть прогресс по сокращению долга.
Все продукты в одном разделе. Теперь всё нужное под рукой
В старой версии было две удобных фичи, которые мы хотели сохранить: место для счетов в верхней части экрана и «драг-н-дроп» для моментального перевода денег между ними. Но были и проблемы: клиенты жаловались, что нажатие на «Все счета» и «Все счета и карты» открывает похожие списки. Оба одинаково плохо помогали ориентироваться в большом количестве счетов, а первый ещё и не показывал к какому счету привязана карта.
Во время тестирования мы пробовали разные варианты расположения разделов. Сначала хотели поместить всё на главный экран, но выяснилось, что люди боятся открывать банковские приложения в публичных местах из-за опасений, что окружающие увидят баланс. Так появился раздел «Мои продукты», в котором отображаются все счета и продукты банка (например, кредиты).
Теперь все счета с главного экрана можно вообще убрать (свайп справа налево), а чтобы остатков по счетам не было видно и в «Моих продуктах» можно сделать свайп слева направо, чтобы скрыть их (работает и на главном экране). А ещё в этом разделе можно выбрать, какие счета включить в общий баланс, в какой валюте отображать.
А ещё мы переписали историю. Получилось красиво
Очень сложно следить за тем, на что уходят деньги, если приходится вчитываться в мелкий шрифт, чтобы выяснить, где и на что потрачено больше всего. Поэтому мы сделали историю простой, понятной и красивой: покупки — с логотипами магазинов и их названиями, переводы — с логотипом банка. Под суммой видно, сколько баллов или рублей кэшбэка придёт на счёт после покупки.Также мы добавили кнопку для получения справки по операции в формате PDF (с печатью банка). Это удобно, если нужно подтвердить оплату: можно переслать справку в мессенджеры, по почте, или сохранить на телефон.
А что с дизайном?
Рассказывает Ира Волошина, арт-директор Альфа-Банка: «За последний год мы много чего изменили в дизайне коммуникаций, отделений, теперь на очереди мобильный банк. В наших коммуникациях много типографики, потому что мы делаем фокус на красоте самого носителя информации. В наших отделениях нет бэк-офиса, открытые потолки, открытое пространство — мы показываем красоту бизнес-процессов, архитектуры, красоту человеческих отношений. Эта идеология сохранилась и в приложении: мы хотим дать максимум содержания при минимуме форм. В нашем мобильном банке очень много функций: можно перевести деньги, оплатить подписку на любимый стриминг, посмотреть остатки по счетам или проверить баланс. А ещё там можно узнать про новые продукты, перейти на сайт Альфа-Банка, чтобы почитать о новой акции, или разобраться, как получить больше кэшбэка — всё это в блоке рекомендаций, который появился в новой версии.
Мы стремились максимально развести действия (платежи, переводы) и коммуникации, где мы рассказываем что-то интересное и полезное. Это привело нас к очень лаконичному и ёмкому решению: мы убрали всё лишнее и расставили акценты там, где мы взаимодействуем с клиентами. Чтобы им было легко ориентироваться: тут постоянная поддержка, а тут — интересный контент. Так мы делаем приложение понятным, лёгким и приятным. Максимально выразительным и вместе с тем максимально функциональным.
Теперь ваша очередь: расскажите, как вам обновлённое приложение.
Каждый раз, когда мы выпускаем новый дизайн, мы рискуем. Мы знаем, что кому-то удобство и красота в нашем понимании покажутся неудачными. Да, кто-то захочет вернуть то, к чему уже привык. Но будут и те, кто поддержит изменения и поможет нам стать лучше.
Вячеслав Киржаев, ведущий дизайнер приложения: Это обновление — как переезд из тесной квартиры в большой дом с продуманной планировкой. Мы ещё не до конца расставили все вещи, но уже воодушевлены возможностями для развития. На главном экране появятся информативные виджеты для запуска функций в одно нажатие. В «Моих продуктах» можно добавлять новые категории — теперь там всё разложено по полочкам. На экранах разделов появилось место для экспериментальных виджетов, которые помогут решить неосознанные потребности пользователей. Но самое главное — в том, что обновление сподвигло наших клиентов оставить множество отзывов, идей и рекомендаций. Их мы используем, чтобы сделать приложение Альфа-Банка ещё удобнее. Если вы клиент Альфа-Банка, расскажите, что думаете о новом приложении — здесь в комментариях или на почту new_app@alfabank.ru. Предлагайте идеи, пишите, что понравилось, что неудобно — только честно. Всё возьмём в работу.