Трансформация приложения «Райффайзен Онлайн»

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

Главной целью нашей совместной работы было предотвратить отток пользователей и повысить их вовлечённость. Мы делали это с помощью:

- улучшения навигации по приложению;

- внедрения кредитного рейтинга;

- красивых и понятных баннеров с банковскими продуктами;

- полного редизайна главного экрана;

- продуктовой аналитики, которая помогла глубже следить за метриками и корректировать приложение;

- исследований и бэклога идей для будущего развития.

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

В начале нам предстоял редизайн экрана «Ещё» и разработка нового экрана «Профиль». Изначально в приложении оба этих экрана были совмещены, и раздел «Ещё» представлял собой неструктурированный список второстепенных функций. В старой версии приложения раздел наполнялся долго, и в итоге «Райффайзен Банк» принял решение провести UX-тесты. Этим мы и занялись вместе с командой банка.

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

В результате мы провели UX-исследование разделов «Ещё» и «Профиль» и запустили постоянный цикл продуктовых исследований в проекте. У «Райффайзен Банка» было ощущение, что некоторые фичи уже можно отдавать в разработку, но мы нашли, что можно улучшить. Выяснили, что нужно поработать с расположением блоков внутри экрана, интерфейсом и текстами, и банк согласился.

Результат исследований «Райффайзен Банку» понравился, разделы передали в разработку и запустили следующее исследование центра уведомлений «Колокольчик».

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

1. В первый вошли накопительные счета и вклады, потребительские кредиты, страховки и подписки, вкладка «Все продукты» с фильтрацией и сортировкой.

2. Во второй — индивидуальный инвестиционный счёт, брокерский счёт, стратегия и ПИФы.

В августе 2023 года «Райффайзен Банк» решил провести глобальное исследование перспектив развития мобильного приложения «Райффайзен Онлайн» в 2024 году. Результатом стал бэклог гипотез и готовых фичей, которые смогут дать приложению максимальный буст и сделать пользовательский опыт ещё лучше. Мы провели большой анализ конкурентов, изучили отчёты Markswebb Mobile Banking Rank, разработали гипотезы о функциональности приложения и приоритизировали их. А ещё подготовили 22 опроса пользователей с охватом свыше 20 000 человек.

Итого, в рамках этого исследования, мы предложили банку около 300 гипотез развития «Райффайзен Онлайн», из которых впоследствии вместе отобрали 40 самых приоритетных. Эти 40 гипотез и сформировали бэклог исследований и разработки на 2024 год. Всё это заняло 3,5 месяца.

В начале работы над проектом в команде было пять разработчиков, но вскоре стало понятно, что реализовать вверенные нам фичи в назначенный срок таким составом не получится и нужно расширяться. Уже в августе 2023 года появились задачи для ещё одной команды разработки — для реализации фичей оплаты счетов ЖКУ по QR-коду, оплаты ЖКУ через другого сервис-провайдера и редизайна списка поставщиков ЖКУ.

К октябрю 2023 года мы разрослись с пяти разработчиков до большой команды из 44 специалистов. Для управления несколькими стримами разработки мы полностью переформировали оргдизайн команды. Наш проджект стал программным менеджером, в каждую деливери-команду мы вывели отдельного проджект-менеджера, а ещё выделили core team для решения ключевых вопросов в каждой команде.

У нас был несдвигаемый дедлайн по разработке — 1 декабря 2023. Одной из годовых целей 2023 команды банка, с которой мы работали, было завершение разработки нового главного экрана «Райффайзен Онлайн» к этому моменту. Собственная команда «Райффайзен Банка» попросила наших разработчиков принять участие в разработке этой фичи. Это была задача со звёздочкой, но в итоге главный экран разработали и зарелизили в срок.

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

Вот несколько аспектов, которые помогли нам сформировать партнёрские отношения с банком:

1. Экспертность — каждый раз мы аргументировали все предложения и веские «за» и «против».

2. Насмотренность в мобильных приложениях и банковских проектах.

