Новый интерфейс на старых рельсах: редизайн личного кабинета банка из Новой Зеландии
2026-02-21 03:23 Diff
https://skillbox.ru/media/design/new-zealand-nzhl/

#кейсы

  • 9 ноя 2022
  • 0

Новый интерфейс на старых рельсах: редизайн личного кабинета банка из Новой Зеландии

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

Иллюстрация: Colowgee для Skillbox Media

Журналист, автор статей про моду, искусство и дизайн. Кастомизирует одежду и влюбляет людей в английский язык.

NZHL (New Zealand Home Loans) — новозеландская сервисная компания. В конце нулевых она разработала личный кабинет для своих клиентов, и с тех пор он оставался практически без изменений. Со временем в компании решились на редизайн: изменения должны сделать инструмент более удобным для пользователей и одновременно нащупать точки роста для бизнес-показателей.

О работе над проектом рассказали менеджер продукта Николай Ильюшкин и дизайнер Стас Савенков. Николай живёт и работает в Новой Зеландии, а Стас — в Великобритании.

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

Продуктовый и трансформационный менеджер. Реализовал ряд digital-трансформаций в России, Австралии и Новой Зеландии. Николай превращает большие компании в живые и гибкие, способные к самоорганизации и развитию.

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

Изображение: Стас Савенков / NZHL

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

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

За шесть месяцев до старта нашей работы компания обновила основной сайт, шаблоны маркетинговых коммуникаций, шаблоны для SMM и мелкого мерча, используемого в офисе. Мы старались играть по правилам нового стиля, определённого другим агентством, не теряя связи с брендом и графическим оформлением. Это важно для сохранения ощущения целостности при переходе между веб-сайтом и нашим приложением, между email’ом и сайтом.

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

Мы старались минимизировать зависимость от legacy-систем «под капотом». Каждое изменение влекло за собой увеличение конечной стоимости решения и кратно удлиняло сроки запуска. Нашей задачей было максимально эффективно использовать то, что есть: API и данные партнёров.

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

Средняя стоимость дома в мае этого года в Окленде составила 1 472 369 долларов (90 182 601 рубль), а средний размер ипотеки — 680 000 долларов (41 650 000 рублей).

Ипотека в России и большинстве стран СНГ очень проста: берёшь 5 млн рублей на 30 лет под 10% — всё просто и понятно. Твой платёж составит 45 000 рублей в месяц в следующие 30 лет.

В Новой Зеландии, Австралии и Англии ипотека работает не так. Процентная ставка фиксируется не на 30 лет сразу, а только на 1, 2, 3 или 5 лет вперёд. А может и вовсе не фиксироваться и следовать за ставкой местного ЦБ. Могут быть комбинации ипотек с разными ставками на разные сроки.

На практике это означает, что еженедельный платёж по ипотеке может превратиться из 800 долларов в 1500 одним осенним утром и к этому нужно быть готовым. Да, еженедельный, мы не опечатались.

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

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

  • 600 тысяч долларов с фиксированной ставкой на два года под 4,5%;
  • 250 тысяч долларов с фиксированной ставкой на год под 3%;
  • 150 тысяч долларов с плавающей ставкой, допустим, под 4%.

Третья часть кредита ― офсетная (от английского offset). Это значит, что деньги можно «класть» в эту часть кредита и «забирать» из неё. Пока деньги там лежат, проценты платить не надо, а поскольку проценты начисляются ежедневно, то чем больше у вас там денег и чем дольше они лежат на счету ― тем меньше ваш платёж по процентам и тем быстрее вы закроете всю ипотеку.

К третьей части ипотеки привязана карта, вы можете тратить эти деньги на что угодно: хоть на еду, хоть на ремонт кухни, хоть на новую Tesla под 4% годовых.

А если вдруг завтра ставка ЦБ взлетит ― риск будет не таким большим.

За счёт того, что весь долг разделён на разные порции с разными процентами и временем фиксации, риск сработает не на всю сумму. Например, вы взяли ипотеку на 1 млн долларов 1 сентября 2022 года, тогда:

