SA daily-deals marketplace · Daily deals, South AfricaGuest and login as equal-weight checkout tabs
The checkout entry step was login-first, with guest checkout as a text link below the fold on mobile. The variant gives both paths a tab, defaults to guest, and prefills the native form without fighting React.
- Guest checkout existed but was easy to miss, especially on a phone.
- The login page could render under a guest-looking URL, so any logic keyed on the query string would target the wrong step.
- Styling hooks were unstable: generated CSS class names and React IDs changed between builds.
Presenting guest and login as equal tabs, with guest selected by default, will reduce abandonment at the checkout entry step.
- Two-tab interface replacing the login-first entry. The guest tab collects email and name and continues to delivery; the login tab reveals the native form through a body-class stylesheet with nothing removed.
- Guest continue clicks the hidden native guest button, then fills the native inputs through React's own value setter so the framework registers the change.
- A sync tick that runs immediately and every four seconds from page load, surviving SPA navigation and re-renders.
- Thirty-two Playwright checks against production on desktop and mobile before hand-off.
Trust the structure, not the URL
Gating moved to what is on the page: a password field means login, a guest email field means guest. The password check runs first so ambiguity fails safe.
Writing into a hydrating form
Values are only set once a node shows React's internal markers, kept refilled while empty, and marked done only after surviving five seconds of ticks. A focused field is never touched, so anything the visitor types wins.
Measured on entry-step progression, completed orders. Test results belong to the client and are shared in conversation, with their permission, rather than published here.
More experiments
View all →Global outdoor-gear brand · A confirmation popup that only fires on a real add
After adding to bag there was no clear confirmation or next step. The variant shows a card on desktop and a bottom sheet on mobile, but only once the cart API has actually said yes.
The hard part. React's synthetic event system swallowed the click before a normal document listener could see it, and two different add-to-bag buttons had to be recognised without relying on their labels.
SA beauty retailer · Bag context and a direct checkout after add-to-bag
The native 'item added' modal showed the item and nothing else. The variant adds the bag total, item count and a Checkout now button, driven by the site's own analytics event and cart feed.
The hard part. The extra cart fetch doubled a server-sensitive call. The popup had to fail safe, and a lighter fallback had to be scoped for the client.