Не так давно Альфа-Банк Украина провел конкурс, предложив всем желающим спроектировать дизайн-концепт мобильного банка для двух вариантов использования, видимо, осознав, что их текущее приложение не отвечает ожиданиям пользователей.
Особый акцент в описании конкурса делался на UX, так что задача показалась нам интересной. Правда с момента знакомства с конкурсом и датой окончания приема заявок оставалось всего 5 дней. Что ж, вызов принят.
![](https://habrastorage.org/r/w780q1/webt/fe/p-/hj/fep-hj8cdxasefz1jgetqlbkt2s.jpeg)
Под катом длинная, но полезная история о проектировании интерфейса мобильного банка в сжатые сроки. Тех, кто ее осилит, в конце ждет бонус.
Времени на полноценные исследования не было, поэтому был выбран простой путь: анализ существующих маркетинговых активностей, получение консультаций по продуктам с колл-центром, интервью с несколькими клиентами банка и коридорные тестирования прототипа.
Разработка дизайн-концепта основывалась на методологии UCD. Ключевые инструменты:
Первый предложенный use case звучал так:
Инсайт #1
Согласно предложенному кейсу, пользователю нужна кредитная карта, так что можно смело убрать 9 дебетовых карт. Осталось 8 – уже проще.
Инсайт #2
При ближайшем рассмотрении оказалось, что 8 кредитных карт слабо отличаются друг от друга. Но есть одна, обладающая максимальными преимуществами и имеющая самую сильную маркетинг-поддержку.
Учитывая контекст заказа карты и use case, целесообразно предлагать пользователю только одну карту, демонстрируя ее явные преимущества. Такой подход значительно упрощает взаимодействие с интерфейсом, а значит — повышает конверсию. И главное — это соответствует существующей маркетинговой стратегии банка.
Итого: наша задача «продать» только одну, но самую «вкусную» кредитную карту.
Да, персоны – вымышленные герои. Но правильно составленная персона помогает команде фокусироваться на нужных вещах и совершать меньше ошибок. Персона должна быть максимально реалистичной и когерентной кейсу.
Для кейса заказа кредитной карты мы составили такую персону:
![](https://habrastorage.org/r/w1560/webt/hu/40/cp/hu40cpf0la_ooyjdptpzvwtp7uc.png)
Сценарий – вымышленная история о последовательности событий персоны в «повседневной жизни» на пути к достижению цели. В сценарии важно зафиксировать где сейчас находится пользователь, степень его отвлеченности (окружение), с помощью чего он взаимодействует с продуктом (технологии), зачем и как он попал на продукт (контекст).
Признаки хорошего сценария:
Полный сценарий получился довольно объемным, поэтому для статьи приводим ключевые: окружение, технологии и контекст:
![](https://habrastorage.org/r/w1560/webt/d4/d5/jc/d4d5jczky32k7blkntct3gtz4xu.png)
![](https://habrastorage.org/r/w1560/webt/lt/r3/ug/ltr3ugd-x66uiday8w-s5t43svi.png)
Составив user flow и сформировав требования к каждому экрану, можно переходить к проектированию интерфейса. Разберем интерфейсные решения для каждого этапа пользовательского пути.
![](https://habrastorage.org/r/w1560/webt/d5/c3/au/d5c3aueiq-wfnrhgpxpiptgrqji.png)
![](https://habrastorage.org/r/w1560/webt/hw/yu/wz/hwyuwzefa9vqddg6v2rhdamwb-8.png)
Первый экран приложения после запуска максимально минималистичен и обеспечивает две ключевые потребности:
Учитывая сформированное ожидание на этапе рекламной коммуникации, а также то, что стать клиентом банка менее заманчивое предложение, чем карта с лимитом 200 000 грн, на первом экране сразу позиционируется карта с ключевыми преимуществами.
Блок с картой оформлен в виде баннера. Кредитная карта плавно скользит за границу экрана, давай понять, что на нее можно нажать.
![](https://habrastorage.org/r/w1560/webt/ag/an/o7/agano7de97m8ejwqexsek1uvjhc.png)
![](https://habrastorage.org/r/w1560/webt/y0/ye/vp/y0yevpztcdc6xmwt5aocpw7appu.png)
Заголовок «Получить кредитную карту от Альфа-Банк» четко формирует ожидания: «Нажав на эту штуку я смогу заказать карту»
![](https://habrastorage.org/r/w1560/webt/8v/0v/gv/8v0vgvhacnrylvzx8gdilb4qsoa.png)
![](https://habrastorage.org/r/w1560/webt/we/ep/es/weepesx91umoeprgujmfiakpdju.png)
Слайдер из 5 экранов раскрывает основные преимущества кредитной карты Максимум на простом и понятном языке.
Первый слайд содержит ключевую информацию. Каждый последующий слайд ее расширяет.
![](https://habrastorage.org/r/w1560/webt/vk/-g/ap/vk-gapj16exe8gbvvixais9td30.png)
![](https://habrastorage.org/r/w1560/webt/jj/sp/kc/jjspkcaj0lqtya_qjifj75iakge.png)
Изучив текущие формы на сайте и пообщавшись со службой поддержки мы выяснили, что открытие карты удаленно в любом случае происходит через колл-центр. Учитывая также, что у пользователя может не оказаться нужных документов под рукой, для заказа карты достаточно всего лишь ввести и подтвердить номер телефона.
По номеру телефона можно также отловить и существующих клиентов банка, предложив им другой сценарий взаимодействия.
![](https://habrastorage.org/r/w1560/webt/fk/lb/ci/fklbci1tyzb2183om1qwizaax_q.png)
![](https://habrastorage.org/r/w1560/webt/4w/63/u7/4w63u716hpa7dcugu5-gzb1wx0i.png)
Для заказа карты достаточно ввести только номер телефона. Все остальное сделает колл-центр.
Заполнение анкетных данных — сложная для пользователей задача. Еще больше она осложняется тем, что не всегда под рукой могут быть нужные документы.
Этап с заполнением анкеты не является обязательным. Интерфейс сообщает, что карта уже заказана. И только если пользователь хочет ускорить процесс, он может заполнить анкету самостоятельно.
![](https://habrastorage.org/r/w1560/webt/yh/mf/yk/yhmfykps5lcmmpkn98oahlp6uys.png)
![](https://habrastorage.org/r/w1560/webt/of/0o/te/of0oteopbfju3zkly8igerrvucm.png)
При переходе к самостоятельному заполнению анкеты пользователь видит простую форму с минимальным количеством полей.
Все пункты простые и не требуют наличия под рукой каких-либо документов.
Нажимая кнопку Сохранить, пользователь видит, что есть и другие формы. Для их заполнения нужны документы. Но ничего не является обязательным. Он понимает, что все сохранено и он может продолжить заполнение позже, если потребуется.
![](https://habrastorage.org/r/w1560/webt/hx/nn/js/hxnnjs5pxge8gde3an-bwj2pv04.png)
Формы сгруппированы таким образом, чтобы их можно было заполнить, имея при себе только часть информации. Например, если пользователь знает свой ИНН наизусть, он может его заполнить. В то же время для тех, кто его не помнит и не имеет под рукой, не создаются сложности с заполнением других данных.
![](https://habrastorage.org/r/w1560/webt/ku/ct/dm/kuctdmb9dnca8fj-zxrkz7ckhn4.png)
Заполнив все поля самостоятельно или с помощью колл-центра, пользователь видит соответствующий экран подтверждения.
На этом экране впервые мягко запрашивается разрешение на отправку PUSH-уведомлений в обмен на понятную ценность для пользователя: отслеживание статуса карты.
В iOS и Android есть всего один шанс получить разрешение на отправку уведомлений в приложении, поэтому системное окно запроса отображается только в том случае, если пользователь его вызывает осознанно.
![](https://habrastorage.org/r/w1560/webt/mu/t2/fw/mut2fw6uwaejk1dwquargidcc4a.png)
![](https://habrastorage.org/r/w780q1/webt/fe/to/ri/fetorizkwu5yfw5tgrfe1ilosn0.jpeg)
Пока карта нового клиента Альфа-Банк выпускается, приложение отображает в режиме реального времени текущий статус карты.
На любые вопросы клиента оперативно ответит служба поддержки в Альфа-чате.
Когда придет время получать карту, курьер позвонит и согласует удобное время и место доставки.
![](https://habrastorage.org/r/w1560/webt/ri/hp/vc/rihpvcuqosdp9c1zloqsk0b-cde.png)
Цель достигнута, клиент доволен:
![](https://habrastorage.org/r/w1560/webt/ok/eh/t_/okeht_jj4zumtmetobdbymyocns.png)
«Это лучшая карточка, которая у меня когда-либо была. Столько свободы и шикарный кешбэк. И заказать ее было так просто!»
Одним из требований кроме закрытия двух use case, была визуализация концепта главного экрана. Так как отдельного use case для главного экрана в задании не было, мы обратились к недавним исследованиям компании Usabilitylab и выяснили, что приложение мобильного банка должно соответствовать трем ожиданиям:
Мы разместили их все на одном экране, обеспечив простой и быстрый доступ к самым важным функциям мобильного банка.
![](https://habrastorage.org/r/w1560/webt/su/px/h1/supxh1aqr3s4zr7sydr_qduhmns.png)
Остатки на счетах видны сразу. Чтобы просмотреть все карты не нужно переходить на отдельный экран. Достаточно просто прокрутить список карт, и контент на экране оптимизируется для удобного взаимодействия с ними.
Все действия по всем картам в одном месте. Умная лента похожа на популярные мессенджеры и не только предлагает быстрый доступ ко всем совершенным операциям, но и напоминает о необходимости оплатить коммуналку или заработать, открыв депозит. Чтобы увидеть все, не нужно переходить на отдельный экран. Достаточно просто прокрутить ленту и контент на экране оптимизируется для удобного взаимодействия с ней.
Главное в центре. Ключевые действия: пополнить, оплатить, перевести всегда под рукой, даже когда вы взаимодействуете с картами или выпиской.
Состояния главной экрана при взаимодействии со списком карт и событиями.
![](https://habrastorage.org/r/w1560/webt/pt/ma/0n/ptma0nbt050stp_gxv_ooojs9i0.png)
Второй предложенный use case звучал так:
Альфа-Банк предлагает несколько вариантов депозитов в разных валютах, на различные периоды и процентные ставки.
Инсайт #1
Учитывая use case, отрабатываем только сценарий открытия депозита в гривне.
Инсайт #2
Согласно use case клиента интересует вклад на год, а значит, сберегательный депозит с пониженной доходностью в рамках данного решения также не рассматриваем.
Итого: наша задача «продать» самый выгодный для клиента депозит с высокой процентной ставкой на срок от 3 до 18 месяцев, с выплатой процентов в конце или ежемесячно.
![](https://habrastorage.org/r/w1560/webt/n5/vz/bp/n5vzbpwiprlefciiztybacod178.png)
![](https://habrastorage.org/r/w1560/webt/fv/km/y2/fvkmy2b0z-4fzeyqwsekk7l3uo0.png)
![](https://habrastorage.org/r/w1560/webt/cx/zm/xv/cxzmxv6pm7qrdo2erqcmpo9wp3e.png)
И разберем интерфейсные решения для каждого этапа пользовательского пути.
![](https://habrastorage.org/r/w1560/webt/sn/cq/jl/sncqjl0uk5wk_m_nnwb1fbp7p6m.png)
![](https://habrastorage.org/r/w1560/webt/ku/2l/md/ku2lmdael7r6csquims58o6eduu.png)
Основной путь открыть депозит в мобильном приложении — перейти в соответствующий раздел меню. Экран кратко сообщает об условиях размещения депозита и фокусирует на возможности рассчитать доход от суммы вложения.
Но есть еще один путь — перейти сразу к рассчитанным вариантам депозитов прямо с главного экрана мобильного банка. Используя специальные алгоритмы, система предлагает открыть депозит тем клиентам, которые по ряду признаков наиболее к этому склонны (например, остаткам на карточном счете).
![](https://habrastorage.org/r/w1560/webt/n8/0g/wc/n80gwcvlca74j3xxb4vfsfq2dm0.png)
![](https://habrastorage.org/r/w1560/webt/gr/ls/lt/grlsltfxtsckc3kodmgrafcspgc.png)
![](https://habrastorage.org/r/w1560/webt/xg/rm/q5/xgrmq5daeo9smelx_vedfip2o5e.png)
Представление депозитов максимально упрощено и фактически состоит из двух настроек:
Выбор способа получения процентов реализован в виде карточек, объединенных в слайдер.
Таким образом ключевым на экране всегда остается процентная ставка и размер дохода.
![](https://habrastorage.org/r/w1560/webt/q2/ne/f7/q2nef7sxpmbp8ypiaqaeklbroxi.png)
![](https://habrastorage.org/r/w1560/webt/68/jc/6e/68jc6e2dfbj-tovmuyiiczir7fs.png)
![](https://habrastorage.org/r/w1560/webt/xn/ni/vy/xnnivyuhqvett1uds4lwrxozagi.png)
Мимикрируя под классическое оформление заказа в интернет-магазине, каждый этап оформления депозита содержит ключевую информацию: сумму вложения, срок, процентная ставка, а также напоминает о выгодах.
Внести деньги на депозит можно несколькими способами.
Значительно возросшая степень ответственности может стать причиной отказа, если на какие-либо вопросы пользователь не получит ответ тут же. Снизить степень накала позволяет Альфа-чат, доступный прямо в этом экране. Никуда уходить не нужно.
![](https://habrastorage.org/r/w1560/webt/2s/h_/ie/2sh_ier-gtjdybe4qksvcvifh24.png)
![](https://habrastorage.org/r/w1560/webt/x-/tn/vv/x-tnvvzl27oftqhi19fsk3adm6i.png)
Этот экран показывается только в случае, если у пользователя несколько карт. Если карта всего одна, переход к подтверждению оплаты происходит сразу.
Экран акцентирует внимание на картах, которые подходят для совершения оплаты.
Если у пользователя есть другие карты не подходящие для этой оплаты, они также отображаются, но в отдельном списке. Таким образом не создается ощущение ошибки: «Стоп, я хотел оплатить с другой карты, где же она? Наверное, что-то не работает».
![](https://habrastorage.org/r/w1560/webt/jk/m6/of/jkm6ofk6ks7scdmqcqmj6rxyir0.png)
![](https://habrastorage.org/r/w1560/webt/8c/rj/hk/8crjhk5xfqsllmmiuwl5e93jlsc.png)
Финальный экран оформления депозита содержит всю ключевую информацию о депозите, способе и сумме оплаты.
Подпись под кнопкой напоминает, что это все что нужно для оформления депозита. Посещать банк нет необходимости.
![](https://habrastorage.org/r/w1560/webt/pt/bw/mt/ptbwmtujt3cknkh0j5hdbgw_1ns.png)
На финальном экране пользователь видит информацию об успешном открытии депозита.
Чтобы эмоционально подкрепить пользователя после расставания с деньгами, ему крупно напоминается о ценности: доходе, который он получит в конце срока депозита.
Кнопка «Посмотреть мои депозиты» возвращает пользователя в обычный интерфейс приложения.
![](https://habrastorage.org/r/w1560/webt/wu/1d/df/wu1ddf90p2jctiljxshcgh57pek.png)
![](https://habrastorage.org/r/w1560/webt/n3/jr/hi/n3jrhif1dov0djnklgppvwqigvi.png)
С активным депозитом представление экрана «Депозиты» меняется. Ключевой акцент смещается на открытые депозиты.
Депозит легко идентифицировать по сумме вложения.
Прогресс-бар позволяет быстро отслеживать состояние депозита. При условии открытия депозита с ежемесячной выплатой процентов, на прогресс-баре появляются соответствующие сегменты. Достижение сегмента — выплата процентов.
Для управления настройками депозита достаточно на него нажать (привычный паттерн, применяемый во всем приложении).
![](https://habrastorage.org/r/w1560/webt/uy/ka/d8/uykad888n6x6kh8k1m10jeclhdk.png)
Цель достигнута, клиент доволен:
![](https://habrastorage.org/r/w1560/webt/5n/uf/-s/5nuf-sq3wdyfrxxe24g9ifzy2v8.png)
«Мои деньги в надежном месте и работают на меня. Открыть депозит было так просто!»
Основной акцент в нашей работе был сделан на интерфейсе прототипа и в дополнение к нему отрисованы несколько макетов основных экранов. Еще часть времени ушла на оформление интерактивной презентации. В итоге на весь квест потратили 72 часа в течение 5 рабочих дней.
Эта история о том, как имея даже ограниченные ресурсы и время, можно создавать более удобные и полезные интерфейсы.
Учитывая отсутствие времени и статус задачи, мы сильно упростили привычные процессы проектирования и пренебрегли двумя важными этапами: исследования и полноценное тестирование.
Но даже несмотря на это всего за 5 дней и с помощью простой методологии нам удалось создать куда более удобный интерфейс, чем то, с чем сейчас приходится ежедневно взаимодействовать тысячам клиентов банков.
Дочитали до конца? Вот и обещанный бонус – интерактивный прототип, который можно поклацать.
P.S. Если этот материал оказался полезен, есть еще.
Особый акцент в описании конкурса делался на UX, так что задача показалась нам интересной. Правда с момента знакомства с конкурсом и датой окончания приема заявок оставалось всего 5 дней. Что ж, вызов принят.
![](https://habrastorage.org/webt/fe/p-/hj/fep-hj8cdxasefz1jgetqlbkt2s.jpeg)
Под катом длинная, но полезная история о проектировании интерфейса мобильного банка в сжатые сроки. Тех, кто ее осилит, в конце ждет бонус.
Времени на полноценные исследования не было, поэтому был выбран простой путь: анализ существующих маркетинговых активностей, получение консультаций по продуктам с колл-центром, интервью с несколькими клиентами банка и коридорные тестирования прототипа.
User-Centered Design
Разработка дизайн-концепта основывалась на методологии UCD. Ключевые инструменты:
- Персоны (persons) — собирательные образы типичных представителей целевой аудитории продукта, объединенные по ряду смежных признаков в персоны.
- Варианты использования (use cases) — краткое описание задачи в рамках продукта, которую необходимо выполнить персоне.
- Сценарии использования (scenarios) — вымышленные истории о последовательности событий персоны в «повседневной жизни» на пути к достижению цели.
Challenge #1: Заказ карты
Первый предложенный use case звучал так:
«Я, как не-клиент Альфа-Банка, хочу получить кредитную карточку, поскольку у нее одни из лучших условий на рынке, чтобы осуществлять платежи в Интернете и оплачивать коммунальные услуги»Ключевая проблема в том, что банк предлагает 17 вариантов карт, включая 8 кредитных и 9 дебетовых. В существующем приложении банка реализована попытка выбора среди них всех.
Инсайт #1
Согласно предложенному кейсу, пользователю нужна кредитная карта, так что можно смело убрать 9 дебетовых карт. Осталось 8 – уже проще.
Инсайт #2
При ближайшем рассмотрении оказалось, что 8 кредитных карт слабо отличаются друг от друга. Но есть одна, обладающая максимальными преимуществами и имеющая самую сильную маркетинг-поддержку.
Учитывая контекст заказа карты и use case, целесообразно предлагать пользователю только одну карту, демонстрируя ее явные преимущества. Такой подход значительно упрощает взаимодействие с интерфейсом, а значит — повышает конверсию. И главное — это соответствует существующей маркетинговой стратегии банка.
Итого: наша задача «продать» только одну, но самую «вкусную» кредитную карту.
Составляем персону
Да, персоны – вымышленные герои. Но правильно составленная персона помогает команде фокусироваться на нужных вещах и совершать меньше ошибок. Персона должна быть максимально реалистичной и когерентной кейсу.
Для кейса заказа кредитной карты мы составили такую персону:
![](https://habrastorage.org/webt/hu/40/cp/hu40cpf0la_ooyjdptpzvwtp7uc.png)
Пишем сценарий
Сценарий – вымышленная история о последовательности событий персоны в «повседневной жизни» на пути к достижению цели. В сценарии важно зафиксировать где сейчас находится пользователь, степень его отвлеченности (окружение), с помощью чего он взаимодействует с продуктом (технологии), зачем и как он попал на продукт (контекст).
Признаки хорошего сценария:
- Хороший сценарий последователен как танец и строит целостную историю (если пользователь сделал это, он ожидает вот это, но никак не другое).
- Хороший сценарий позволяет максимально проникнуться персонажем и пережить его (но не свой) опыт взаимодействия.
- Хороший сценарий не содержит описаний интерфейсных решений и ограничивается ожиданиями и ощущениями пользователя.
- Хороший сценарий позволяет построить качественный путь пользователя (user flow) и формализовать конкретные требования к интерфейсу.
Полный сценарий получился довольно объемным, поэтому для статьи приводим ключевые: окружение, технологии и контекст:
![](https://habrastorage.org/webt/d4/d5/jc/d4d5jczky32k7blkntct3gtz4xu.png)
Путь пользователя
![](https://habrastorage.org/webt/lt/r3/ug/ltr3ugd-x66uiday8w-s5t43svi.png)
Составив user flow и сформировав требования к каждому экрану, можно переходить к проектированию интерфейса. Разберем интерфейсные решения для каждого этапа пользовательского пути.
![](https://habrastorage.org/webt/d5/c3/au/d5c3aueiq-wfnrhgpxpiptgrqji.png)
![](https://habrastorage.org/webt/hw/yu/wz/hwyuwzefa9vqddg6v2rhdamwb-8.png)
Первый экран приложения после запуска максимально минималистичен и обеспечивает две ключевые потребности:
- войти — для существующих клиентов банка
- стать клиентом — для потенциальных клиентов банка
Учитывая сформированное ожидание на этапе рекламной коммуникации, а также то, что стать клиентом банка менее заманчивое предложение, чем карта с лимитом 200 000 грн, на первом экране сразу позиционируется карта с ключевыми преимуществами.
Блок с картой оформлен в виде баннера. Кредитная карта плавно скользит за границу экрана, давай понять, что на нее можно нажать.
![](https://habrastorage.org/webt/ag/an/o7/agano7de97m8ejwqexsek1uvjhc.png)
![](https://habrastorage.org/webt/y0/ye/vp/y0yevpztcdc6xmwt5aocpw7appu.png)
Заголовок «Получить кредитную карту от Альфа-Банк» четко формирует ожидания: «Нажав на эту штуку я смогу заказать карту»
![](https://habrastorage.org/webt/8v/0v/gv/8v0vgvhacnrylvzx8gdilb4qsoa.png)
![](https://habrastorage.org/webt/we/ep/es/weepesx91umoeprgujmfiakpdju.png)
Слайдер из 5 экранов раскрывает основные преимущества кредитной карты Максимум на простом и понятном языке.
Первый слайд содержит ключевую информацию. Каждый последующий слайд ее расширяет.
![](https://habrastorage.org/webt/vk/-g/ap/vk-gapj16exe8gbvvixais9td30.png)
![](https://habrastorage.org/webt/jj/sp/kc/jjspkcaj0lqtya_qjifj75iakge.png)
Изучив текущие формы на сайте и пообщавшись со службой поддержки мы выяснили, что открытие карты удаленно в любом случае происходит через колл-центр. Учитывая также, что у пользователя может не оказаться нужных документов под рукой, для заказа карты достаточно всего лишь ввести и подтвердить номер телефона.
По номеру телефона можно также отловить и существующих клиентов банка, предложив им другой сценарий взаимодействия.
![](https://habrastorage.org/webt/fk/lb/ci/fklbci1tyzb2183om1qwizaax_q.png)
![](https://habrastorage.org/webt/4w/63/u7/4w63u716hpa7dcugu5-gzb1wx0i.png)
Для заказа карты достаточно ввести только номер телефона. Все остальное сделает колл-центр.
Заполнение анкетных данных — сложная для пользователей задача. Еще больше она осложняется тем, что не всегда под рукой могут быть нужные документы.
Этап с заполнением анкеты не является обязательным. Интерфейс сообщает, что карта уже заказана. И только если пользователь хочет ускорить процесс, он может заполнить анкету самостоятельно.
![](https://habrastorage.org/webt/yh/mf/yk/yhmfykps5lcmmpkn98oahlp6uys.png)
![](https://habrastorage.org/webt/of/0o/te/of0oteopbfju3zkly8igerrvucm.png)
При переходе к самостоятельному заполнению анкеты пользователь видит простую форму с минимальным количеством полей.
Все пункты простые и не требуют наличия под рукой каких-либо документов.
Нажимая кнопку Сохранить, пользователь видит, что есть и другие формы. Для их заполнения нужны документы. Но ничего не является обязательным. Он понимает, что все сохранено и он может продолжить заполнение позже, если потребуется.
![](https://habrastorage.org/webt/hx/nn/js/hxnnjs5pxge8gde3an-bwj2pv04.png)
Формы сгруппированы таким образом, чтобы их можно было заполнить, имея при себе только часть информации. Например, если пользователь знает свой ИНН наизусть, он может его заполнить. В то же время для тех, кто его не помнит и не имеет под рукой, не создаются сложности с заполнением других данных.
![](https://habrastorage.org/webt/ku/ct/dm/kuctdmb9dnca8fj-zxrkz7ckhn4.png)
Заполнив все поля самостоятельно или с помощью колл-центра, пользователь видит соответствующий экран подтверждения.
На этом экране впервые мягко запрашивается разрешение на отправку PUSH-уведомлений в обмен на понятную ценность для пользователя: отслеживание статуса карты.
В iOS и Android есть всего один шанс получить разрешение на отправку уведомлений в приложении, поэтому системное окно запроса отображается только в том случае, если пользователь его вызывает осознанно.
![](https://habrastorage.org/webt/mu/t2/fw/mut2fw6uwaejk1dwquargidcc4a.png)
![](https://habrastorage.org/webt/fe/to/ri/fetorizkwu5yfw5tgrfe1ilosn0.jpeg)
Пока карта нового клиента Альфа-Банк выпускается, приложение отображает в режиме реального времени текущий статус карты.
На любые вопросы клиента оперативно ответит служба поддержки в Альфа-чате.
Когда придет время получать карту, курьер позвонит и согласует удобное время и место доставки.
![](https://habrastorage.org/webt/ri/hp/vc/rihpvcuqosdp9c1zloqsk0b-cde.png)
Цель достигнута, клиент доволен:
![](https://habrastorage.org/webt/ok/eh/t_/okeht_jj4zumtmetobdbymyocns.png)
«Это лучшая карточка, которая у меня когда-либо была. Столько свободы и шикарный кешбэк. И заказать ее было так просто!»
Главный экран
Одним из требований кроме закрытия двух use case, была визуализация концепта главного экрана. Так как отдельного use case для главного экрана в задании не было, мы обратились к недавним исследованиям компании Usabilitylab и выяснили, что приложение мобильного банка должно соответствовать трем ожиданиям:
- Обеспечивать быстрый доступ к просмотру остатков на счетах
- Отслеживать все траты и списания
- Выполнять базовые банковские задачи
Мы разместили их все на одном экране, обеспечив простой и быстрый доступ к самым важным функциям мобильного банка.
![](https://habrastorage.org/webt/su/px/h1/supxh1aqr3s4zr7sydr_qduhmns.png)
Остатки на счетах видны сразу. Чтобы просмотреть все карты не нужно переходить на отдельный экран. Достаточно просто прокрутить список карт, и контент на экране оптимизируется для удобного взаимодействия с ними.
Все действия по всем картам в одном месте. Умная лента похожа на популярные мессенджеры и не только предлагает быстрый доступ ко всем совершенным операциям, но и напоминает о необходимости оплатить коммуналку или заработать, открыв депозит. Чтобы увидеть все, не нужно переходить на отдельный экран. Достаточно просто прокрутить ленту и контент на экране оптимизируется для удобного взаимодействия с ней.
Главное в центре. Ключевые действия: пополнить, оплатить, перевести всегда под рукой, даже когда вы взаимодействуете с картами или выпиской.
Состояния главной экрана при взаимодействии со списком карт и событиями.
![](https://habrastorage.org/webt/pt/ma/0n/ptma0nbt050stp_gxv_ooojs9i0.png)
Challenge #2: Открытие депозита
Второй предложенный use case звучал так:
«Я, как клиент Альфа-банка, у которого есть карта, которой я регулярно пользуюсь, хочу открыть депозит на сумму 20 000 гривен сроком на 12 месяцев, чтобы приумножить свои средства»
Альфа-Банк предлагает несколько вариантов депозитов в разных валютах, на различные периоды и процентные ставки.
Инсайт #1
Учитывая use case, отрабатываем только сценарий открытия депозита в гривне.
Инсайт #2
Согласно use case клиента интересует вклад на год, а значит, сберегательный депозит с пониженной доходностью в рамках данного решения также не рассматриваем.
Итого: наша задача «продать» самый выгодный для клиента депозит с высокой процентной ставкой на срок от 3 до 18 месяцев, с выплатой процентов в конце или ежемесячно.
Составляем персону
![](https://habrastorage.org/webt/n5/vz/bp/n5vzbpwiprlefciiztybacod178.png)
Пишем сценарий
![](https://habrastorage.org/webt/fv/km/y2/fvkmy2b0z-4fzeyqwsekk7l3uo0.png)
Путь пользователя
![](https://habrastorage.org/webt/cx/zm/xv/cxzmxv6pm7qrdo2erqcmpo9wp3e.png)
И разберем интерфейсные решения для каждого этапа пользовательского пути.
![](https://habrastorage.org/webt/sn/cq/jl/sncqjl0uk5wk_m_nnwb1fbp7p6m.png)
![](https://habrastorage.org/webt/ku/2l/md/ku2lmdael7r6csquims58o6eduu.png)
Основной путь открыть депозит в мобильном приложении — перейти в соответствующий раздел меню. Экран кратко сообщает об условиях размещения депозита и фокусирует на возможности рассчитать доход от суммы вложения.
Но есть еще один путь — перейти сразу к рассчитанным вариантам депозитов прямо с главного экрана мобильного банка. Используя специальные алгоритмы, система предлагает открыть депозит тем клиентам, которые по ряду признаков наиболее к этому склонны (например, остаткам на карточном счете).
![](https://habrastorage.org/webt/n8/0g/wc/n80gwcvlca74j3xxb4vfsfq2dm0.png)
![](https://habrastorage.org/webt/gr/ls/lt/grlsltfxtsckc3kodmgrafcspgc.png)
![](https://habrastorage.org/webt/xg/rm/q5/xgrmq5daeo9smelx_vedfip2o5e.png)
Представление депозитов максимально упрощено и фактически состоит из двух настроек:
- способ получения процентов
- «срок депозита/процентная ставка».
Выбор способа получения процентов реализован в виде карточек, объединенных в слайдер.
Таким образом ключевым на экране всегда остается процентная ставка и размер дохода.
Отображение честной процентной ставки играет значимую роль в формировании доверия. Сейчас на официальном сайте банка используется тактика скрытых условий, когда пользователю приходится прикладывать значительные усилия для получения реальных данных, что, в итоге, создает определенный конфуз и снижает доверие.
![](https://habrastorage.org/webt/q2/ne/f7/q2nef7sxpmbp8ypiaqaeklbroxi.png)
![](https://habrastorage.org/webt/68/jc/6e/68jc6e2dfbj-tovmuyiiczir7fs.png)
![](https://habrastorage.org/webt/xn/ni/vy/xnnivyuhqvett1uds4lwrxozagi.png)
Мимикрируя под классическое оформление заказа в интернет-магазине, каждый этап оформления депозита содержит ключевую информацию: сумму вложения, срок, процентная ставка, а также напоминает о выгодах.
Внести деньги на депозит можно несколькими способами.
Значительно возросшая степень ответственности может стать причиной отказа, если на какие-либо вопросы пользователь не получит ответ тут же. Снизить степень накала позволяет Альфа-чат, доступный прямо в этом экране. Никуда уходить не нужно.
![](https://habrastorage.org/webt/2s/h_/ie/2sh_ier-gtjdybe4qksvcvifh24.png)
![](https://habrastorage.org/webt/x-/tn/vv/x-tnvvzl27oftqhi19fsk3adm6i.png)
Этот экран показывается только в случае, если у пользователя несколько карт. Если карта всего одна, переход к подтверждению оплаты происходит сразу.
Экран акцентирует внимание на картах, которые подходят для совершения оплаты.
Если у пользователя есть другие карты не подходящие для этой оплаты, они также отображаются, но в отдельном списке. Таким образом не создается ощущение ошибки: «Стоп, я хотел оплатить с другой карты, где же она? Наверное, что-то не работает».
![](https://habrastorage.org/webt/jk/m6/of/jkm6ofk6ks7scdmqcqmj6rxyir0.png)
![](https://habrastorage.org/webt/8c/rj/hk/8crjhk5xfqsllmmiuwl5e93jlsc.png)
Финальный экран оформления депозита содержит всю ключевую информацию о депозите, способе и сумме оплаты.
Подпись под кнопкой напоминает, что это все что нужно для оформления депозита. Посещать банк нет необходимости.
![](https://habrastorage.org/webt/pt/bw/mt/ptbwmtujt3cknkh0j5hdbgw_1ns.png)
На финальном экране пользователь видит информацию об успешном открытии депозита.
Чтобы эмоционально подкрепить пользователя после расставания с деньгами, ему крупно напоминается о ценности: доходе, который он получит в конце срока депозита.
Кнопка «Посмотреть мои депозиты» возвращает пользователя в обычный интерфейс приложения.
![](https://habrastorage.org/webt/wu/1d/df/wu1ddf90p2jctiljxshcgh57pek.png)
![](https://habrastorage.org/webt/n3/jr/hi/n3jrhif1dov0djnklgppvwqigvi.png)
С активным депозитом представление экрана «Депозиты» меняется. Ключевой акцент смещается на открытые депозиты.
Депозит легко идентифицировать по сумме вложения.
Прогресс-бар позволяет быстро отслеживать состояние депозита. При условии открытия депозита с ежемесячной выплатой процентов, на прогресс-баре появляются соответствующие сегменты. Достижение сегмента — выплата процентов.
Для управления настройками депозита достаточно на него нажать (привычный паттерн, применяемый во всем приложении).
![](https://habrastorage.org/webt/uy/ka/d8/uykad888n6x6kh8k1m10jeclhdk.png)
Цель достигнута, клиент доволен:
![](https://habrastorage.org/webt/5n/uf/-s/5nuf-sq3wdyfrxxe24g9ifzy2v8.png)
«Мои деньги в надежном месте и работают на меня. Открыть депозит было так просто!»
72 часа на все
Основной акцент в нашей работе был сделан на интерфейсе прототипа и в дополнение к нему отрисованы несколько макетов основных экранов. Еще часть времени ушла на оформление интерактивной презентации. В итоге на весь квест потратили 72 часа в течение 5 рабочих дней.
Итог:
Эта история о том, как имея даже ограниченные ресурсы и время, можно создавать более удобные и полезные интерфейсы.
Учитывая отсутствие времени и статус задачи, мы сильно упростили привычные процессы проектирования и пренебрегли двумя важными этапами: исследования и полноценное тестирование.
Но даже несмотря на это всего за 5 дней и с помощью простой методологии нам удалось создать куда более удобный интерфейс, чем то, с чем сейчас приходится ежедневно взаимодействовать тысячам клиентов банков.
Дочитали до конца? Вот и обещанный бонус – интерактивный прототип, который можно поклацать.
P.S. Если этот материал оказался полезен, есть еще.