3. Вовлечённость команды и желание всегда делать чуть больше, чем от нас просили.

4. Внедрение исследований пользовательского опыта.

В процессе сотрудничества мы перепробовали много форматов управления ожиданиями партнёра: статусные встречи несколько раз в спринт, статусные письма по почте, презентации, диаграммы Ганта, но самым удобным форматом для команды банка оказалась обычная презентация в Keynote и роадмап в Miro в формате светофора. По сути это перечень задач, выделенных разными цветами:

• зелёный — всё идёт по плану,

• жёлтый — есть риски, которые могут повлиять на качество выполнения или сдвиг сроков,

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

Сейчас «Райффайзен Банк» не делит команду на инхаус и роботов, а воспринимает нас как цельную единицу — полноценную команду в своём контуре.

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

«Ещё» и «Профиль»: дизайнерские решения и новые компоненты

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

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

Тёмная тема: синхронизация между всеми командами

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

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

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

Оплата мобильной связи: улучшение сценария на основе существующей дизайн-системы

В процессе разработки нового сценария оплаты мобильной связи нашей основной задачей было перенести старый сценарий на современные компоненты дизайн-системы. Мы стремились улучшить пользовательский опыт, сократив количество кликов в процессе — предположили, что это значительно повысит количество пользователей, которые платили бы за мобильную связь через приложение «Райффайзен Банка», а не через приложение оператора. Но во время работы над целевым сценарием произошёл форс-мажор с платформой QIWI.

В феврале 2024 года у «КИВИ Банка» — сервис-провайдера всех мобильных платежей «Райффайзен Банка» — отозвали лицензию. У всех пользователей банка одномоментно перестали проходить транзакции по оплате мобильной связи. Это был серьёзный вызов: мы работали как единая команда, не разделяя задачи на «свои» и «банка».

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

В части разработки у нас было несколько челленджей:

1. Легаси и устаревший язык. Первая версия приложения была написана в 2018 году. Тогда в iOS использовался старый язык Objective-C, но со временем мы отказались от экранов, написанных с помощью Objective-C и написали их на Swift, уйдя от легаси. Бывало так, что одна простая фича своими связями тянулась в core-компоненты, написанные на Objective-C, и мы столкнулись с тем, что много легаси-кода нужно было переводить с одного языка на другой. А за 5+ лет существования Swift программистов со знанием Objective-C становится всё меньше. Поэтому поиск людей в команду усложнялся, а нашим разработчикам приходилось разбираться в незнакомом языке.

2. Оверинжиниринг. Спустя много лет существования приложения сориентироваться в коде иногда было сложно. Чтобы наша команда смогла выйти на ту же производительность, что и разработчики «Райффайзен Банка», приходилось с этим разбираться.

3. Пристальное внимание на приёмке кода. Мы как партнёры банка должны были проходить приёмку кода со стороны команд «Райффайзена». Нужно было получить два лайка на наш мердж-реквест, чтобы его влили в мастер-ветку и потом можно было сделать релиз. Первые полгода нас смотрели очень внимательно — были споры из-за код-стайла, приходилось получать много разъяснений от банка просто потому что мы были не в контексте многолетней разработки приложения. Но со временем, когда мы во всём разобрались, некоторым роботам дали права на расставление лайков, и уже мы сами вместе с разработчиками банка начали ревьюить код других ребят из «Райффайзена».

Есть фичи, которыми мы особенно гордимся. Например, экран «Профиль» и переработанный раздел «Ещё». Мы написали их с нуля или переработали так, что теперь в них полностью отсутствует легаси-код. Это повышает стабильность и скорость загрузки экранов.

Вместе с командой банка у нас получилось сделать красивое и функциональное приложение. Навигация стала логичнее, у перегруженного раздела «Ещё» появился помощник — раздел «Профиль», а ещё в приложении наконец появилась тёмная тема. Помогли «Райффайзен Банку» сделать приложение более удобным и повысить активность и лояльность пользователей. Теперь «Райффайзен Онлайн» ещё больше соответствует современным требованиям дейли банкинга. 

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

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