Converting mobile screens to desktop

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.