0Сумма долгаСтавкаРискFixed Term 2 year600 тысяч долларов4,5%Ставка 4,5% сохранится до 1 сентября 2024 годаFixed Term 1 year250 тысяч долларов3%Ставка 3% сохранится до 1 сентября 2023 годаFloating150 тысяч долларов4%Ставка будет следовать за рыночной ставкой для floating-ипотек

Таким образом, если в ноябре местный ЦБ повысит плавающую ставку до 5%, то процент увеличится только для 150 тысяч долларов (минус сбережения), а не для миллиона. Фиксируя разные части под лучшие условия, можно добиться снижения рисков стагнации рынка в горизонте 1–5 лет. «Шок» не будет сиюминутным, и у семьи будет время подготовиться.

Чтобы понять, как компания может дифференцировать себя, мы провели исследование конкурентов:

  • Топ-5 новозеландских банков — их предложения и сервисы, связанные с ипотекой.
  • Топ-5 ипотечных брокеров, а также состояние дел на австралийском рынке.

С помощью Blue Ocean Canvas мы показали лидерам NZHL, как можно усилить продукт. Мы выделили точки роста.

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

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

  • увеличивает количество обслуживаемых людей на единицу времени;
  • повышает качество обслуживания;
  • мотивирует клиентов рекомендовать компанию друзьям и знакомым.

Настройка каналов привлечения новых лидов. Бизнес-модель компании строится вокруг обслуживания, так как показатель LTV (Lifetime Value) от одного клиента прямо пропорционален количеству времени, проведённого с компанией. Клиенты не уходят к банкам-конкурентам, многие из них имеют несколько домов или ипотек в течение жизни.

Настройка каналов привлечения напрямую увеличивает количество клиентов в компании.

Blue Ocean Canvas
Скриншот: Blue Ocean Canvas / Skillbox Media

Мы провели мини-воркшоп с руководством, где обсудили приоритеты компании и точки роста — разбили их на тематические карточки и сделали «стену» возможностей:

Слайд из воркшопа и фотка кусочка «стены возможностей»
Изображение: Стас Савенков

Директора филиалов получили виртуальные 100 долларов, с помощью которых могли «финансировать» карточки на стене. Это дало нам валидацию приоритетов и сделало директоров «соучастниками» изменений.

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

С точки зрения визуальных решений российские digital-продукты в сфере массмаркета находятся на высоком уровне в сравнении с западным миром.

«Тинькофф», «Сбер», «Альфа-Банк», «Билайн» — у всех этих компаний отличные цифровые продукты для повседневных нужд пользователей.

В одной из версий прототипа мы сделали разбивку расходов по категориям и показали с ней статистику ежемесячных трат. Она есть почти у всех банков России. В Великобритании это редкость. В Новой Зеландии её нет, хотя, согласно опросам, люди хотят умных интерфейсов, которые смогут предоставить минимальную аналитику — например, по тратам за месяц. Такая фича могла бы «выстрелить» в части engagement’а с новым инструментом.

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

Самый первый прототип был сконцентрирован на событиях вокруг транзакций и вехах в ипотеке. Мы предлагали сделать страницу с вертикальным таймлайном. Он начинается с текущего дня и продолжается прогнозом о том, что будет происходить со счётом. Мы видим цель №1 через два года, цель №2 через три года:

Черновик того самого решения с таймлайном, которое мы в итоге не стали использовать
Инфографика: Стас Савенков

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

Покопавшись в данных, мы нашли весомую часть пользователей с несколькими сложными ипотеками, домами и трастами — их тоже нужно было изящно вписать в интерфейс.

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

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

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

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

У нас было два ключевых сегмента: покупатели первого дома (FHB, First Home Buyers) и клиенты, переходящие от конкурентов, которые рефинансируют свои ипотеки. Мы использовали Jobs-To-Be-Done (JTBD) для определения продукта.

