Проектирование для мобильных устройств

АЛЬФА-БАНК: мобильный банк для юридических лиц

В феврале 2014 года вышла новая версия мобильного банка для юридических лиц от Альфа-Банка «Альфа Бизнес». Интерфейс для приложения разработала наша компания совместно с дизайн-студией Борового.
Первая версия Альфа-Бизнес Мобайл вышла в 2012 году и предназначалась только для iPhone. Через нее юридические лица могли получить информацию о состоянии своих счетов в банке. Из-за ограниченного функционала приложение не пользовалось популярностью среди пользователей: ежедневно к нему обращались всего около 100 человек. Поэтому в начале 2013 года было принято решение существенно его доработать, создав полнофункциональную версию для планшетных компьютеров на iOSи Android.

Анна Крамаренко, специалиcт UsabilityLab:

Идея «Альфа-Бизнес Мобайл» заключалась в создании приложения к интернет-банку для юридических лиц (90% — малый и средний бизнес). Первая версия приложения включала ограниченный информационный функционал — новости банка, адреса банкоматов и офисов, состояние счёта клиента и выписку по счёту. В перспективе планировалось расширять функционал, исходя из растущих потребностей клиентов.

В мае 2013 года Альфа-Банк объявил тендер на проектирование интерфейсов мобильного приложения для планшетов «Альфа-Бизнес Мобайл». Компания USABILITYLAB специализируется на исследованиях потребностей пользователей и проектировании оптимальных для них интерфейсов. К тому же, у нас уже был многолетний опыт успешного сотрудничества с Альфа-Банком. Мы неоднократно тестировали интернет-банк «Альфа-Клик» и принимали участие в создании его нового интерфейса, разработали структуру раздела «Частным лицам» официального сайта банка, а также разработали макеты для touch-screen устройств системы «Электронное заседание». Вот почему среди компаний, подавших заявку на тендер, Альфа-Банк выбрал именно нас.

Задача

1. Разработать требования к интерфейсу и функционалу мобильного банка (планшетная версия) для юридических лиц и индивидуальных предпринимателей «Альфа-Бизнес Мобайл»
2. Создать макеты экранов нового интерфейса для планшетов на iOs и Android.

Состав работ

Проект состоял из трех этапов:
1. Исследование потребностей бизнеса
2. Исследование потребностей пользователей
3. Проектирование интерфейсов

Исследование потребностей бизнеса

Этот этап был необходим, чтобы сформулировать требования к новому интерфейсу со стороны заказчика. Анна Крамаренко, наш аналитик, провела серию интервью с шестью сотрудниками Альфа-Банка, непосредственно связанных с созданием нового приложения. В результате мы получили информацию, которая определила направление дальнейшей работы:
• Цели, задачи и критерии успешности проекта;
• Информация о продукте: его особенности, направления развития, основные конкуренты;
• Группы пользователей продукта;
• Вопросы, которые необходимо задать пользователям на следующем этапе.

Отрывок из отчета об интервью с представителями Заказчика

Отрывок из отчета об интервью с представителями Заказчика

Исследование потребностей пользователей

Этот этап является ключевым в процессе человеко-ориентированного дизайна (human-centereddesign). Невозможно приступить к созданию интерфейса, не выяснив предварительно, как с ним будут работать потенциальные пользователи.

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

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

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

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

Главным результатом этого этапа стал документ «Задание на проектирование». Он содержал:

  • списки задач персонажей в системе;
  • сценарии взаимодействия персонажей с системой;
  • навигационные диаграммы;
  • требования к функционалу системы (по режимам и задачам);
  • требования к интерфейсу системы.
Пример навигационной диаграммы одного из персонажей. Навигационная диаграмма представляет собой визуализацию маршрута пользователя в системе

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

Этот документ Анна передала нашему проектировщику, Игорю Мыслинскому. Опираясь на изложенные требования, Игорь приступил к созданию макетов экранов приложения.

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

Проектирование проходило в два этапа. На первом этапе были созданы низкодетализированные макеты ключевых экранов. Каждый макет тщательно согласовывался с заказчиком. Так, версии экранов отправлялись на согласование вместе с матрицей решений:  мы составляли аргументацию (преимущества/риски) для каждого элемента на экране.

Первая концепция главного экрана

Первая концепция главного экрана

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

Детальный макет главного экрана (одна компания)

Детальный макет главного экрана (одна компания)

Дизайн

Наши макеты были переданы в студию Борового, где их воплотили в дизайне. Описание кейса на сайте CMSMagazine.

Дизайн главного экрана (несколько компаний), выполненный в студии Борового

Дизайн главного экрана (несколько компаний), выполненный в студии Борового

Команда проекта

Денис Жданов, руководитель проекта
Анна Крамаренко, юзабилити-специалист
Игорь Мыслинский, проектировщик