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 я расписал полный сценарий работы бухгалтера или ИП (все в одном) на протяжении дня. С каждым последующим сценарием я сжимал рамки и описывал все более конкретные сценарии.

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

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

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

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

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

User story

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

Как писать User Story

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

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

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

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

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

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

Image for post
Image for post
Моя user story

Пример:

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

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

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

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

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

Image for post
Image for post
IA онлайн банка

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

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

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

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

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

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

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

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

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

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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

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

Блок счетов

Image for post
Image for post

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

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

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

Image for post
Image for post

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

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

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

Выводы

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

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

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

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store