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

  • 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

Changes made:

"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

  • 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

Changes made:

Calendar screen

Had to figure out a way bring the calendar to desktop

Change 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

Change 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.