VERA · Design Exploration

Document Picker — Solution A vs B comparison prototype

This prototype compares two fix candidates for the "Choose a document" attach flow inside VERA Studio's "Fill with AI" panel (Create Product Passport → Assign Data step). The current implementation opens the picker as a page-level Modal with a full-page backdrop that also covers the very panel the action was triggered from.

User Story

As a user filling in a Product Passport with AI assistance, I want to attach an existing or new document without losing the context of the assistant panel I'm working in, so that I don't feel like I left the task I was doing.

What this prototype shows — the Attach flow

Solution A — Inline popover. A small popover anchored to the "Attach" button, with no page-level backdrop. Best for a quick choice from a short list.

Solution B — In-place panel replacement. The picker takes over the Fill-with-AI panel's own content, with a Back arrow returning to the chat input. Better when the picker needs more room (search, a longer list).

What this prototype shows — how the Fill-with-AI panel itself opens

The panel is not visible by default (confirmed against the real "before Fill with AI" screen). Clicking "Fill with AI" in the toolbar reveals it. There are three ways to reveal it, all switchable at the top of the prototype:

1. Push / Reflow. The page grid resizes and the form shifts left to make room for the panel. No backdrop of any kind — nothing is layered on top of anything else, so hierarchy is not a question here.

2. Overlay, no dim. The panel slides in from the right and sits on top of the page. The page itself never visually changes — but it is not actually usable while the panel is open: an invisible layer catches any click outside the panel and closes it (light-dismiss, like a popover) instead of letting it reach the form. The form is never fillable underneath something overlaid, whether or not that something is dark — you can't read what you'd be filling in anyway once it's covered.

3. Overlay + Dim. The same slide-in panel and the same click-outside-closes behavior as variant 2, plus a visible scrim so the page's inertness is honest rather than invisible — the darkening is a truth-in-advertising signal for a state that already exists in variant 2, not a new restriction.

Variant 3's scrim reintroduces a darkened backdrop — the exact visual ingredient that caused the original VERA Studio bug this exploration traces back to (a Sheet and a Modal each drawing their own backdrop, stacking into one over-dark page with no clear "which layer is active" signal). It stays compliant with ADR-0020 for a different reason than that bug: it never stacks two scrims. There is exactly one overlay being added (the panel) and exactly one scrim for it — the page is the single lower layer, and it recedes completely (dimmed, inert) rather than partially. The panel is the single, unambiguous top layer. The open design question is narrower than "dim or not" — both 2 and 3 already agree the page must go inert once something covers it; the only difference is whether that inertness is shown. Which of the three fits this panel best is a design judgment for the Design Lead, not something this prototype resolves — that's exactly why all three stay switchable side by side here.

No Notion ticket exists for this exploration yet — built directly at the Design Lead's request as an ad-hoc comparison. See ux-entscheidungen.md in this folder for the documented deviation from the usual ticket-first rule.
Open the prototype →