PROJECT SNAPSHOT - Blip Website Build

Date: 28 March 2026 Thread status: Wrapping up session. Prototypes nearly launch-ready. Christian comparing v2 and v3 copy approaches before choosing which to ship.

1. Project Overview

What we’re building: A new single-page landing website for Blip, Christian Malcolm’s boutique premium personal tech support business. The site replaces the current multi-page site at blipsupport.com.

The goal: Convert visitors (primarily from LinkedIn outreach and ads targeting professional women in America aged 40-60+) into “book a free call” consultations via Google Calendar appointment scheduling.

Target audience: Busy, successful women aged 40+. Solopreneurs, creatives, professionals, small business owners. Affluent enough to pay for premium support. Not naturally technical. Emotionally frustrated, sometimes embarrassed, sometimes anxious about technology. Secondary: retirees, people who’ve lost their IT department, people newly managing their own tech.

The brief in one sentence: A warm, premium single-page landing site with AI-generated hero video vignettes, rotating paired text, and a clear path to booking a free introductory call.

Client: Christian Malcolm (mail@blip.ltd). Based in Vancouver, Canada. His colleague Carrie is in London (remote). They use “we” language throughout - Blip is presented as a small team, not a solo operation.

2. Key Decisions Made

Tech stack

• Framework (planned): Astro + Tailwind CSS (not yet initialised - still in HTML prototype phase)
• Hosting (planned): Cloudflare Pages
• Current state: Self-contained HTML prototypes with inline CSS, Google Fonts
• CTA mechanism: Google Calendar appointment scheduling (LIVE) - https://calendar.app.google/rar953Yq42xFWphp8
• Contact form: Decided against for now. Booking link + email + phone is sufficient.

Design direction (locked)

• Single-page architecture
• Warm, premium feel - NOT corporate, NOT masculine, NOT aggressive
• Warm whites and creams as dominant colours. Navy as accent only (headings, footer)
• Left-aligned navy gradient wash over hero video
• Playfair Display for headlines, Inter for body text
• Scroll-down chevron with bounce animation between hero and content
• No parallax, no carousel, no chat widget, no stock photography
• Minimal nav: logo left, 3-4 links right, “Book a call” button always visible

Colour palette (locked)

• Navy: #0A2341 (accent only - headings, footer)
• Amber/gold accent: #D4A843
• CTA blue: #3B82F6 / hover: #2563EB
• Warm white: #FDFBF7 (main background)
• Warm grey: #F7F4EF (alternate section background)
• Warm grey 2: #EDE8E0 (borders)

Page structure (locked - 4 sections + footer)

1. Hero - Video background, headline, subline, CTA button, scroll chevron
2. What We Do - Three pillar cards (Tech Support, Online Safety, AI Coaching)
3. Who We Are - Christian’s headshot, bio text, testimonial year-count display
4. The Close - Final CTA with reassurance copy
5. Footer - Logo, copyright, phone, email, privacy link

Colour pivot history

• Google Stitch generated layouts that were too navy-dominant, masculine, and aggressive. Christian rejected them.
• Pivoted to direct HTML prototyping with warm-white dominant palette. Navy became accent only.
• The key insight: the hero stays dark (needs video overlay gradient), but everything below opens into warm white/cream.

Contact strategy (locked)

• Primary CTA: “Book a free call” - links to Google Calendar booking page
• Secondary: Phone number in footer: 1-844-995-2547 (toll-free, clickable tel: link)
• Secondary: Email in footer: hello@blipsupport.com (alias - needs to be set up to route to Christian’s inbox)
• No contact form - decided against for now to avoid clutter and diluting the primary CTA
• No location shown - removed “Vancouver, Canada” from footer to avoid turning off US LinkedIn prospects

Privacy page

• Simple, clean privacy.html created with matching site styles
• Covers: what we collect, how we use it, third-party services (Google Calendar), no cookies, your rights, contact
• Links back to homepage, has booking CTA in nav

Copy approaches (two versions for comparison)

• V2 approach: “We solve your problem” - leads with Blip’s capability. Headline: “When tech feels overwhelming, we make it simple.”
• V3 approach: “You’re brilliant, let us handle this part” - leads with visitor’s identity/validation. Headline: “You’re good at what you do. Let us handle the tech.”
• V3 additions over V2: Recognition section (makes visitor feel seen before selling), Before/After proof story cards (Frances, Peter, Louisa), stripped-back year-count testimonial display
• Detailed comparison: See 260326 - V2 vs V3 Copy Comparison.md

