The checkout flow has solid visual foundations but critical usability and accessibility gaps are blocking conversions. Users encounter silent failures at the most critical moments — form submission and payment.
Form validation is silent, error states are missing, and the pricing breakdown is buried below the fold on the plan-selection step. Users abandon at the plan-selection and payment steps without understanding what went wrong.
Form fields across the Delivery Preferences and Payment screens provide no real-time feedback. Users only discover errors after submitting, leading to frustration and abandonment at the highest-friction step.
When payment processing fails (e.g., declined card, network error), the page shows a generic "Something went wrong" message with no actionable next step. Users cannot distinguish between a temporary glitch and a permanent card issue.
The total cost including delivery fee, tax, and first-box discount is only revealed at the final payment step. On the Plan Selection screen, users see per-serving prices but no order total — creating sticker shock at checkout.
The primary call-to-action buttons across all screens use white text (#FFFFFF) on a coral background (#FF6B5E), producing a contrast ratio of 3.2:1 — failing the WCAG AA minimum of 4.5:1 for normal text.
