Stage 1 · Design review · Not production
Two directions for the Hero and Flagship Transformation.
Same copy, same DEMO placeholder case, two visual directions. No winner has been selected and no other screens have been built. Open each direction full-size, or review the live 1440px and 390px previews below.
Direction A — Editorial Product
Assertive editorial type on Warm Ivory, the After site presented as a framed “plate”. The flagship moves to Deep Ink with margin-note annotations beside the comparison.
1440px · Direction A desktop
390px · Direction A mobile
Direction B — Interactive Product
A large browser with a Before / After switch sits directly under a compact headline and URL input. The flagship is a tool-like workbench with a change rail.
1440px · Direction B desktop
390px · Direction B mobile
Comparison
| Criterion | A — Editorial | B — Interactive |
|---|---|---|
| Brand character | Composed, editorial, premium. Typography carries the brand; product is shown as an exhibited piece. | Confident, product-led, hands-on. The interface itself is the brand statement. |
| First-10-second value clarity | Relies on reading the headline; the After plate supports but does not show the change. | Before / After is visible and switchable in the first viewport — value is shown before reading. |
| Visual impact | High through scale and whitespace; quieter hero, dramatic dark flagship. | High through the large live browser; headline is smaller to make room. |
| CTA visibility | URL input + Ink button prominent in left column above the fold at 1440 and 390. | URL input centered on Ink with Lime button — strongest contrast; sits above the browser. |
| Risk | Could read as an agency/studio site if the plate is not clearly a transformation. | Hero and flagship both show the demo — some repetition; depends heavily on a strong real case. |
G1 (10-second comprehension) has not been tested with real target customers and is not marked as passed.
Demo placeholders used
- Hartwell Fluid Systems — fictional sample company (both Before and After sites are hand-built mocks).
- Valve product photo — AI-generated demo image, not a real product.
- Product specs, model numbers, contact details — fictional and non-functional.
- Product and Contact page tabs — locked until authorized source pages exist.
- Sign-up / analysis continuation — simulated UI state only.
- Navigation links (Transformations, How It Works, Pricing, Sign In) — visual placeholders.
Missing real assets
- One authorized real company with same-site Before and After pages (desktop + mobile), with snapshot dates.
- Authorization record, generated-vs-manual edit scope, and functional verification for that case.
- Final L2M logo / wordmark (a typographic placeholder is used).
- A second case from a professional-services company, per the brief.
Responsive, keyboard, touch & reduced motion
- Breakpoints: layouts reflow (not scaled) at 1440, 768, 390 and 360. Mobile puts headline and URL input first, demo second; flagship defaults to the Mobile device view on small screens.
- Keyboard: all toggles are radio groups with arrow-key support; hotspots and change items are buttons with visible focus rings; demo viewports are scrollable regions reachable by Tab.
- Touch: interactive targets are at least 44px except in-frame hotspot pins (36px, scaled with the page); the change list provides a full-size alternative.
- Reduced motion: smooth scrolling, pin pulse and transitions are disabled under prefers-reduced-motion.
- URL states: empty, invalid format, unavailable (localhost / IP / .local), recognized, and continue (URL retained). Try “abc”, “localhost:3000” or “example.com”.
- Known issues: in-frame pins are small at 360px; the legacy Before page on mobile is intentionally unreadable (it is non-responsive) and is explained in a note.