Things ruled out

• Multi-page site (too much to build and maintain)
• Testimonial carousel (show all four at once - the year numbers together are the proof)
• Google Stitch for layout (results too corporate/masculine)
• Calendly/Cal.com for booking (Google Calendar native scheduling in Workspace is simpler and cleaner)
• Contact form (unnecessary friction, email + phone + booking covers it)
• Displaying location (could turn off US prospects)
• Newsletter signup (not for V1)
• Pricing on the page (not for V1)

3. Current State

Completed

• Audience research, pain points, emotional triggers thoroughly documented (15+ months of prior work)
• 7 AI video vignettes produced in Kling AI (5 keepers, 2 holds)
• v6 (family dinner) re-exported clean from Kling (no watermark) and compressed for web (966KB)
• HTML prototype v1 (superseded)
• HTML prototype v2 (current working version - all Christian’s feedback incorporated)
• HTML prototype v3 (alternative copy approach for comparison)
• Privacy page (privacy.html)
• All CTA buttons on both prototypes wired to live Google Calendar booking URL
• Footer updated on both: phone, email, privacy link, no location
• “We’ve kept the same clients for over 20 years” highlight removed from v2 (redundant with year-count display)
• Google Calendar appointment scheduling configured and live
• Project update log written (260326)
• V2 vs V3 copy comparison document written (260326)
• Comprehensive pain-point and premium-service messaging research completed

In progress

• Christian comparing v2 and v3 to decide which approach (or hybrid) to ship
• Considering re-exporting a second video (v8 ambient studio suggested) clean from Kling for variety

Not started

• Astro project initialisation (still in HTML prototype phase)
• Hero headline/video rotation JavaScript
• LQIP (Low-Quality Image Placeholder) poster images for new clean videos
• Web compression of remaining keeper videos (v3 shop owner, v4 late night worry, v5 curious learner, v8 ambient studio)
• Re-export remaining keepers from Kling without watermark
• Three Pillar sub-pages (deferred - “Find out more” links commented out)
• hello@blipsupport.com alias setup (Christian needs to configure this)
• Deployment to Cloudflare Pages
• Domain decision: blipsupport.com vs blip.ltd as primary
• Real logo integration (currently just a navy circle with “blip” text)

Known issues / watch out for

• All videos except v6-family-dinner-take2-clean still have Kling watermarks
• v9 (hillside serenity) has the man facing away from camera - needs take 3 if keeping
• v7 (deep breath) is a hold - not clearly decided whether to keep or reshoot
• hello@blipsupport.com email alias not yet set up - dead link on page until configured
• Privacy page is minimal - may need expanding depending on jurisdiction requirements
• The v2 testimonial quotes are placeholder paraphrases, not verified verbatim client quotes

4. File Inventory

Prototypes and pages (in Blip 26/)

Videos (in Blip 26/blip videos/)

Web-ready compressed videos (in Blip 26/blip videos/web-ready/)

Assets (in Blip 26/previous blip assets/)

Working documents (in web work/Blip/)

Reference documents (in web work/Blip/Reference/)

5. Reference Material

Live URLs

• Google Calendar booking page: https://calendar.app.google/rar953Yq42xFWphp8
• Current live site (being replaced): blipsupport.com
• Harc Creative (design reference): https://harccreative.com/ (their contact/booking flow was the inspiration for the Google Calendar approach)
• Kling AI (video generation): https://klingai.com/

Video compression command

ffmpeg -i INPUT.mp4 -c:v libx264 -crf 28 -preset slow -an -movflags +faststart -vf "scale=1280:-2" OUTPUT.mp4

Kling AI prompting lessons (from previous snapshot)

• Describe end states, not transitions (closing laptop = worried face)
• Specify “no earphones, no accessories of any kind”
• “Normal slender build” prevents athletic/model bodies
• “Fully buttoned” prevents fashion-shoot open collars
• “Wide shot showing full figure” prevents too-close framing
• “Soft overcast natural light” prevents dramatic studio lighting
• Specify age with physical markers: “visible smile lines”, “silver at the temples”
• The “iPhone 16 Pro authentic footage” aesthetic instruction works well
• 15-second duration is the sweet spot

