Daily UI, 002 – Create a Credit Card Checkout

Continuing with my fictional practice hall, The Sesh House, I decided to create a checkout screen for room reservations. As a challenge I chose an iPad format in landscape orientation. Overall I am pretty happy with my results.

Results

Landscape layout of the creditcard checkout screen for The Sesh House. Displays order Summary and Payment Information as well as what the errors and focus indication look like.

Considerations

  • User must be able to cancel the payment process
  • User must be able to edit their order
  • User must be able to edit their billing and shipping address
  • Text must have minimum color contrast of 4.5:1 with surrounding color
  • Error messaging must be presented close to the field in error and the form field in error must have a visual cue.
  • Keyboard focus indication must be highly visible on all interactive elements in the tab order
  • The two edit buttons will need to have unique information added to their programmatic labels

Future Changes

  • Add a mechanisim to change item quantity, delete item, or save for later in the Order Summary
  • Reevaluate how the billing info is displayed
  • Create an additinal view in potrait

Tools

I chose InDesign 2020 over Illustrator for this challenge and found the program to be very easy to manipulate and change on the fly.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s