Chapter 3: The Workflow — Four Steps, Four Agreement Rounds, No Going Back

The definition is exact: 'structured checkpoints where the client approves work, ensuring alignment before moving forward.' The mechanics: 2 feedback rounds per phase (his default, adjustable), 4 phases, extra rounds priced as add-ons — 'if you don't put limitations towards clients or towards yourself, you will become the victim.' Sign-off is captured in writing, email specifically: retrievable, undeletable proof.

Why it works is psychology, not paperwork: consistency bias ('most people want to stick to what they said to sound confident'), fear reduction (structure calms the client fear that drives feedback), gamified progress (each approved phase 'levels up' the project), and protection (the documented trail). The second scar story shows why conversation isn't enough: three meetings agreeing on a font, and the client changed it silently a week after launch — agreement without documentation is a mood, not a gate. One setup rule: communicate the system UP FRONT; retrofitting mid-project is possible but demands explicit re-contracting.

Discovery exists so the site isn't generic — the three-dentist stakes from Chapter 2, operationalized. The method is form PLUS call: the questionnaire (Fillout, or Google Forms free; questions ordered content → functionality → design, visuals deliberately LAST because clients conflate design with decoration) collects the surface; the call extracts the truth — 'this isn't a call where they give you a to-do list. Take the lead... keep asking why until you understand it.'

The fee does triple duty: it filters browsers from buyers, it makes the client take the call seriously, and it primes commitment — 'clients who invest even a small amount are more likely to commit and continue working with you.' And he's explicit about the frame: the person on this call is NOT yet a client; 'that's where I do the selling part.' Deliverable: a written summary of everything agreed, exported to PDF — agreement round 1 closes on it.

The sitemap here is pages-plus-sections (not the SEO artifact), and the insight is SEQUENCE: (1) COMPETITORS — client-supplied links plus your own quick search; 'note ideas, don't copy sections exhaustively.' (2) CLIENT INPUT — the two questionnaire questions about essential content and pages. (3) AI — his custom ChatGPT prompt digests the questionnaire, its output feeds Relume's free sitemap generator ('your design ally, not a replacement' — Relume's tagline, endorsed). (4) INSPIRATION — category sites (Landingfolio as-heard, Figma Community templates) for section IDEAS only. Order matters because AI-first breeds lazy acceptance and inspiration-first dissolves into visual browsing. Full-AI site builders (10Web, ZipWP as-heard) are tested and rejected: 'too many decisions based on assumptions.'

Then TRIM: delete unnecessary sections — scope discipline; sections can always be added later. Presentation is a short recorded video (Loom free tier: 5 minutes; QuickTime; Windows recorder) that DISCLOSES the research done — then email agreement, round 2.

One Figma page defines colors, fonts, buttons, and feel BEFORE any section exists — the anti-rework phase. His template runs on Figma LOCAL VARIABLES: palette options duplicated per artboard ('option 1', 'option 2'), light/dark/accent color MODES, and swappable typography pairs (Poppins-for-titles + Roboto-for-body in the demo) — so a direction change is a variable edit, not a page-by-page repaint.

Two boundaries define professionalism here. SCOPE: 'we are not creating a brand identity here. We are extending the brand identity they already have' — a client with no brand at all is buying a DIFFERENT project ('don't let clients fool you'), priced separately or subcontracted. RESTRAINT: against the giant multi-page design systems some designers build — 'too much systemization can block creativity... there is still some chaos, and you should sustain some of that chaos.' Inputs: the existing site/brand, the questionnaire's styling answer, and Chapter 4's fundamentals. Presentation: recording if extending, LIVE call if establishing (new palettes are opinion-sensitive); always 2+ options with reasoning; agreement round 3.

The reversal, argued honestly: gray wireframes mislead website clients — they can't mentally colorize gray boxes, then feel disappointed when the real design differs; and designers can't keep them rough ('keep it simple and ugly. And ugly is a keyword — if you overly design it, then it's better to just make the visual design straight away'). Wireframing's true home is product/app flow-testing; 'websites are not products' — their navigation is standardized, flows barely need testing.

His replacement: the COLORED WIREFRAME — build layout directly with the visual-direction styles already applied, collapsing two stages into one. The sub-process: INSPIRATION (Relume's wireframe generator and Webflow library, SproutUI's free Figma kit, Section.express as-heard for Elementor templates, Landingfolio as-heard and LandBook at higher difficulty, Dribbble hardest — screenshots pasted beside artboards) → LAYOUT (styled from minute one) → DETAILS last (icons, images, shadows, blurs). Desktop ONLY — responsive decisions belong to development. The final presentation is theater with rules: in person if possible, framed as work-in-progress, the STORY retold from sitemap through direction, no same-meeting sign-off ('give 1-2 days'), feedback logged for v2 — 'you can grow an emotional connection to your design, but feedback is nothing personal.' Agreement round 4 ends design; development begins.