![](https://habrastorage.org/getpro/habr/upload_files/370/c7f/8c5/370c7f8c5992ddd1bc81d39e574261de.png)
Рассказываем про процесс редизайна мобильного приложения «Райффайзен Банка»: как за два дня улучшить функциональность, облегчить сценарии, сохранить стрим в антикризисном режиме и сформировать план развития на будущее.
Задача: остановить отток пользователей
Нам предстояло предотвратить отток пользователей, повысить их лояльность и активность, а также улучшить дизайн приложения и упростить навигацию, минимизировав при этом риски технических неполадок.
Мы сотрудничаем с «Райффайзен Банком» уже больше года, и вот что нам удалось сделать за это время:
провести 11 исследований: пользовательского опыта, UI/UX-решений, возможностей для роста приложения, трендов рынка и др.;
создать много новых компонентов дизайн-системы, из которых сейчас состоит приложение;
несколько раз пересобрать команду и выйти на стабильный результат, который нравится партнёру;
реализовать стрим «Платежи и переводы» в условиях антикризисного режима;
сформировать бэклог задач для будущего сотрудничества.
А теперь обо всём по порядку.
Исследовательский путь
С апреля 2023 года мы провели 11 исследований:
экранов «Ещё» и «Профиль»,
центра уведомлений «Колокольчик»,
истории операций,
продуктов на главном экране;
автоплатежей и автопереводов,
оплаты ЖКУ,
баланса на главном экране,
повышения вовлечённости и развития клиентов в мобильном приложении,
шаблонов и упрощения операций,
витрины продуктов,
определение приоритетных направлений развития приложения «Райффайзен Онлайн».
В начале исследовательского пути мы синхронизировались в понимании различных методологий и подходов к решению задач. Например, относительно метода Кано. Этот метод помогает определить, какие фичи нужно добавить в продукт в первую очередь, какие внедрять пока не стоит и что необходимо учесть при их реализации. Казалось бы: банк использует Кано, мы используем Кано — что может пойти не так?
Некоторые фичи, которые банк хотел реализовать, не получали высоких оценок в результатах тестов, часть из них клиенты оценивали даже как «нежелательные». Поэтому был момент, когда команда банка сомневалась в том, правильный ли метод мы используем в исследовании. Оказалось, что отличаются подходы в работе с одной и той же моделью. Мы показали партнёрам из банка свои инструменты работы с Кано, помогли выделить целевые сегменты и способы принятия решений, — и работа пошла гораздо бодрее. В результате из 100–120 функциональностей мы помогли спланировать работу по реализации 40 из них. Сейчас фичи либо уже разработаны, либо находятся в процессе разработки.
Чтобы укладываться в сроки, мы начали делить этапы исследования на несколько частей и приносить мастхэв-фичи в реализацию ещё до того, как заканчивалось полное исследование, на примере разбора гипотез, запросов в поддержку и отзывов пользователей.
В результате мы сформировали бэклог развития «Райффайзен Онлайн» и продолжаем продвигаться по нему.
Переосмысление дизайна
У банка есть свой дизайн-код и набор стандартизированных библиотек, поэтому проработку дизайна мы начали не с нуля. Использовали готовые блоки, из комбинации которых получались уникальные экраны в фирменном стиле. Если каких-то элементов не хватало, мы их разрабатывали и добавляли в дизайн-систему, чтобы все команды банка могли пользоваться этими элементами.
«Ещё» и «Профиль»: дизайнерские решения и новые компоненты
Одной из важнейших задач было усовершенствование навигации приложения. Нужно было сделать её логичнее и понятнее пользователям. Больше всего вопросов вызвал раздел «Ещё» — там располагались все функции, не связанные с банковскими продуктами, транзакциями и чатом, а также настройки профиля. Чтобы сделать раздел легче и логически разделить функциональность в соответствии со стандартами современных приложений, появился экран «Профиль». Он отвечает за авторизацию в приложении, персональную информацию и настройки. В результате в «Ещё» остались только дополнительные услуги банка — кешбэк, обмен валют, документы, заказ наличных и поиск банкоматов. Точка входа в профиль появилась на привычном месте — в левом верхнем углу главного экрана, а раздел «Ещё» остался там же, где и был.
![Так выглядело приложение раньше Так выглядело приложение раньше](https://habrastorage.org/getpro/habr/upload_files/c5f/090/855/c5f090855153bfe78c1d1601f9c292c2.jpg)
![А вот так мы разгрузили раздел «Ещё» и добавили «Профиль» А вот так мы разгрузили раздел «Ещё» и добавили «Профиль»](https://habrastorage.org/getpro/habr/upload_files/a65/b47/91f/a65b4791ff19f9239cec40e347135402.jpg)
Команда обновила внешний вид разделов в соответствии с новой дизайн-системой банка. Нужный нам вид и функциональность невозможно было реализовать только на базовых компонентах дизайн-системы, поэтому мы создали на их основе новые локальные компоненты и добавили их в общую базу. Мы отрисовали для них все состояния, описали вёрстку и поведение.
![Когда базовых компонентов дизайн-системы не хватало, мы создавали новые Когда базовых компонентов дизайн-системы не хватало, мы создавали новые](https://habrastorage.org/getpro/habr/upload_files/784/ca2/813/784ca2813ced2ef90b117cba48433754.jpg)
Тёмная тема: синхронизация между всеми командами
На Android тёмная тема была реализована уже к концу 2023 года, а релиз случился сразу после новогодних праздников. На iOS же у тёмной темы был более низкий приоритет относительно других фичей. Это было связано с тем, что большой процент фичей был завязан на очень старых компонентах, а часть кода была написана на Objective-C, и на рефакторинг требовалось много времени. Но после релиза тёмной темы на Android мы стали получать много положительных отзывов и вопросов о том, когда такое же обновление появится и на iOS. Поэтому приоритет задачи пришлось повысить.
За три месяца до релиза тёмной темы в банке появилась новая команда, отвечающая за внедрение этой фичи. Нужно было провести полное ревью всего приложения на обеих платформах и обнаружить все баги, а сценарии, отрисованные ещё на старых цветовых токенах, полностью перекрасить, ориентируясь на скриншоты и зоркий дизайнерский глаз.
Это была командная работа в самом ярком её проявлении — мы передавали ревью разделов ребятам из соответствующих команд, общались с их разработчиками и дизайнерами, обсуждали спорные моменты. Всё для того, чтобы сохранить в обновлённых и старых разделах приложения единую логику цветовой палитры и общий внешний вид экранов в светлой и тёмной темах.
Юлия Гранкина, дизайнер интерфейсов red_mad_robot
![Сделали тёмную тему единообразной и логически продолжающей светлую Сделали тёмную тему единообразной и логически продолжающей светлую](https://habrastorage.org/getpro/habr/upload_files/9fb/eb1/2e9/9fbeb12e992d97daae2d42a8f2e4945f.jpg)
Оплата мобильной связи: улучшение сценария на основе существующей дизайн-системы
В процессе разработки нового сценария оплаты мобильной связи нашей основной задачей было перенести старый сценарий на современные компоненты дизайн-системы. Мы стремились улучшить пользовательский опыт, сократив количество кликов в процессе — предположили, что это значительно повысит количество пользователей, которые платили бы за мобильную связь через приложение «Райффайзен Банка», а не через приложение оператора. Но во время работы над целевым сценарием произошёл форс-мажор с платформой QIWI.
Вызовы в разработке
В феврале 2024 года у «КИВИ Банка» — сервис-провайдера всех мобильных платежей «Райффайзен Банка» — отозвали лицензию. У всех пользователей банка одномоментно перестали проходить транзакции по оплате мобильной связи. Это был серьёзный вызов: мы работали как единая команда, не разделяя задачи на «свои» и «банка».
Благодаря этому нам удалось восстановить работоспособность оплаты временным способом для отдельных операторов за двое суток. Полностью восстановить возможность оплаты мобильной связи для всех операторов получилось всего за один двухнедельный спринт.
![](https://habrastorage.org/getpro/habr/upload_files/696/9b9/fe4/6969b9fe4ba9187b6710cc4b47dc896c.jpg)
В части разработки у нас было несколько челленджей:
Легаси и устаревший язык. Первая версия приложения была написана в 2018 году. Тогда в iOS использовался старый язык Objective-C, но со временем мы отказались от экранов, написанных с помощью Objective-C и написали их на Swift, уйдя от легаси. Бывало так, что одна простая фича своими связями тянулась в core-компоненты, написанные на Objective-C, и мы столкнулись с тем, что много легаси-кода нужно было переводить с одного языка на другой. А за 5+ лет существования Swift программистов со знанием Objective-C становится всё меньше. Поэтому поиск людей в команду усложнялся, а нашим разработчикам приходилось разбираться в незнакомом языке.
Оверинжиниринг. Спустя много лет существования приложения сориентироваться в коде иногда было сложно. Чтобы наша команда смогла выйти на ту же производительность, что и разработчики «Райффайзен Банка», приходилось с этим разбираться.
Пристальное внимание на приёмке кода. Мы как партнёры банка должны были проходить приёмку кода со стороны команд «Райффайзена». Нужно было получить два лайка на наш мердж-реквест, чтобы его влили в мастер-ветку и потом можно было сделать релиз. Первые полгода нас смотрели очень внимательно — были споры из-за код-стайла, приходилось получать много разъяснений от банка просто потому что мы были не в контексте многолетней разработки приложения. Но со временем, когда мы во всём разобрались, некоторым роботам дали права на расставление лайков, и уже мы сами вместе с разработчиками банка начали ревьюить код других ребят из «Райффайзена».
У iOS- и Android-разработчиков получилось глубоко разобраться в кодовой базе банка и получить высокий кредит доверия. Сейчас новичков, которые выходят в собственную команду «Райффайзен Банка», зачастую посылают к нашим ребятам для передачи знаний.
Михаил Тиханенков, менеджер проектов в red_mad_robot
Антикризисный режим
После того, как мы показали отличный результат по направлению «Навигация», банк захотел создать такую же команду для стрима «Платежи и переводы», чтобы усилиться и успеть всё вовремя. Банк пришёл с этой задачей в августе 2023 года, и мы начали работать.
Мы ожидали, что ребята из «Платежей» начнут сразу выдавать такой же результат, как сработавшаяся команда «Навигации». Но новый стрим оказался полноценным запуском нового продукта, и процессы в нём происходили соответствующие: онбординг, погружение в контекст, сонастройка членов команды, выработка договорённостей. Не стоило воспринимать запуск «Платежей и переводов» как логичное продолжение «Навигации».
Вместе с этим мы столкнулись со сложностями в команде разработки. Не всем разработчикам подходит такой проект — в нём много легаси и зависимостей. Писать что-то с нуля — одно дело, а погружаться в контекст приложения, которому много лет, — другое. С этой точки зрения нам подходили не все разработчики — периодически приходилось заниматься быстрой ротацией людей, чтобы не отставать по срокам.
Все эти трудности сказались на качестве нашей работы, и банку это было очевидно. Спустя пару месяцев такой работы мы оказались в кризисе. Чтобы не потерять ценное партнёрство, мы приняли решение разработать план по спасению стрима, разбив действия на несколько направлений:
Выработка самостоятельности, чтобы партнёр не тратил время на погружение роботов в контекст. Команда банка тратила слишком много ресурса, и это сказывалось на впечатлении о нашей работы. Вместо вопросов и проблем мы начали приходить к банку с возможными вариантами их решения.
Обеспечение прозрачности всех процессов. Банк не понимал нашу внутрянку, а ему это было важно. «Райффайзен» хотел понимать, чем занимается практически каждый человек в нашей команде. Мы договорились о коммуникации команды с банком или через менеджера или через лидов практик, расписали, как устроены все внутренние процессы, и представили это банку. А ещё дали своим ребятам задание налаживать горизонтальные коммуникации с практиками банка: чтобы наши тестировщики общались и совместно решали проблемы с тестировщиками банка, iOS-разработчики — с iOS-разработчиками, и т. д.
Создание чек-листа требований к фиче. Аналитики разработали специальный чек-лист по проверке и наполнению требований, чтобы охватить весь пул и понимать, в какой момент и в каком виде банк должен согласовывать требования по разработке.
Регулярный сбор обратной связи. Раз в неделю мы приходили к продакт-оунеру, CPO или Scrum-мастеру и спрашивали, как они оценивают изменения. Спустя месяц антикризисного режима в банке сказали, что видят положительные изменения: работать стало проще, команда стала эффективнее.
Мы провели месяц в активном антикризисном режиме, ещё месяц внимательно наблюдали за стримом, и только после этого стали чувствовать себя увереннее и спокойнее.
Что в итоге
Вместе с командой банка у нас получилось сделать красивое и функциональное приложение. Навигация стала логичнее, у перегруженного раздела «Ещё» появился помощник — раздел «Профиль», а ещё в приложении наконец появилась тёмная тема.
За месяц существования в антикризисном режиме нам удалось сохранить и даже развить стрим платежей: быстро сформировать core-team, вовлечь всех лидов в процесс и разработать удобный инструмент для работы с требованиями к фиче.
За 3,5 месяца мы провели большое исследование перспектив развития мобильного приложения «Райффайзен Онлайн» в 2024 году. В результате мы сформировали бэклог исследований и разработки из 40 приоритетных гипотез и фичей, которые помогут приложению стать ещё лучше.
В декабре 2023 года обновлённое приложение «Райффайзен Онлайн» завоевало первое место в диджитал-премии Tagline Awards в номинации «Лучший mobile- / AR- / VR- / IoT-проект».
Над материалом работали:
текст — Алина Ладыгина,
иллюстрации — Юля Ефимова.
Чтобы ничего не пропустить, следи за развитием цифры вместе с нами:
Да пребудет с тобой сила роботов! ?
Комментарии (12)
d-stream
22.08.2024 10:33Прям анекдот про перестановку кроватей...
Как любые свистоперделки приложения/сайта могут заманить клиента открыть например вклад под 2% годовых, если другие банки предлагают почти на порядок больше?
p. s. Ну и да, отток клиентов чуть уменьшается искусственно, т.к. фактически "уже не клиенты" (с полностью закрытыми счетами, картами, иис и тп) так и висят в базе с активными учетками.
unreal_undead2
22.08.2024 10:33например вклад под 2% годовых
Вроде они сейчас больше 0 не дают. Единственная полезная функциональность - 300 000 р. в день в другие банки по СБП без комиссии, так что как перевалочный пункт сойдёт.
d-stream
22.08.2024 10:33Дак сейчас вроде как 30млн ограничение (переводы себе) - то есть и это уже не есть фишка.
unreal_undead2
22.08.2024 10:33Так у Райфа приведённая цифра - кому угодно.
d-stream
22.08.2024 10:33С другой стороны - не такая уж и востребованная услуга, тк скорее всего к физику, регулярно гоняющему по 300к в день придут фискалы с вопросами)
Ну и остаются ещё внутрибанковские: супруге перекидывал сбер-сбер сумму больше 300 - комиссии не было (возможно это не через сбп, но по номеру тел и мгновенно)
unreal_undead2
22.08.2024 10:33супруге перекидывал сбер-сбер сумму больше 300 - комиссии не было
Подписки Сберпрайм или чего нибудь подобного при этом нет?
d-stream
22.08.2024 10:33Да, не исключено что это искаженный подписками опыт
Но вот на днях так же себе из банка в банк перекидывал по номеру - возможно автоматом по нему и определилось что "себе" - тоже без комиссии
Dolios
22.08.2024 10:33Задача: остановить отток пользователей
Хм, может продолжить оказывать востребованные банковские услуги, вместо ввода заградительных ограничений и прекращения оказания этих самых услуг клиентам? Не, фигня какая-то... Редизайн приложения!
На фоне всего происходящего, статья выглядит как жесткий стёб.
outlingo
22.08.2024 10:33Это статья от аутсорсинговой компании, которую наняли на разработку/доработку приложения. Они не отвечают за самоубийственное пике в которое вошел банк.
unreal_undead2
Мне казалось, что у российского Райфа в последнее время задача обратная.
outlingo
Ну им из Австрии приказали самоубиться, вот они и стараются
unreal_undead2
Это то понятно, непонятен тезис в статье.