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

Задача: остановить отток пользователей

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

Мы сотрудничаем с «Райффайзен Банком» уже больше года, и вот что нам удалось сделать за это время:

• провести 11 исследований: пользовательского опыта, UI/UX-решений, возможностей для роста приложения, трендов рынка и др.;

• создать много новых компонентов дизайн-системы, из которых сейчас состоит приложение;

• несколько раз пересобрать команду и выйти на стабильный результат, который нравится партнёру;

• реализовать стрим «Платежи и переводы» в условиях антикризисного режима;

• сформировать бэклог задач для будущего сотрудничества.

А теперь обо всём по порядку.

Исследовательский путь

С апреля 2023 года мы провели 11 исследований:

• экранов «Ещё» и «Профиль»,

• центра уведомлений «Колокольчик»,

• истории операций,

• продуктов на главном экране;

• автоплатежей и автопереводов,

• оплаты ЖКУ,

• баланса на главном экране,

• повышения вовлечённости и развития клиентов в мобильном приложении,

• шаблонов и упрощения операций,

• витрины продуктов,

• определение приоритетных направлений развития приложения «Райффайзен Онлайн».

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

Некоторые фичи, которые банк хотел реализовать, не получали высоких оценок в результатах тестов, часть из них клиенты оценивали даже как «нежелательные». Поэтому был момент, когда команда банка сомневалась в том, правильный ли метод мы используем в исследовании. Оказалось, что отличаются подходы в работе с одной и той же моделью. Мы показали партнёрам из банка свои инструменты работы с Кано, помогли выделить целевые сегменты и способы принятия решений, — и работа пошла гораздо бодрее. В результате из 100–120 функциональностей мы помогли спланировать работу по реализации 40 из них. Сейчас фичи либо уже разработаны, либо находятся в процессе разработки.

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

В результате мы сформировали бэклог развития «Райффайзен Онлайн» и продолжаем продвигаться по нему.

Переосмысление дизайна

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

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

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

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

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

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

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

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

Юлия Гранкина, дизайнер интерфейсов red_mad_robot

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

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

Вызовы в разработке

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

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

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

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

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

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

У iOS- и Android-разработчиков получилось глубоко разобраться в кодовой базе банка и получить высокий кредит доверия. Сейчас новичков, которые выходят в собственную команду «Райффайзен Банка», зачастую посылают к нашим ребятам для передачи знаний.

Михаил Тиханенков, менеджер проектов в red_mad_robot

Антикризисный режим

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

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

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

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

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

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

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

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

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

Что в итоге

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

За месяц существования в антикризисном режиме нам удалось сохранить и даже развить стрим платежей: быстро сформировать core-team, вовлечь всех лидов в процесс и разработать удобный инструмент для работы с требованиями к фиче.

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

В декабре 2023 года обновлённое приложение «Райффайзен Онлайн» завоевало первое место в диджитал-премии Tagline Awards в номинации «Лучший mobile- / AR- / VR- / IoT-проект».

Над материалом работали: 

• текст — Алина Ладыгина,

• иллюстрации — Юля Ефимова.

Чтобы ничего не пропустить, следи за развитием цифры вместе с нами:

• red_mad_news

• Design Jam

• red_mad_dev

• red_mad_product

• LinkedIn

• VK

Да пребудет с тобой сила роботов! ?