Guest Design: Designing for Sites You Don't Control
Abstract // TL;DR
1. The host site is the unknown
Interface design assumes a controlled setting: you know the palette, the typography, what surrounds each component. A chat, payment or consent widget knows none of this. It shows up on thousands of sites, each with its own art direction, banners and apps. The mockup shows one case out of thousands, and the most favourable one.
For the new Reponse live chat, the prototype held up on four fictional stores: light, black, saturated, photo. Before writing a line of code, we tested it against 1,000 real Shopify stores from the target market, in the US, Canada and France, opened by an automated browser on desktop and mobile. 861 could be analysed. The field contradicted the mockup straight away.
2. Measuring against the worst real case
WCAG requires a contrast ratioThe ratio between the luminance of text and that of its background, from 1:1 to 21:1. WCAG requires at least 4.5:1 for body text (level AA). of at least 4.5:1 for text, usually checked against a background. Glass has no fixed background: it takes the colour of the page it covers. The first prototype checked the accent colour against the darkest tint of the smoked glass. That was the wrong case, and it measured 1.7 to 3:1.
The worst real case is the opposite: smoked glass over a white page, light glass over a black page. Once the rule was fixed, every case exceeds 4.6:1, and text contrast holds on 100% of the stores analysed, in both glasses. The lesson goes beyond contrast: a guest component is validated on the worst page it will meet, not the best-looking one.
3. Reading the page instead of asking for settings
The old widget asked merchants for their colours for the light theme and for the dark theme. Every setting is an admission: the design failed to read its environment, and hands the problem to someone who isn't a designer.
The new widget reads the page. It measures the luminance around it: smoked glass by default, light glass when the page is dark. Across the 861 stores, this single rule cuts weak edges from 16% to 6%, within 0.2 points of the best possible choice store by store. For colour, it follows a decision chain and keeps the first truly coloured colour. If everything is black, grey or white, as for 45% of brands, it falls back to the brand's secondary colour, then to a neutral light. A single field remains, and it is optional: the brand colour, for merchants who want to decide.
4. The guest's manners
A guest doesn't speak louder than the host. On half the pages, the bottom of the screen is already taken at load, first by cookie consent banners: 36% of pages, nearly two thirds of them showing Shopify's own banner. Covering that banner gets in the way of the first choice the store asks its visitor to make. While it awaits an answer, the widget therefore shrinks to its avatar, resting above it. It rises the same way above the sticky add-to-cart bars of product pages.
The same manners towards the other guests: 64% of stores already run a chat, Gorgias on 41% of them. On mobile, the bar shortens so it never covers their bubble, and the admin explains to the merchant why two chats side by side make shoppers hesitate.
5. Adding a single object
The last principle: the guest adds only one object to the page. A bar and a panel animating separately read as two more elements. The widget makes them read as a single component: the bar stretches into one block of glass, the panel grows out of it without a seam, the avatar rides under the edge up to the header, and the block only splits at the end. This is the Gestalt law of common fateGestalt principle described by Wertheimer in 1923: elements that move together, in the same direction and at the same pace, are perceived as one group.: what moves together is perceived as a whole.