{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Дизайн-концепт мобильного банкинга за 72 часа

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

Акцент в описании конкурса делался на UX, поэтому задача показалась интересной. Правда, до окончания приёма заявок оставалось всего пять дней.

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

Наш вариант мобильного банкинга

По условиям конкурса было необходимо спроектировать интерфейсные решения для двух конкретных сценариев использования (use case) и разработать концепт главной страницы.

Первый сценарий: заказ кредитной карты

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

Результат

Подробно о процессе работы над use case — проблемы, инсайты, персонажи, сценарии взаимодействия и описание интерфейсных решений — оформили в большой лонгрид.

Второй сценарий: открытие депозита

Я, клиент «Альфа-банка», имеющий карту, которой регулярно пользуюсь, хочу открыть депозит на сумму 20 тысяч гривен сроком на 12 месяцев, чтобы приумножить свои средства.

Результат

Подробно об этом use case — в отдельном лонгриде.

Дизайн-концепт главного экрана

Конкретных use case для главного экрана в задании не было, поэтому мы обратились к исследованиям компании Usabilitylab и выяснили, что приложение мобильного банка должно соответствовать трём ожиданиям:

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

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

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

  • Объединить выписки по всем картам в единую ленту «События» на главном экране. Это не исключает возможность просмотра отдельной выписки для каждого конкретного счёта, но в целом облегчает контроль движения средств.
  • Вывод вместе с выпиской в ленте «События» ситуативных уведомлений, например, о необходимости оплатить коммуналку или предложение открыть депозит. К такому решению мы пришли самостоятельно, но немного позже нашли аналогичное в другом банковском приложении — monobank. К слову, очень успешном.

72 часа на всё

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

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

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

По ссылке — большой кейс решения этой задачи.

Как вам концепт?

0
37 комментариев
Написать комментарий...
Dmitry Gilev

Я как пользователь, не совсем согласен с тем что все остатки по счетам и мои последние транзакции отображаются так крупно на главном экране)

Например ситуация, часто в компании друзей или при посторонних, необходимо произвести действие – "перевести $ другу за булочку" или перевести деньги с одного счета на другой. В этот момент я не хочу что бы на весь экран показывался мой баланс и баланс по всем картам + последние действия.
Это, безусловно, удобно, но для меня не секьюрно, я готов немного пострадать ради этого. Поэтому у альфы есть опция "скрыть остаток".

Ответить
Развернуть ветку
UXhot
Автор

Вы всегда демонстрируете свой экран окружающим?

Ответить
Развернуть ветку
Арнольд Валерьянович

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

Ответить
Развернуть ветку
Oleg Leonov

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

Ответить
Развернуть ветку
Ruslan Kokin

Так а проблема то в чем? Переписка в мессенджерах тоже всегда видна на экране. И содержимое веб-сайта, который вы смотрите с телефона, и ваша лента в FB. Предлагаете все прятать?

Ответить
Развернуть ветку
Юрий Б.

Проблема в том, что баланс и транзакции отображаются крупно.

В Райффайзенбанки вообще нажимаешь на баланс и он скрывается звёздочками.

Ответить
Развернуть ветку
Семен Смирнов

Отодвинь статью от глаз. Будет также как и сейчас в банковских приложухах

Ответить
Развернуть ветку
Sasha Denisova

почему вы показываете интерфейс в перспективе боком!?? хотите чтобы все себе шею свернули ?

Ответить
Развернуть ветку
Дмитрий Смола

Вы на первых двух мокапах телефон рекламируете или кейс?

С точки зрения UX - странное решение по оформлению статьи)

Ответить
Развернуть ветку
UXhot
Автор

телефон конечно!

Ответить
Развернуть ветку
Илья Константинович

ну такэ, в чем концептуальность? у всех плюс-минус такие дизайны сейчас

Ответить
Развернуть ветку
UXhot
Автор

За концептуальностью – вам на дрибл :) У нас обычный, унылый, но простой и удобный интерфейс для серьезного продукта.

Ответить
Развернуть ветку
S.Z

У нас всё сурьёзно!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
UXhot
Автор

да!

Ответить
Развернуть ветку
Илья Константинович

Говорят филиал Тинькова)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Danil Sparcoff

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

Ответить
Развернуть ветку
UXhot
Автор

Сразу – не секьюрно. А вот по тапу вполне можно открывать номер.

Ответить
Развернуть ветку
Danil Sparcoff

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

Ответить
Развернуть ветку
Данилюк твиттит

У сбера можно в приложении посмотреть реквизиты карты и даже cv2 код получить в смс.

Ответить
Развернуть ветку
Дмитрий Дмитриев

Почему вы использовали метод персон, а не JTBD

Ответить
Развернуть ветку
UXhot
Автор

Мы работаем с разными методологиями, в чем числе и Jobs-To-Be-Done. В данном случае у нас было мало времени на исследования и метод персон давал большую эмпатию.

Ответить
Развернуть ветку
Ivan Mendelson

Вы проделали крутую работу в мега сжатые сроки!
А какими сервисами пользовались для создания дизайна и прототипа?

Ответить
Развернуть ветку
Ivan Mendelson

UPD: уже увидел комментарии ниже. Сорри за повтор вопроса ответ на который вы уже дали

Ответить
Развернуть ветку
Андрей Захаров

Расскажите лучше про технологическую составляющую: в чем сделано.

Ответить
Развернуть ветку
UXhot
Автор

Андрей, это дизайн-концепт. Технической реализации тут нет. Или что вы имели ввиду?

Ответить
Развернуть ветку
Андрей Захаров

В чем нарисовано

Ответить
Развернуть ветку
UXhot
Автор

Прототипирование в Axure, визуалка в Sketch, анимации в Principle.

Ответить
Развернуть ветку
Артём Сексяев

Какие инструменты использовали для прототипа?

Ответить
Развернуть ветку
UXhot
Автор

Фреймворк для проектирования – UСD, прототипирование в Axure, визуалка в Sketch, анимации в Principle.

Ответить
Развернуть ветку
Вячеслав Каграманов

чет отступы поехали

Ответить
Развернуть ветку
UXhot
Автор

Такое бывает на концептах. Спасибо!

Ответить
Развернуть ветку
Pavel Vorobyev

У Альфа из Беларуси, посмотрите какое хотя бы должно быть банковское приложение. А не то что сейчас! :’-(

Ответить
Развернуть ветку
UXhot
Автор

Посмотрели.

Ответить
Развернуть ветку
S.Z

Ну чёт 2010 какой-то. Хотя всё лучше приложения альфы которое есть сейчас

Ответить
Развернуть ветку
UXhot
Автор

Ох, вы еще не видели "современные" приложения остальных банков в Украине. Если у нас 2010 – там 90-е. Кстати, какое приложение мобильного банкинга для вас современное?

Ответить
Развернуть ветку
Виктор Говнинов

Рокет, сбер, тинькофф

Ответить
Развернуть ветку
34 комментария
Раскрывать всегда