case study
Мобильное приложение банка для корпоративных клиентов
Роли: продуктовый дизайнер, UX-исследователь
Особенности: Разработка приложения практически с нуля, устаревший backend, высокие требования к безопасности данных
Введение
Корпоративные клиенты «Промсвязьбанка» — крупные организации и холдинги. IT-сервисы для них уже существовали в зачаточном виде — десктопное приложение, состоящее в основном из разного рода таблиц, и мобильное приложение, транслирующее минимум информации с десктопа.
Задача состояла в разработке мобильного приложения практически с нуля — тем, что было, практически не пользовались.
Десктопный сервис уже какое-то время перерабатывался, и из исследования коллеги-лида было известно, что основные его пользователи — это люди, взаимодействующие с финансовой информацией компании: бухгалтера, финансисты. Они занимаются этим с рабочего места и в рабочее время. Логично было предположить, что эти люди вряд ли будут использовать мобильное приложение, если их работа уже строится вокруг взаимодействия с десктопом, который однозначно выигрывает в удобстве представления табличной информации и графиков.
Задача состояла в разработке мобильного приложения практически с нуля — тем, что было, практически не пользовались.
Десктопный сервис уже какое-то время перерабатывался, и из исследования коллеги-лида было известно, что основные его пользователи — это люди, взаимодействующие с финансовой информацией компании: бухгалтера, финансисты. Они занимаются этим с рабочего места и в рабочее время. Логично было предположить, что эти люди вряд ли будут использовать мобильное приложение, если их работа уже строится вокруг взаимодействия с десктопом, который однозначно выигрывает в удобстве представления табличной информации и графиков.
Тем не менее, есть ещё одна категория пользователей, заинтересованных в том, чтобы быстро получать сводку о том, как обстоят дела компании на данный момент: это топ-менеджеры. В силу специфики своих позиций, они часто проводят рабочее время на переговорах, в дороге, имеют ненормированный рабочий график, ценят время и скорость получения информации. Соответственно, они и стали нашими целевыми пользователями.
В ходе разработки нашим стейкхолдером стала коллега из операционного менеджмента, имевшая большой бэкграунд в финансах, бывшая в прошлом финансовым директором.
Я вела проект с самого начала, консультируясь с дизайн-лидом и руководителем продукта: от исследования конкурентов до создания финальных прототипов и выделения MVP из целевого решения.
В ходе разработки нашим стейкхолдером стала коллега из операционного менеджмента, имевшая большой бэкграунд в финансах, бывшая в прошлом финансовым директором.
Я вела проект с самого начала, консультируясь с дизайн-лидом и руководителем продукта: от исследования конкурентов до создания финальных прототипов и выделения MVP из целевого решения.
Портрет пользователя
Мужчина/женщина, старше 40 лет.
Должность: CEO, COO (операционный директор), CFO (финансовый директор)
— Должность наделяет их большой ответственностью. Имеют много задач одновременно.
— Имеют ненормированный рабочий график и ненормированное рабочее место. Часто находятся на переговорах, встречах или в дороге.
— Ценят время, скорость получения информации.
Информация, которая может быть интересна
— Состояние платежей по договорам и переводов контрагентам;
— Степень надёжности контрагента;
— История взаимодействий с контрагентом;
— Операционные показатели компании (прибыль, выручка, динамика движения средств на счетах);
— Банковские продукты и предложения — возможности выгодно распорядиться свободными средствами компании;
— Новости финансовой и банковской сферы;
— Коммуникация с представителями банка.
Должность: CEO, COO (операционный директор), CFO (финансовый директор)
— Должность наделяет их большой ответственностью. Имеют много задач одновременно.
— Имеют ненормированный рабочий график и ненормированное рабочее место. Часто находятся на переговорах, встречах или в дороге.
— Ценят время, скорость получения информации.
Информация, которая может быть интересна
— Состояние платежей по договорам и переводов контрагентам;
— Степень надёжности контрагента;
— История взаимодействий с контрагентом;
— Операционные показатели компании (прибыль, выручка, динамика движения средств на счетах);
— Банковские продукты и предложения — возможности выгодно распорядиться свободными средствами компании;
— Новости финансовой и банковской сферы;
— Коммуникация с представителями банка.
Анализ конкурентов
Большая часть конкурентов не выделяет крупный бизнес в отдельную категорию, и их бизнес-приложения объединяют в себе функционал для малого и крупного бизнеса.
Мы изучили, какой функционал и как именно реализуют разные конкуренты.
Мы изучили, какой функционал и как именно реализуют разные конкуренты.
Скриншот с доски анализа конкурентов
Пользовательские сценарии
Мы сформировали 11 пользовательских сценариев и декомпозировали их на 44 фичи. Это заняло несколько итераций, включая интервью с менеджерами и стейкхолдером, разработку сценариев и фич и последующую их валидацию.
Полученные сценарии и фичи были разделены на три приоритетные группы: «зеленые», «желтые» и «красные». Далее мы проконсультировались с разработчиками на предмет стоимости отдельных фич, и формирование MVP было практически завершено.
Полученные сценарии и фичи были разделены на три приоритетные группы: «зеленые», «желтые» и «красные». Далее мы проконсультировались с разработчиками на предмет стоимости отдельных фич, и формирование MVP было практически завершено.
Сценарии знакомства с приложением
В ходе разработки мы столкнулись с тем, что всё взаимодействие пользователя с приложением было чересчур формализованным: клиенту необходимо было писать заявление на подключение мобильного приложения, заявление было трудно найти, активировать использование мобильного приложения должен был отдельный сотрудник, и так далее.
Мы расписали текущий процесс онбординга, наши вопросы к нему и целевой процесс, чтобы идти на переговоры со службой безопасности, инициировавшей большинство формальностей в текущем процессе. Часть этого описания представлена ниже.
Мы расписали текущий процесс онбординга, наши вопросы к нему и целевой процесс, чтобы идти на переговоры со службой безопасности, инициировавшей большинство формальностей в текущем процессе. Часть этого описания представлена ниже.
Диаграмма, которую я сделала в процессе исследования
Поиск внешнего вида и состава главного экрана
Ниже в галерее можно увидеть отдельные экраны, сделанные в процессе поиска визуального стиля.
В итоге мы решили скрыть баланс счета по умолчанию и показывать его только когда пользователь нажимает на него. Это было сделано для того, чтобы находящиеся рядом люди не видели состояние счета при открытии приложения.
Мы рассматривали вариации нижнего меню с разным количеством сегментов, но в итоге остановились на меню с тремя элементами, между которыми можно переключаться свайпом.
В итоге мы решили скрыть баланс счета по умолчанию и показывать его только когда пользователь нажимает на него. Это было сделано для того, чтобы находящиеся рядом люди не видели состояние счета при открытии приложения.
Мы рассматривали вариации нижнего меню с разным количеством сегментов, но в итоге остановились на меню с тремя элементами, между которыми можно переключаться свайпом.
Поиск цветов для графиков и диаграмм
При составлении цветовых палитр для отображения данных важно помнить, что палитра должна быть достаточно читаемой в том числе для людей с различными нарушениями зрения.
Это — артефакты поиска четырёх различных палитр, каждая из которых должна быть контрастной, чтобы повысить доступность приложения.
Это — артефакты поиска четырёх различных палитр, каждая из которых должна быть контрастной, чтобы повысить доступность приложения.
Разные цветовые палитры, которые были опробованы
Дизайн-система
Дизайн-система мобильного приложения была унаследована из десктопной версии, а потом была упрощена и усовершенствована. Некоторые компоненты были разработаны специально для мобильных устройств.
Выбор даты изначально был мобильным компонентом, но затем был доработан до универсального
Передача в разработку
Сначала нам нужно было оценить разработку дизайн-системы. Для этого я собрала таблицу, в которой перечислила все компоненты, что позволило нам отслеживать статус их разработки как для Android, так и для iOS. Таблица также служила платформой для сбора идей и задач, касающихся дизайн-системы.
Мы представили приложение в Figma, где были показаны целевая и MVP-версии. Пользовательские сценарии, помимо прототипа, были прорисованы стрелками прямо на доске.
Мы представили приложение в Figma, где были показаны целевая и MVP-версии. Пользовательские сценарии, помимо прототипа, были прорисованы стрелками прямо на доске.
Результаты
В итоге MVP включал 7 пользовательских сценариев, которые позволяли отслеживать финансовую информацию компании, включая остатки на счетах, состояние платежей, выписки и аналитику за различные периоды времени.
Однако было непросто договориться со службой безопасности, чтобы обеспечить конфиденциальность конфиденциальной информации пользователей. Кроме того, бэкэнд имел некоторые унаследованные проблемы, которые замедляли обработку запросов. Чтобы преодолеть эти проблемы, мы упростили некоторые потоки на этапе MVP, чтобы быстро выпустить продукт и собрать отзывы и данные для дальнейших улучшений.
Однако было непросто договориться со службой безопасности, чтобы обеспечить конфиденциальность конфиденциальной информации пользователей. Кроме того, бэкэнд имел некоторые унаследованные проблемы, которые замедляли обработку запросов. Чтобы преодолеть эти проблемы, мы упростили некоторые потоки на этапе MVP, чтобы быстро выпустить продукт и собрать отзывы и данные для дальнейших улучшений.
