# Checkout redesign: brief

Superhairpieces, superhairpieces.com (USD) and superhairpieces.ca (CAD). October 2026.

Design reference (V2 is the approved direction, V1 is superseded): https://claude.ai/artifact/131ZhkPwDaYu4PHqFx5wTc

Read with: `design-direction.md` (how it looks and behaves) and `open-questions.md` (what is still undecided).

## Goal

Replace the current checkout with a calm, minimal, step-by-step checkout that fewer people abandon and fewer people get wrong, on both domains, desktop and mobile.

## Context

- Platform: BigCommerce, Optimized One-Page Checkout today, lightly restyled (Open Sans, default BigCommerce layout).
- Payments: Authorize.Net for cards. Also PayPal, Apple Pay, Google Pay, Afterpay, Klarna, Affirm, Zelle, Venmo, Western Union, cheque, pay in store (some US only).
- An account is required for every order, because specialists may call about colour and fit. There is no plain guest checkout. New customers get an account created in the background. Existing customers must sign in.
- Two warehouses (Canada, USA). Stock moves warehouse to store only. Salons: 3 in the US, 7 in Canada.
- Audience is mostly 40+, spending $500 to $1,000+, often dealing with distressing hair loss. Trust, dignity and clarity matter more than speed tricks.

## Personas

| Persona | Who | Needs at checkout |
|---|---|---|
| Anxious first-timer | New to hair systems, high spend, private about it | Reassurance on colour and fit, a person to ask, discreet packaging and billing, payment plans |
| Repeat wearer | Knows their exact spec, reorders every few months, often urgently | Speed: sign in fast, saved address and card, clear express option, real arrival dates |
| Salon professional | Orders for several clients, pro pricing, tax exempt | Ship to salon or client, client reference, PO number, multiple addresses, reorder |
| Cross-border shopper | A Canadian on .com, or an American on .ca | Being sent to the right store before paying |

Also: people buying for someone else (for example a family member going through chemo). Covered by the gift option.

## Pain points (with evidence)

Seen in the live checkout and in customer reviews:
1. Pickup chosen by accident. On .ca, 6 salon pickups are listed above shipping and one was preselected. A Trustpilot reviewer described exactly this.
2. Orders sent to the wrong country. The country list starts alphabetically and nothing points Canadians to .ca. One custom order was shipped to the wrong country.
3. Express shipping feels expensive and surprising. Orders from two warehouses are charged double (FAQ).

Seen in the live checkout:
4. Sign-in wall first. New shoppers see "Returning Customer" and a password field. Creating an account needs a separate form with a password.
5. No express payment (Apple Pay, Google Pay, PayPal) in the cart or at the start of checkout.
6. Shipping cost unclear until late ("--", "Add Info"), and regular shipping showing $10 against a free-shipping promise.
7. 13 delivery options in one list, with "Not Guaranteed by Courier" repeated.
8. Business days instead of arrival dates.
9. Distractions: spin-for-rewards wheel in the cart, currency switcher in checkout.
10. No reassurance: no phone, no help, no returns or security note.
11. Off-brand styling.
12. First-timers can check out without the tape, adhesive and remover they need to wear the system.
13. Salons have no business tools (only an order comments box).

Industry (Baymard Institute, 2025): average cart abandonment is about 70%, about 80% on mobile. Top fixable causes: surprise costs (about 40%), forced account creation (about 18%), long or complicated checkout (about 17%).

## Success measures

Measure the current baseline first (BigCommerce abandoned-cart report, GA4 checkout funnel). Then track:
- checkout completion rate, desktop and mobile, per domain
- drop-off per step (details, delivery, payment)
- orders placed as pickup that support later changes to shipping
- orders shipped to the wrong country
- delivery and checkout related support contacts
- starter kit attach rate on first hairpiece orders
- share of returning customers who sign in with the code

No targets are set yet. Do not invent them.

## Scope

Phase 1:
- Cart (desktop, mobile)
- Checkout, 3 steps: Your details, Delivery, Payment (desktop, mobile)
- New customer flow (account created in the background)
- Returning customer flow (account recognised, sign in by code or password, saved addresses and card)
- Error, loading and processing states
- Order confirmation (feel-good moment)
- Both domains, with the differences in `design-direction.md`

Phase 2:
- Salon account checkout: ship to salon or client, client reference, PO number
- Ship to multiple addresses (BigCommerce setting: "Allow customers to select multiple shipping addresses")
- Deposit or pay-later options for custom orders, if the business approves

Out of scope: product pages, account area redesign, pricing and promotions logic.

## Technical approach

- Fork BigCommerce Open Checkout (checkout-js, React) and build the new UI on top of the Checkout SDK. Do not rebuild checkout from scratch: payments, tax, shipping and order creation must keep working through BigCommerce.
- Develop and test on a BigCommerce sandbox store, never directly on the live stores.
- Keep every payment method that works today.
- Saved cards need a Scale plan or higher and Authorize.Net Customer Information Manager (CIM). Confirm before building that part.
- The order confirmation page is part of checkout-js and can be customised there.
- The canvas files are visual references, not production code.

## References used

Loom (split layout, one task per screen), IKEA (plain radio rows, one strong rule above the total), Otter (labels above fields, minimal billing), Hims (reassurance line above the button), Rainbow Delights (all steps visible), DoorDash (delivery/pickup toggle, unavailable options with a reason, savings line), Airbnb (completed steps as one line with Change, joined card fields, policy in the summary, one optional add-on, warm processing message).