Challenge: To make sure that a payment flow is as intuitive as possible while the user can easily keep track of all of the most important information.
"Pay to" screen
Features to keep in mind:
Check info about each payment destination
How to make a specific payment
Give the user a sense of navigation
Changes made:
The user can expand an object to check info about a payment destination
The user must select destination by clicking the circle next to it
The user must select "Pay" button to advance
The left column allows the user to track progress of process in payment
"Information" screen
Features to keep in mind:
Ability to see which account the payment is coming from, and the destination
Ability to enter and calculate entire payment
Ability to change the date of payment, occurrence, and add notes
Changes made:
User can change the account and payment destination by selecting from a dropdown
User enters amount to pay. Service fee is shown, and the total is shown in larger font
User can type in notes, change payment occurrence by selecting from a dropdown, and change the date of the payment by clicking to bring up a calendar
"Calendar" screen
Had to figure out a way bring the calendar to desktop
Changes made:
The calendar pops up as an overlay. The user can cycle through months, select a date, and click "Choose this date". This allows the user to select a date without having to navigate back and fourth between screens.
"Verification" screen
Changes made:
After doing some usability testing, my key finding was that the total payment and confirmation number were the two things users looked for the most. While setting up hierarchy, I decided to make those two elements the largest.
