Studies
Aurora
A storefront carried through cart, wishlist and a two-step checkout with real arrival dates.
The brief
A study. Aurora is not a real shop. It exists to take an e-commerce flow all the way to the end, because the interesting parts of a storefront are the ones after "add to cart".
Product grids are easy. Deciding, hesitating, comparing, and paying are where stores lose people, so those are what this build spends its effort on.
The constraints
- No payment processor. Checkout had to be complete and convincing without ever touching real money or real card details.
- The cart must survive a closed tab, because carts that empty overnight are the oldest self-inflicted wound in online retail.
- Phone-first. Most storefront traffic is a thumb, and the primary commerce action has to be reachable by one.
The decisions
Checkout is two steps with real arrival dates
Standard or express, each showing an actual date range rather than "3–5 business days", plus gift wrapping and an itemised summary that stays visible while you fill the form. The order confirmation is personalised if you used the demo sign-in.
What it costs: considerably more work than a "checkout" button that does nothing, and it is the only way to find out whether a flow actually holds together.
The free-shipping bar tells you the number
The cart shows exactly how much more qualifies for free shipping. It is one of the few upsells customers genuinely welcome, because it answers a question they were already asking.
What it costs: nothing, when the threshold is real. It becomes manipulative the moment the number is invented to push an order over a line.
A wishlist, because hesitation is a real state
Not everything is either bought or forgotten. Hearts on cards and in the detail overlay feed a drawer with its own badge, so a maybe has somewhere to live instead of being lost.
What it costs: a second collection to keep in sync with the cart everywhere both appear.
The bug that mattered most was a layout bug
The cart button sat entirely off-screen on a 375px viewport — the primary commerce action, unreachable, on the majority of traffic. Everything else on this page is craft; that was the defect that would have cost every sale.
Its sibling: empty cart and wishlist badges rendered a literal "0", because a component's display:flex outranked the hidden attribute. Both are now guarded globally.
What it costs: nothing to fix, and it only surfaced by opening the site at phone width rather than trusting a desktop browser window.
Built with
- Vanilla JS
- localStorage
- Dialog semantics & focus trapping
- Cloudflare Pages
