Adobe XD CC Tutorial

Other CheckOut Screens

In the last article, we created a Cart Screen. In this article, we will create following checkout screen.
Promo Code or Discount
Delivery Address
Check Out and Payment
Order Status Screen

We will use our Cart Screen for all above screens. Copy Cart Screen once. Remove Products Repeat Grid, bottom footer and Offer Code button. Rename it Create four more copies of Promo Code Screen.

First, we need a screen to add promo code. Following image shows the final output for Promo Screen.

Promo Code Screen is very simple. On top, we have a Cart Total text item with background rectangle. Then we have a list of all the available offers and promotions. For each promotional offer code, we have a promo code, a Button to activate the single offer code and promo description. Next, we have a button to go on order delivery address screen. The bottom navigation bar is now changed. Offer Code is now active.
On address screen we need two options, either user can select an existing address or user can add a new address. Following image shows both the options.

For existing address, we have repeat grid of existing address items. Each item have following items
Text Items for Deliver to text, Name, mobile, email, address, pin code, city, and state.
Three buttons for edit, activate and delete the address item.

For new address, we have a form for adding a new address. Each form element is created with a rectangle and a text item for the hint. On click on Check Out button, the new address must save to existing address list and the user will redirect on Check Out or Payment Screen.

Next, the following image shows the Payment Screen.

On Payment screen, we have few text items, radio buttons, textbox, checkbox, and buttons. On click on Place Order button user will redirect on Order Confirm Screen. Following image shows the Order Confirm Screen.

Finally, If you want to download the document use below link.

Dealsatoxyz_Other_CheckOutScreen.xdLogin to Download
Leave A Comment

Please login to post your valuable comments.