Дизайн-концепция мобильного приложения банка

Привет, меня зовут Лена. Недавно я была бизнес-аналитиком, а теперь решила стать UX/UI дизайнером. Как у новичка у меня мало опыта, поэтому я решила потренироваться на каком-то проекте.
Мне хотелось поработать над максимально востребованным в наше время сервисом. Для начала был проведен анализ приложений на моем смартфоне, я выделила те, которыми пользуюсь каждый день, а затем оставила только те, без которых не смогла бы обойтись. В итоге остались банковские приложения, которые всегда нужны под рукой: проверить баланс, перевести деньги, что-то оплатить и пр.
Нашла информацию в интернете и выяснила, что начиная с 2020 года банковские мобильные приложения действительно становятся популярнее среди пользователей. Поэтому в качестве pet-проекта я выбрала мобильный банк.

Примерно 30% банковских клиентов стали чаще пользоваться мобильным приложением, а 78% выбрали его в качестве предпочтительного механизма для повседневного взаимодействия со своим банком во время пандемии.
(Источник)

Задача проекта

Я решила разработать простой и удобный дизайн мобильного банка для того чтобы:

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

Этапы работы

Для осуществления моей идеи я сначала решила продумать как это сделать, для этого изучила разные кейс-стади и методологии, после этого у меня сформировался следующий план работы над проектом:

Погружение в предметную область

Я начала изучать тематические статьи и отчеты, между делом заводила разговоры среди знакомых, чтобы выяснить какими функциями они чаще пользуются и почему.
В отчете по исследованию, проведенному компанией Markswebb, я нашла то, что нужно. В категории Daily Banking исследовали частотные и рутинные задачи в мобильном банке, решение которых должно требовать минимум действий пользователя:

• переводы,
• платежи,
• проверка баланса,
• оплата услуг, покупок и пр.

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

Анализ конкурентов

Для анализа конкуретов я выбрала три банка:

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

Тинькофф банк

Райффайзен банк

Сбербанк

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

Качественные и количественные исследования

Составление гипотез

На основе проведенного анализа, я выдвинула две основные гипотезы насчет использования и выбора мобильного банка:

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

Интервью

Для того, чтобы проверить мои гипотезы, я решила провести глубинные интервью, чтобы позадавать уточняющие вопросы и понять истинные мотивы людей. Я опросила своих друзей и в итоге нашла 3-х респондентов с опытом использования различных мобильных банков, включая те, что анализировала в качестве конкурентов:

Наталия: 32 года, замужем, есть ребенок, имеет высшее образование

Всеволод: 34 года, не женат, имеет высшее образование

Алёна: 32 года, не замужем, имеет высшее образование

Ответы респондентов я обработала и сделала небольшое резюме по каждому вопросу:

1. Для чего обычно используют мобильный банк?

Переводы, проверка баланса, просмотр истории, платежи

2. Почему делают переводы через мобильный банк? —

Быстро и удобно, безопаснее.

3. Какие эмоции испытывают в процессе перевода? —

Особо никаких, все просто и привычно.

4. Какие были проблемы и неудобства во время перевода? —

Проблем не было, но можно улучшить:

• в Тинькофф незаметное поле ввода суммы
• в Сбербанке не сразу получилось выбрать нужный номер получателя и при вводе некорректной суммы ошибка отображается только после попытки перевода.

5. Время, затраченное на перевод ? —

В Тинькофф и Райффайзен банке около 1 минуты, в Сбербанке около 1,5 минут.

6. Дополнительные стимулы использования мобильного банка? —

В Тинькофф можно посмотреть категории кэшбэка и поиграть в слова.

Опрос

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

Результаты можно посмотреть ниже:

Проверка гипотез

В результате проведенных исследований мне удалось проверить мои первичные гипотезы. Одна гипотеза подтвердилась, вторая нет.

• Для пользователей это уже привычный и устоявшийся паттерн, один из респондентов не смог найти альтернативного варианта, как перевести деньги другому человеку и спросил: «А как ещё? В банк что ли идти делать перевод?»
• Еще один респондент сказала, что перевод через мобильное приложение это не просто быстро и просто, но и безопасно, так как раньше надо было сначала снимать деньги в банкомате, а потом класть их в другой банкомат. Также часто в офисах банка нельзя положить деньги через кассу, предлагают использовать банкомат, а по дороге могут напасть.

• В ходе интервью один из респондентов сказал, что обычно использует банк, где выдают зарплату — ВТБ. Однако пришлось стать клиентом банка Тинькофф из-за санкций против государственных банков и нестабильной. Второй респондент ответила, что раньше пользовалась Альфа-Банком, там было все понятно и удобно, но решила стать клиентом банка Тинькофф из-за бесплатного обслуживания и кэшбэка.
• Количественный опрос показал, что передовые функции не имеют особого значения, а наряду с удобством интерфейса (50%) при выборе мобильного банка большую роль играют выгодные условия обслуживания (40.9%) и зарплатный проект (36.4%).

Боли респондентов

В ходе проведения исследований также удалось выяснить, с какими проблемами и страхами сталкиваются пользователи мобильных банков:

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

Персона, User story, JTBD

Завершив большой блок исследований я перешла к портрету пользователя и создала персону, user story и job story.

User story

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

Job story

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

Customer Journey Map

На основе персоны, user story и JTBD была разработана CJM сценария перевода денег по телефону. Это позволило увидеть насколько совпадают ожидания пользователя и реальность, какие могут быть слабые места и проблемы.

Проектирование

Основываясь на проведенных исследованиях и поняв основной функционал приложения, я перешла к проектированию приложения на бумаге. Были отрисованы экраны сценария, с помощью сервиса Marvel POP было проведено тестирование, после которого внесены корректировки.

Визуальный дизайн

Подборка референсов

Для того чтобы сделать интерфейс более современным, я проанализировала тренды. Были выделены 3 основных стиля.

Крупная типографика

Простота и минимализм

Яркие акцентные цвета

Три дизайн-концепции

На основе этих стилей были сделаны три концепции для макета iOS с базовыми параметрами 375 х 667, чтобы проверять дизайн на моем iPhone 8

Доработка экранов выбранной концепции

В итоге после опроса среди знакомых была выбрана вторая концепция и произведена её доработка. Для составления текстовок в интерфейсе был изучен гайдлайн по UX-копирайтингу.

Разработка анимированного прототипа

Для демонстрации полученного решения был собран анимированный прототип с помощью сервиса ProtoPie.

Подведение итогов

Анализ проделанной работы

В ходе проделанной работы были проделаны основные шаги дизайн-процесса:

• проведен анализ конкурентов,
• выдвинуты гипотезы,
• проведены глубинные интервью и количественный опрос,
• подтверждена гипотеза о том, что мобильный банк часто используют для перевода средств, потому что это быстро и просто,
  опровергнута гипотеза о том, что выбирают банк с самым удобным интерфейсом и самыми передовыми функциями. Как оказалось передовые функции не играют большой роли при выборе банка,
• созданы персона, user story, job story, CJM,
• спроектирован основной сценарий и внесены корректировки по результатам тестирования бумажного прототипа,
• разработаны три дизайн-концепции на основании подобранных референсов,
• доработана выбранная дизайн-концепция,
• создан анимированный прототип.

План на будущее

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

Общие выводы

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

Если будет интересно со мной пообщаться, обращайтесь в мой телеграм https://t.me/Elina_Kh

Спасибо, хорошего дня!