СибСети. Исправляем экран пополнения счета

Задача:

Заплатить за услуги интернет-провайдера СибСети через мобильное приложение.

Дано:

Мобильное приложение СибСети на Android смартфоне. Виртуальная карта Тинькофф для оплаты интернет услуг.

Ход работы:

1. Открываю приложение СибСети. Вижу задолженность по оплате:

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

2. Нажимаю «Пополнить». Не помню какая сумма стояла по умолчанию. Поменял на 390 ₽ с клавиатуры:

3. Открывается поле для ввода номера карты:

Мой процесс вода номера карты:

3.1 Сворачиваю приложение СибСети;

3.2 Открываю приложение Тинькофф Банка;

3.3 Открываю список своих карт, ищу ту с которой оплачиваю в интернете. Так как для интернет покупок у меня отдельная виртуальная карта;

3.4 Нахожу карту, копирую ее номер;

3.5 Открываю приложение СибСети;

3.6 Вставляю скопированный номер в поле с номером карты;

3.7 Нажимаю оплатить и получаю ошибку «Введены некорректные данные карты»

8. Оказывается нужно нажать на синюю стрелочку в поле с номером карты и откроется доп. поля которые нужно заполнить:

После указания номера карты нужно автоматически сворачивать поле с номером и показывать поля ММ/ГГ и CVC без нажатия на синюю стрелочку. Так и происходит, если ввести номер карты с клавиатуры. Но когда вставляешь скопированный номер, нужно дополнительное нажатие на синюю стрелочку. Команде банка Тинькофф нужно предусмотреть сценарий, когда номер карты вставляется в поле и следовательно автоматически показывать поля ММ/ГГ и CVC.

Ввожу недостающие данные, нажимаю «Оплатить» Получаю ошибку «Введен некорректный e-mail»

Обычно поле с имейлом необязательное в таких формах. Хочешь квитанцию — заполни поле, не хочешь — оставь пустым.

10. Ввожу почту, нажимаю оплатить. Успех:

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

1. Кнопку «Пополнить» перенес на черную плашку, а кнопку «Детализация» убрал. Детализацию можно перенести в «Аккаунт», например. Сейчас на черной плашке остались все действия, которые связаны с текущим балансом:

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

2. Для кнопки «Пополнить» иконка, в виде плюса.

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

4. У автоплатежа в существующем дизайне кнопка секундомера. Кажется, что это связано со скоростью, ускорением, но никак не с повторяющимися регулярно действиями. Заменил на иконку со стрелочками.

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