Мы проходили через серию user-research-интервью, чтобы понять, каким конкретно делать продукт для каждого из сегментов и какие ещё small/micro jobs нам можно или нужно закрыть для них. Мы изучали:

  • какие проблемы есть у каждого сегмента, какие ещё мелкие работы мы можем для них решить;
  • как пользователи решают эти проблемы сейчас;
  • каков пользовательский путь (customer journey) клиентов с доминирующими решениями.

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

Например, отсутствие базовых функций привычного личного кабинета решалось звонком консультанту. Инсайт был в том, что большинство клиентов обожали своих консультантов, но боялись отвлекать их по мелочам, поэтому часто мелкие вопросы, такие как «До какой даты действует текущая ставка кредита?» или «Как изменится срок кредита, если выплачивать на 100 долларов больше ежемесячно?», оставались без ответа.

Другой пример — информация об оценочной стоимости дома. Клиентам, у которых уже была ипотека в течение 3–5 лет, эта информация была крайне нужна, чтобы принять решение о будущем: продавать ли дом, покупать ли второй. Вынести это в личный кабинет было очень просто технологически, а удовлетворённость клиентов вырастала кратно.

Мы должны были убедиться, что вся важная с точки зрения консультантов информация есть в интерфейсах.

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

Исследования с пользователями удивили нас намного больше.

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

Прототип главной страницы с исследований
Изображение: Стас Савенков / NZHLПрототип одной из внутренних страниц с исследований
Изображение: Стас Савенков / NZHL

График, который успешно работал на встречах с консультантами, вызывал лишь вопросы во время интервью с пользователями.

Страница с графиком платежей и статистикой того, как сумма долга меняется со временем
Изображение: Стас Савенков / NZHL

Мы сделали подводки через виджеты «А что, если…», где показывали примеры, как изменится долг и сроки выплаты ипотеки клиентов, если они внесут разовый платёж, увеличат ежемесячные платежи, начнут пользоваться кредитной картой или же потратят 30 тысяч долларов на ремонт кухни и отпуск на Фиджи.

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

Виджеты «А что, если…», которые живут на странице с графиком платежей
Изображение: Стас Савенков / NZHL

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

Первые подходы к проектированию разбивки доходов и расходов со счёта
Изображение: Стас Савенков / NZHL

К сожалению, в Новой Зеландии open-banking ещё не был публично доступен, и, протестировав идею в прототипе, мы приняли решение добавить это чуть позже.

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

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

Мы также встретили некий скепсис на тему реализуемости части идей со стороны IT‑департамента компании.

Вовлечение представителей IT в исследование в качестве наблюдателей позволило усилить эмпатию между ними и пользователями. Что самое важное — благодаря этому выросло доверие к предлагаемым нами продуктовым и дизайн-решениям. Нам очень повезло, что NZHL выбрали Deloitte Digital в качестве подрядчика по разработке ― мы тесно работали и всегда понимали реализуемость решений.

Для руководства компании была важна прозрачность и понятность процесса — банковский бизнес довольно консервативный, а мы хотели внести digital-нововведения. К fail fast и agility многие на этом рынке ещё не готовы.

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

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

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

Главная страница сервиса
Изображение: Стас Савенков / NZHLСтраница с графиком и виджетом «А что, если…»
Изображение: Стас Савенков / NZHLРазделы трат и структуры счетов
Изображение: Стас Савенков / NZHLРаздел профиля и часть мобильных макетов
Изображение: Стас Савенков / NZHL

Мы не можем раскрывать цифры по конверсии, но количество ипотечных займов выросло на 7%, а продуктивность менеджеров по ипотеке увеличилась на 17%.

Приложение разрабатывается партнёром компании Deloitte Digital по нашим дизайнам. Сейчас оно доступно ограниченному количеству пользователей с планом завершить rollout до весны.

Мы также получили две золотые награды Indigo Awards в номинациях Digital Tools and Utilities и Interactive Design и одну бронзовую в UX, Interface & Navigation ??

  • Стас Савенков ― дизайнер.
  • Николай Ильюшкин ― менеджер продукта.

Больше дизайнерских кейсов

Попробуйте бесплатно 4 топовые профессии в дизайне
Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→