ux(public): review and revise copywriting and UI to remove vibe-coded patterns

[natashaannn]

User story

As a first-time visitor, I want the app to feel intentionally crafted, so that I trust it enough to use it and share it with my audience.

As a creator evaluating Deckcreate, I want to see polished, human-feeling copy and UI decisions, so that I don't dismiss the tool as an unfinished side project.

Background

The public app has good authentic copy overall, but carries several subtle signals that reveal it was built with a coding agent — patterns a non-technical user may not consciously identify but will subconsciously register as rough. These erode trust before the user even tries the tool.

Identified patterns (from a copy and UI audit of the four public pages):

URL / navigation:

• /get-youtube-captions — exposes the implementation description rather than a user-facing concept; feels like a script name, not a product page. Compare: /transcribe or /captions.

Placeholder text left in production:

• Both the Carousel and Transcription forms use https://www.youtube.com/watch?v=dQw4w9WgXcQ or dQw4w9WgXcQ as the placeholder — the classic "Rick Roll" URL is a developer in-joke that reads as unfinished to creators.

Repetitive messaging:

• The "zero AI / minimal AI" claim appears on the home page twice (feature card + philosophy section) and again on the About page twice. Repetition at this density reads as defensive over-justification rather than confident brand voice.

4-pillar grid structure (About page):

• "Minimal AI usage / Authenticity first / Built for part-timers / Open and honest" — the symmetrical 4-card layout with a bold title + body paragraph per card is the most recognisable agent-generated UI pattern. The content is genuine; the structure signals the template.

Generic badge copy:

• "Built by creators, for creators" — this phrase appears on essentially every creator tool on the internet. It adds no signal about what makes ragTech or Deckcreate specific.

Over-structured help text:

• Carousel page: "Each slide shows two video frames stacked vertically with text overlays. Enter timestamps in HH:MM:SS format." — accurate but clinical. Real product copy would be warmer or more action-oriented.

Inconsistent tool naming:

• Home page calls it "Video Transcription"; the nav goes to /get-youtube-captions; the page header says "Transcription ({count} sentences)". Three slightly different labels for the same tool.

"Built different. On purpose." tagline:

• Stylised lower-case is intentional, but the phrase itself is a well-worn trope. It signals effort-to-be-different rather than actually being different.

"Pro" badge on Auto Bulk Carousel:

• If Pro is not a real paid tier that exists today, this badge reads as aspirational placeholder copy — a common vibecoding tell.

Acceptance criteria

Happy path

Given a creator visits the home page for the first time
When they read the hero, features, and how-it-works sections
Then no phrase feels copy-pasted from a generic SaaS template; every claim is specific to ragTech's actual story and tools

Given a creator opens the Carousel or Transcription form
When they see the URL and the placeholder text
Then both feel like intentional product decisions, not developer shorthand

Given a creator reads the About page
When they reach the philosophy section
Then the section does not look like a 4-card symmetrical grid generated from a template; the structure matches the weight and specificity of each point

Error path / edge case

Given the "Pro" badge is visible on Auto Bulk Carousel
When a creator clicks or hovers it
Then it is either (a) connected to a real waitlist/upgrade flow, or (b) removed entirely — it must not be a dead label

Out of scope

• Functional changes to the carousel generator or transcription tool
• Adding new pages or sections not currently in the public app
• Brand identity redesign (colours, fonts, logo)
• Any internal (internal) route pages

Technical context

Public pages and components to review:

• app/(public)/page.tsx — home page
• app/(public)/about/page.tsx — About page
• app/(public)/carousel/page.tsx — Carousel tool
• app/(public)/get-youtube-captions/page.tsx — Transcription tool
• app/components/Header.tsx — nav links (includes the /get-youtube-captions route)
• app/components/CarouselForm.tsx — form placeholders and help text
• app/components/TranscriptionForm.tsx — form placeholders

URL routing lives in Next.js file-based routing under app/(public)/. Renaming /get-youtube-captions to /transcribe requires renaming the directory and updating all internal href references (Header, home page CTAs, About page CTAs).

Implementation details

1. Rename /get-youtube-captions → /transcribe — rename the directory; do a global search for get-youtube-captions and update all hrefs; verify no 404s on the old path (add a redirect in next.config.js if needed)
2. Replace placeholder URLs in both forms — replace dQw4w9WgXcQ placeholders with a real ragTech YouTube video ID or a neutral instructional placeholder like Paste a YouTube link or video ID
3. Normalise tool naming — pick one label ("Transcription" or "Captions") and apply it consistently across home page feature card, nav link text, page heading, and About page references
4. Reduce "zero AI" repetition — consolidate the claim to one location per page; trust the reader to have seen it; remove the defensive tone where it appears a second time
5. Revise the About page philosophy section — break the 4-card symmetrical grid; let the points breathe at unequal lengths that match their actual importance; consider prose instead of cards for at least two of the four points
6. Replace "Built by creators, for creators" badge — write a badge or sub-headline specific to ragTech (e.g. a concrete stat, a specific claim, or the podcast handle)
7. Replace "Built different. On purpose." tagline — rewrite to something specific to what Deckcreate actually does differently (the zero-AI extraction angle, the speed, the part-timer use case)
8. Resolve the "Pro" badge — either wire it to a waitlist form/modal, or remove it and reintroduce it when the tier is real
9. Warm up Carousel form help text — rewrite the timestamp format instruction to be action-oriented and less technical-manual in tone
10. QA pass — read every public page aloud; flag any sentence that sounds like it was written to fill a template section rather than to communicate something specific

Additional test scenarios

• A non-technical person reading the home page can describe what Deckcreate does without seeing the word "carousel" — i.e. the copy explains the outcome, not just the feature name
• The URL /get-youtube-captions redirects to /transcribe with a 301 (no broken links from existing shares)
• All nav links, home page CTAs, and About page CTAs point to the renamed route
• The "Pro" badge either has an interaction or is absent — it is never a static dead label

Hard constraints

• No changes to the tool's actual functionality — copy and structure only
• The ragTech podcast origin story on the About page must be preserved; it is the most trust-building element on the site
• All copy changes must be reviewed by at least one cohost before merging — this is brand voice, not just text

Dependency issues

• Independent of all refactor phases (0–9)
• Can be done on a standalone ux/public-copy-audit branch off main
• If chore(deps): migrate from npm to pnpm for supply-chain security #84 (pnpm migration) is in progress, this branch can be cut from main independently