Key copy lines (settled)

• Hero (v2): “When tech feels overwhelming, we make it simple.”
• Hero (v3): “You’re good at what you do. Let us handle the tech.”
• Pillars heading: “Someone to handle the tech, so you don’t have to.”
• Pillars subline: “Three ways we help busy people take technology off their plate.” (v2) / “Three ways we take technology off your plate.” (v3)
• Trust: “We’ve been doing this for over 25 years. We still love it.” (v2)
• Close (v2): “Let’s have a conversation.” / “A relaxed, friendly chat about your tech and how we can make it easier.”
• Close (v3): “Ready to hand over the tech?”
• CTA button: “Book a free call”
• Reassurance: “It takes two minutes. We’ll take it from there.”
• Calendar booking description: “A relaxed, friendly phone call to talk about your tech and how we might be able to help. No preparation needed - just tell us what’s been frustrating you, what’s worrying you, or what you’d like to get better at. We’ll listen, share a few ideas, and you can decide if we’re the right fit. No obligation, no jargon, no sales pitch.”

Testimonial data (real clients)

• Howard Malin, Notting Hill Bookshop - 20 years
• Paula Kahn, Private client - 18 years
• Stephen Gittins, AIM - 24 years
• Ian Flooks, Wasted Talent - 20 years

Proof stories (from Bridge Script A)

• Frances: Shop owner, in tears, couldn’t get anything to work. Within a few sessions, crying happy tears. Now runs her own business and researches genealogy online.
• Peter: Retired professional, always had IT departments. Wanted to run yoga retreats in Italy. Got set up, now spending retirement doing exactly that.
• Louisa: Anxious about online scams after friend was targeted. Got passwords and email secured. Huge weight off her mind. Online transactions no longer cause panic.

Core emotional triggers (from 15 months of research)

• Frustration (“It just doesn’t work and I’m wasting my time”)
• Embarrassment (“I feel stupid asking for help again”)
• Anxiety (“Am I going to get hacked?”)
• Overwhelm (“Everything’s changing too fast, especially AI”)
• Dependence (“I hate relying on my kids/partner/nephew”)
• Fear of being left behind (“Everyone’s talking about AI and I’m nodding along”)

Emotional destinations (what they want to feel)

• In control, competent, safe, independent, lighter, current

Premium service messaging research findings (from this session)

• Lead with the visitor’s identity, not the service’s capability
• The “contrast formula”: validate competence in their domain, then position the service as the counterpart
• Normalise the need without pity - make the struggle universal and situational, not personal
• Reframe hiring help as “delegation intelligence”, not admitting defeat
• “No question too big or small” directly addresses fear of being judged
• Avoid “problem” language - use “questions”, “support”, “help with your devices”
• Real human faces + credential display + warmth = trust balance
• Minimal form friction for anxious audiences

6. Restart Instructions

1. Read the master brief first: web work/Blip/260318 - Landing Page Brief - Ready for Review.md - this contains the full audience research, pain points, proof stories, and design direction.

2. Read the copy comparison: web work/Blip/260326 - V2 vs V3 Copy Comparison.md - this explains the two different messaging approaches and includes a recommended hybrid direction.

3. Open both prototypes: Blip 26/blip-landing-prototype-v2.html and blip-landing-prototype-v3.html. These are self-contained HTML files that can be opened directly in a browser. They reference local video and image files via relative paths.

4. Check with Christian: Which version (or hybrid) did he choose? Is the site live yet? Has hello@blipsupport.com been set up?

5. For video work: Read PROJECT-SNAPSHOT-260324-v2.md for detailed Kling AI prompting lessons and the exact prompts used for each vignette. The compression command is in this snapshot above.

6. For the real build: The plan is Astro + Tailwind + Cloudflare Pages. The astro-static-site skill is available and should be invoked when initialising the project. The HTML prototypes are the design reference - convert to Astro components.

7. Key preferences: Christian writes in UK syntax. Names: Carrie, Derrick. No em dashes - use short hyphens sparingly. He wants the site to feel welcoming and safe for his audience, not techy or corporate.

8. Files live in two locations:

   • Blip 26/ - prototypes, videos, assets, privacy page (the deployable stuff)
   • web work/Blip/ - working documents, strategy, reference material, snapshots (the thinking)