Case study: Дизайн онлайн банка

Летом 2018 года я проходил курс “UX/UI Точка входа” от онлайн школы bangbangeducation. На протяжении всего курса я имел удовольствие выполнять один реальный проект в тесном сотрудничестве с дизайнерами компании IBM IX.

  • Клиент: IBM IX
  • Продолжительность проекта: июнь-октябрь 2018
  • Предполагаемые роли: Product designer
  • Цель проекта:
Разработать концепцию онлайн-клиента международного банка для юридических лиц на основании глобальной стратегии и целевых сервисных сценариев.

Краткое описание проекта

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

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

Начало работы

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

Все существующие решения: Точка, Модульбанк, Тинькофф, Альфа банк — имеют примерно одинаковую архитектуру. Просмотр сервисов помог мне выделить схожие паттерны и описать концепцию своего будущего решения.

Концепция решения

Главная страница — dashboard, который дает клиенту всю информацию по его финансам в реальном времени на одной странице. События, в которых что-то пошло не так (например платеж не прошел), поднимаются в ленте вверх. Чтобы клиент ничего не пропустил есть настройка уведомлений, можно получать смс.

Карты эмпатии и CJM

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

Чтобы более детально погрузится в процесс я буду прикладывать ссылки на интересные ресурсы которые использовал в работе:
Статья от NNGroup о картах для систематизации данных о пользователе

Я подумал над тем как пользователи выбирают банк. Из каких каналов они получают информацию, как принимают решение работать с конкретным банком. По результатам интервью составил карту эмпатии.

После нужно было систематизировать записанные на интервью сценарии пользователя. Я использовал для этого технику Customer Journey Map.

Как используют CJM в компании Мануфактура
Customer Journey Map: как понять, что нужно потребителю
Шаблон CJM от Realtimeboard

CJM подразумевает что мы разобьем процесс работы пользователя на этапы. Расположив этапы последовательно опишем пользовательский сценарий.

В своей работе я поделил CJM на несколько уровней:

  • Глобальный уровень. Описывает общий процесс работы, все что делает пользователь в своей работе для достижения целей.
  • Сервисный уровень. Та часть глобального уровня где пользователь работает с нашим проектируемым продуктом.
  • Интерфейсный уровень. Конкретные шаги и взаимодействия пользователя с интерфейсом.

На глобальной CJM я расписал полный сценарий работы бухгалтера или ИП (все в одном) на протяжении дня. С каждым последующим сценарием я сжимал рамки и описывал все более конкретные сценарии.

Этап (оранжевый) — группа действий объединенных по смыслу

Действие (желтый) — реальные действия

Мысли и чувства (синий)

Болевые точки (красный), Возможности (зеленый)

Глобальный сценарий работы пользователя
Сервисный и интерфейсный сценарии работы с банковскими событиями
Сервисный и интерфейсный сценарий работы с платежами

User story

User story —это короткая формулировка намерения, описывающая что-то, что система должна делать для пользователя.

Как писать User Story

Теперь исходя из CJM предстояло записать пользовательские сценарии как задачи со стороны пользователя. Это поможет понять какие экраны проектировать и создать архитектуру системы.

Для своих US я поделил экран на 3 части:

“Кто” — сюда я записывал роли пользователей системы;

“Для чего/чтобы что” — проблемы или цели;

“Что делать” — действия пользователя.

Как, <роль>, я <что сделать>, <для чего>

Моя user story

Пример:

Как, <бухгалтер небольшой компании>, я <хочу видеть баланс счета>, <чтобы понимать объем доступных средств на сегодня>

Архитектура решения

После составления US было понятно какие экраны должен содержать интерфейс и я стал думать над информационной архитектурой своего решения.

Информационная архитектура (IA) — cочетание схем организации, предметизации и навигации, реализованных в информационной системе.

В виде блоков я отобразил элементы экранов и составил взаимосвязи элементов.

IA онлайн банка

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

Статья от Нетологии об ИА, кстати тоже пример с банком

От набросков к дизайну

После большой подготовительной работы, я стал работать над прототипами и самим решением. Началось все с простого черно-белого экрана наброска.

Первые версии главной страницы

Сверху по аналогии с другими сервисами я хотел сделать header с возможностью перейти на главную страницу и информацией о пользователе.

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

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

Финальный вариант

Последний вариант главной страницы

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

Шапка страницы

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

Можно также посмотреть меню аккаунта и перейти в настройки профиля. Здесь же размещена информация о персональном менеджере клиента с возможностью позвонить или написать письмо, сообщение.

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

Информация об аккаунте

Блок информации состоит из названия компании, и названия счета с возможностью редактирования.

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

Блок счетов

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

Счета можно фильтровать или открывать на отдельной панели.

Лента событий

В ленте события показываются сообщениями с возможностью быстро отреагировать по кнопке. Часто требуется только просмотр документа. Для выписок есть команда для выгрузки.

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

Дополнительно я пофантазировал про страницу авторизации

Выводы

💡В процессе работы я получил опыт использования CJM в процессе проектирования;

💡Чем лучше проработаны сценарии и модели пользователя на начальном этапе, тем проще потом спроектировать интерфейс;

💡Чем больше в проекте участвуют заинтересованные лица тем лучше будет конечный результат;

💡Курсы по проектированию нужны для мотивации, но самомотивация еще важнее. Это помогло мне написать этот кейс и закончить проект, при этом не закончив курс. Но это уже другая история…

Спасибо за прочтение. Как насчет хлопка? 👏