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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для спасения партнёрства реализовали план:

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

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

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

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

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

Трансформация приложения «Райффайзен Банка»: проверяем гипотезы, растим лояльность

3. Результаты сотрудничества

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

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

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

Главные результаты:

• Выросла лояльность клиентов.
• Активность текущей базы пользователей повысилась на 3 п. п.

Юлия Гранкина

дизайнер интерфейсов, red_mad_robot

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

4. Заключение

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

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