👟 Famous Footwear offers express checkout options in the cart, but some users may click the Checkout button anyway and end up on this form. Repeating their quick pay options, graphically, above input fields gives them a second chance to save some effort

🛍️ Nordstrom lets you know they’ll use your email and phone number for order updates and questions — this suggests to customers that personal info will not be used for marketing

🧶 Etsy’s checkout reflows based on country selection

🌍 North American countries are promoted to the top of the menu, visually separated from the alphabetical list, and repeated within the list.

🐊 Crocs collapses its Address 2 field and uses color to make the accordion link POP

👗 Instead of collapsing Address 2, Aritzia uses clear hint text (as the field label) to explain what the field is for, and marks it optional. Consider A/B testing the 2 against each other

🛍️ Nordstrom includes a collapsed option to enter a password in the Contact info section. It’s unobtrusive, but easy to spot with the blue font

Good examples after the jump 🙏🏽 but first, try to math these in your head:

Contrast the ⬆️ above with the below ⬇️ :

🚣🏿 J.Crew uses arrival date as the header and shipping method as the sub-text, referencing “today’s date” to give customers clarity on their options, and using days of the week for extra context

👡 Steve Madden uses red text to add more visibility to the order cutoff — however, placing this text out of context with the shipping options below makes it easy to overlook. Consider inline placement like the examples below:

👠 Michael Kors shows cutoff times inline with shipping options

👗 Reformation places “order by” detail before arrival estimate to bring even more clarity to its copy — we read left-to-right!

👖 Alternately, you can simplify it with “If order placed today” and include a buffer for late-day orders. Levi’s simplifies its copy and removes the time-of-day cutoff. This can also reduce thinking and anxiety around “What time is it now? What is EST in PST terms?!”

👚 Express highlights shipping cost in bold, with shipping method and arrival dates (with days of the week). Because shipping cost is a major influence on an ultimate purchase, this approach can help customers make faster decisions

👚 Lulus shows both arrival dates and business day ranges, with prices clearly separated and easy to scan. This provides more clarity than simple “Expedited, Express and Overnight” labels, and supports users regardless if they care more about “how fast” vs “what day” their order arrives (or “how much”)

🥪 Fashion Nova covers all the bases here — with a clear, vertically-aligned hierarchy, users can understand arrival date (with day of the week), speed in business days and order cutoff to hit these estimated dates, and a clear cost value

👟 Brooks Running suggests choosing Standard shipping to help reduce environmental impact

🎁 Anthropologie is just one example of a merchant enabling gift message entry from the Checkout step (although this is arguably better served from the Cart step). Ideally, you’ll offer it in both Cart and Checkout (as a fallback)

🎁 Another example from the North Face:

📿 Puravida uses an email opt-in checkbox with the email field and a “Get 20% off my next purchase” CTA with the shipping address form (to capture SMS opt-in)

🙈 Points for making the “Change shipping speed” link blue — but most checkouts provide radio buttons and clear shipping method selection in cart. Many mobile users will gloss over this option.

🙈 Agggghhh, placing the “Change” link in the top right of the section. No explanation needed

🙈 It’s so easy to overlook this dropdown that hides faster shipping options, especially with the big, bold, black Save & Continue button overshadowing it

💣 There are so many ways to style text and microcopy to make it easy to scan at-a-glance. There’s no need to hide transit time behind tooltips!

👎🏽 Business day ranges are redundant, hard to scan and force users to math-in-their-head. Even “Standard, Express and Priority” would provide more context (as headers). This approach assumes shipping speed is more important to customers than shipping cost

🙈 Text that spans more than one line, and contains multiple details should be visually broken up with line breaks and different text styling

See better implementations of shipping method vs shipping cutoff time below:

🙈 Banner blindness is real — especially when a drab color like dark gray is used. This merchant combines light-on-medium text with long microcopy many users will ignore

💣 This only clutters your microcopy and makes it harder to scan

💣 Think of the journey users’ eyes must make to connect shipping cost to method

🤔 Compare the above to the lovely compact vertical alignment from Fashion Nova below:

🙈 Presenting a 2x2 table with shipping options taxes the customer’s attention and brain. Vertical alignment is far more easy to process and choose from

💣 3 column grids are no better, but at least this example doesn’t stuff text into the boxes. But users have to click the boxes to see their related delivery estimates. Why make users work hard?

🙈 This merchant fails to clarify what Standard and 2nd Day means, considering that processing time applies — how much faster than Standard is 2nd Day? Is 2nd Day tomorrow or 2 days from now?

💣 How much faster is 1-2 Business Day shipping than Expedited and Standard? Is it worth the cost difference?

🙈 The “thin line” field may look slick, but it’s just BEGGING for a user to Continue to shipping and trigger an error message