Order Confirmed! 🎉
Order #FFM-20260211-001
🕒
Estimated delivery:
Today, 2:00 - 3:00 PM
📍
Delivery to:
123 Main Road, Sandton
Order Summary
4 items
Total
R 205.44
Track My Order
Continue Shopping
CON-078 | Order Confirmation
Screen Overview
Type:
Success screen / Key milestone screen (no bottom navigation, no back button)
Purpose:
Confirm that the order has been placed successfully and provide next steps
Navigation:
"Track My Order" goes to
CON-083
(Order Tracking); "Continue Shopping" returns to
CON-030
(Home)
Component Specs
Background:
Green gradient from
#043F2D
to
#047857
Check circle:
96px, lime accent
#C9F06B
, double ring shadow (12px + 24px), pop animation
Title:
Alexandria 26px Bold, white, with party emoji
Order number:
14px, 60% white opacity, letter-spacing 0.5px
Summary card:
White, 16px border-radius, 20px padding, heavy shadow
Total:
Alexandria 20px Bold, primary dark green
Track Order button:
Lime accent, 54px height, 12px border-radius
Continue Shopping button:
Transparent with white border at 40% opacity
Behavior Notes
This screen cannot be navigated back to from the home or tracking screens
Check circle plays a pop animation on load (scale 0 to 1.1 to 1)
Cart is cleared after reaching this screen
Push notification is registered for order updates
Order confirmation email/SMS is sent in the background
Hardware back button navigates to home, NOT back to checkout
Data Points
Order reference:
Format #FFM-YYYYMMDD-NNN (vendor prefix + date + sequence)
Estimated delivery:
Based on selected timeslot from checkout
Delivery address:
Short format (street + suburb only)
Item count:
Total unique items in the order
Total:
Final charged amount including all fees and discounts
Accessibility
Screen reader announces "Order confirmed successfully" on load
Both action buttons are
<a>
elements for keyboard navigation
Success animation is decorative; information is conveyed through text