Система мобильных платежей MOBI.Деньги 2.0

Сразу после отладки первой версии системы, приступили к разработке второй версии. А задача это оказалась непростая. Дело в том, что MOBI.Деньги с самого начала была системой для оплаты товаров с мобильного телефона. Но из-за инертности мобильных операторов услуга по началу была доступна только абонентам Билайна. И пока остальные операторы находились в процессе длительного подключения, руководство приняло решение «прикрутить» к системе платежи с банковских карт — технически это было возможно для абонентов всех мобильных операторов.

Получилась смешанная картина — система позволяет оплачивать товары:

1. со счета мобильного телефона (доступно только для абонентов Билайна);
2. с банковской карты, которую можно подключить к мобильному телефону (доступно для абонентов всех основных операторов).

По сути предстояло сделать интерфейс для двух разных платежных систем, при этом:

• интерфейс должен быть единым и не противоречивым для обоих способов оплаты;
• нововведения не должны разрушить привычной для «старых» пользователей схемы;
• нужно ненавязчиво внедрить в интерфейс рекламу новых возможностей;
• попутно исправить некоторые недоработки, оставшиеся с пердыдущей версии.

Начинаем с сердца

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

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

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

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

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

Лирическое отступление о внутренностях

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

К слову, позволяя пользователю платить неавторизованным мы дали ему свободу, а себя обрекли на рабство :) Например, сумма платежа имеет ограничения, но для разных пользователей эти ограничения разные. А как узнать к какой категории принадлежит пользователь, если он неавторизован? Тут опять выкручиваемя с помощью Аякса — как только заполнено первое поле с телефоном, мы незаметно обращаемся к серверу, узнаем какую сумму может заплатить этот пользователь и анимированно выводим ее под полем «Сумма» и снизу в дополнительной информации:

Подключаем банковскую карту

Но мы отвлеклись. Вернемся к платежам с банковской карты. Нужно подключить — идем подключаем. Как? Да как всегда, просто и без регистрации. Заполняем данные карты — рядом куча подсказок и краткая помощь:

Теперь нужн узнать в банке секретную сумму тестового платежа, чтобы доказать, что карта принадлежит вам:

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

Вводим секретную сумму — карта подключена:

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

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

Наконец-то, платим!

Хотя почему, наконец-то? Делов-то — ввел данные карты, узнал в банке секретную сумму, и плати. Да, это не сложно, а рассказывал я об этом долго. До этого места вообще кто-нибудь дочитал? :) Вот вам иллюстрация того, что чем проще интерфейс, тем больше всяких проблем приходится решать «за кулисами».

Всё, двайте платить, раз карта подключена:

Вводим пароль или получаем его (если не знали или забыли):

Все, вы на привычной карточке платежа. Ну, разве что на ней написано, что платеж произведен со счета банковской карты, а не со счета телефона:

Итак, подведем итоги:

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

Что на морде

Уже в процессе разработки оказалось (по независящим от нас причинам), что с банковской карты можно оплатить не все товары системы. Чтобы это как-то разъяснить пользователям, я решил сделать табы в каталоге товаров:

Во второй версии мы немного огламурили и обвебдванолили дизайн. Делали вдвоем с дизайнером Ильей Смуровым. Кроме того, блок «Повторить последние платежи» перенесли наверх страницы. В результате главная страница стала выглядет так: