Daily UI Design Challenge
WHAT: a daily UI challenge for UI exercising
WHY: I want to be more familiar with the UX/UI tools
HOW: a UI design prompt is generated by Daily UI, find an UI example that I like and try to replicate that design, and have an self-reflection for each challenge
Today's UI Challenge: Credit Card Checkout
(Design Hint: Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.)
Tools and resources that I used for this challenge
Design Tools: Sketch, Photoshop
Photo resource: unsplash.com
UI Example
Source: https://webartdevelopers.com/blog/credit-card-checkout-5/
My Process
The UI example is aesthetically pleasing and I see similar designs for most e-commerce sites. By replicate the design, I hope to gain a deeper understanding of this UI design.
Try something new
While I was replicating the design, I realized there are a few things I would do differently. For example, I give more white space around the summary info on the left. Unlike the original, I didn't all cap the word "Total" but just bold it. On the credit card info side, I changed most of the labels: "please select your card" to "select your payment method", "Card Holder" to "Name on the Card", "Expires" to "Expires MM/YY", and "CVC" to "CVV/CVC?". I want to clarify the info and make less confusion about the info required to be filled in.
More thoughts...
The drop-down menu for the payment method may take users extra steps to complete the task. It may be helpful to use buttons instead.
The drop-down menu for the payment method may take users extra steps to complete the task. It may be helpful to use buttons instead.
