Blip Website - Session Recap

Date: 22 March 2026

What we did today

Hero video vignettes

We brainstormed seven vignette concepts for the hero section and produced three of them in Kling. The breakthrough was switching from cinematic camera language to an “authentic iPhone 16 Pro footage” aesthetic - visible skin textures, organic shake, no cinematic lighting. This made the videos look like real moments rather than AI-generated commercials.

Keepers:

• The Family Dinner (v6) - East Asian mother and daughter at a kitchen table. Mother finishes saying something, daughter bursts out laughing and leans in. Warm, subtle, no tech in the scene at all. Feels like someone you know shot it.
• The Curious Learner (v5) - Black man in his early 60s at a kitchen table, discovers something on his tablet. Goes from concentration to a slow surprised grin. Quiet delight.

Not quite there yet:

• The Shop Owner’s Morning (v3) - Two takes. Good setting and arc but the woman looked too glamorous and the first take had a multicam issue. Worth revisiting with the improved prompt style.

Still to make:

• The Printer Standoff (frustration beat)
• The Password Spiral (man, solo)
• The Late-Night Worry (online safety anxiety)
• The Deep Breath (calm “after” state)

Hero text strategy

We decided that the headline text should change in sync with each video vignette - paired moments where the words complement the feeling in the clip. Technically straightforward in Astro. We’re holding off on writing the actual headlines until the full page is shaped.

Video loading strategy

Researched how to load multiple hero videos without lag. The plan: compress each clip to 3-5MB (currently 17-22MB), use a blurred poster image for instant load, then progressively buffer each subsequent clip while the current one plays. Saved the full technical strategy as a separate note.

Audience design research

Researched what layouts and visual patterns this audience (non-technical, 40-60+, affluent) responds to. Key findings: they want clean and spacious, readable fonts, generous white space, authentic photography, blue as the dominant trust colour. Apple-inspired minimalism applied to a personal service. No jargon, no clutter, no dark/techy interfaces.

Asset review

Went through the “previous blip assets” folder. The “blip” circle logo (navy + white lowercase) is the strongest brand asset. The headshot works for now. The AI-generated lifestyle collages and cinematic frustration images should be left behind - the video vignettes set a much better visual direction. The “uh-oh” ad concept has the right playful-but-empathetic tone worth carrying forward.

Google Stitch layouts

Created a detailed prompt and generated six layout variations in Google Stitch. None are the final answer, but they give us spatial rhythms and section flows to react to. The “Personal Connection” layout (founder-led, human-first) is closest to the brand. The real impact will come from the videos and imagery, not the layout itself.

Next steps

1. Finish the remaining vignettes - we have the prompt formula dialled in, just need to produce the rest
2. Revisit the shop owner vignette using the improved iPhone aesthetic
3. Get the imagery direction right - photos, visual style, and supporting graphics that match the video tone
4. Pick a layout direction from the Stitch options (or hybrid) once refreshed
5. Write the hero headlines - one per vignette pairing, once we know the full page shape
6. Build the actual site in Astro + Tailwind once the above is settled