.svg)
Allow users to select previously added addresses during the checkout flow
This makes the checkout a lot more convenient for the users and helps them to save time and complete the transaction faster.
Have the following sections covered
The site-wide pre-header
A great place where to introduce information about delivery, returns, and unique selling points! Make sure the Return policy is clear, visible, and friendly.
The site header with branding, auto-suggest search, support contacts, and main navigation
Take a look at the examples by Wunderfront. For mobile, it is essential to keep the search input open, navigation, and cart quickly accessible, and branding concise. Try also bottom navigation on mobile! Be thumb-friendly and boost conversions!
The clear page title with an option to return to the previous view + Add a new address link
Clearly indicate the page the user is on and provide an opportunity to go and add a new address.
The address card(s)
Show the address name (Home, Office, etc, the user enters), the full address summary, and contact details. And enable the user to see if the address is the default one or not and allow the user to edit the address. Upon editing, allow the user to choose a name for the address, provide full address details, as well as contact details and an option to make this one the default option and a highly visible Apply button (if the user edits, provide an option to delete the address too).
The recently viewed products
Help the returning visitors become visitors much faster, and also consider moving this section below the Hero campaign banners for returning users (on homepage)! This an amazing opportunity to take the user to the checkout!
The pre-footer: The bottom benefits
Visually and textually remind site-wide why shop with you. Keep it super short and have 3-5 benefits visualized and communicated.
The pre-footer: The payment options
Showcase different options people can use to pay, and bet big on buy now and pay later options. Make people trust you more, and help them get products faster and more conveniently.
The site footer with bottom navigation and trust marks
The site footer is like the air you breathe in, it has to exist. Showcase trust badges/marks, top navigation items, key categories, contact pages, FAQ, About us pages, social links - and all the terms and privacy pages. And do not forget the delivery information and return handling pages! You can also use the area to acquire leads and make people subscribe to your newsletter, but there are better ways.
The bonus checklist
Keep adding new addresses and editing existing ones equally weighted visually
To edit or add that is the question - inside the user's head. Let them choose freely without being overly pushy on preferring one option over the other.
Provide clear UI messages on success and error, and be clear on what went well and what needs extra attention
Communication is important, even when the user does everything correctly. Indicate success and areas where extra attention is needed.
Provide an address autocomplete solution when adding a new address
Help people find their address and fill all the required inputs ten folds faster, by enabling the address to autocomplete on checkout, such as Google Address Autocomplete.
The “please avoid” checklist
Avoid inline labels
By using inline labels, you put users under great stress, because by selecting inputs, the inline labels will disappear, and the users easily forget what the input was about!
.png){kind=icon}
.webp){kind=logo}
.png){kind=logo}
