Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Daily UI Challenge #002: Credit Card Checkout

In contrast to challenge #001, I took a visually simpler approach to the checkout page. I stuck to a simple colour palette of greys and blacks with green accents. No background images. The reason for choosing green as an accent was simply the idea of this project dealing with money. The page is intended to be made for a Canadian retailer, hence the decision to only include Canadian provinces and territories.

I originally wanted to have a dual panel UI with the checkout information on one side and the user's cart on another side, but the more I developed the concept, the less compelled I felt to add the shopping cart at this point of the checkout phase. This demo is at the point of checkout where the user must enter their shipping and payment information. With the final confirm button being a "Review and Submit" button, it would make more sense to have the cart show up on that page alongside the entered information.

The reason for the checkout page being isolated from what would be a main site is to have the user focus on checking out their cart and not accidentally going back to the main site during the checkout process. Various online storefronts employ this technique.

One aspect I was particular about was the payment method branding. Even though this is only a concept, I wanted to make sure the assets used were up to date with each payment company's current branding. American Express in particular recently went through a branding change. It irks me when companies use branding for something like social media or payment methods that are either unofficial or outdated.

Fonts Used


Caret icon by Font Awesome is licensed under CC BY 4.0.

You can’t perform that action at this time.