← All sessionsHomeSearch
LWP Design Module 1·Chapter 5: Designing 1 website together with Figma·2:56:01

Chapter 5a: The Client Build — Discovery to Direction with Lucy's Bakery

Reno Instructor — Living With Pixels. Runs the Chapter 3 workflow live against a fictional but painstakingly realistic client: Lucy of a Portland artisan bakery (as-heard 'Crumb & Co'), who 'doesn't really know what she needs, but she knows her business well.'

Session map

THE POSTURETHE READINGTHE BUILDTaking controlthe first reply, the call script, and t…Wants vs needsreading Lucy between the linesAI as last-mile validatorChatGPT cross-checks, Relume over-gener…The one-pager biasscroll beats click, pop-ups beat pagesScreenshot-driven directiontwo opposites on the call, moodboards a…
The postureThe readingThe build
click a node — its card pops up (drag it anywhere, × to close)
Concept

The map reads left to right — the posture flow into the reading, then into the build. Click any node to open that idea here; every timestamp jumps into the recording.

The short version

  1. The chapter thesis, sharpened by AI: 'all of the steps before [Figma] are as much design as the final step' — and because AI already executes visuals well, 'people who only have visual design skills will not have enough skills to survive the next 10 years.' The non-visual phases ARE the moat.
  2. DISCOVERY, performed: don't answer the excited inbound email — 'you have to be a little bit leaning backwards' — redirect to the Fillout questionnaire ('make it about them'), then the call where you TAKE CONTROL: explain the four phases and the cost of backtracking up front. The call's killer technique: two deliberately opposite Dribbble screenshots shown live — 'I'm not touching Figma... they already give me some direction before I even touch Figma.'
  3. Reading Lucy: wants ≠ needs throughout — she admires a competitor that shows prices, but SHE doesn't sell online; no contact form ('conversations in the store is where it's at'); the 'newsletter' is really weekly-bread notifications; full capacity means local-only SEO. 'This is often the case that the client wants are different than the client needs.'
  4. SITEMAP by the four-source order: real Google-searched Portland competitors ('so much opportunity to redesign companies websites. It is incredible') → re-read every answer (decide the ONE-PAGER: 'scrolling is easier for the brain than clicking because clicking requires a decision') → Dribbble for structural ideas → AI LAST as cross-check: ChatGPT confirms the 1-pager and contributes FAQ + allergy tags; Relume 'has the tendency to create too many pages' and its wireframe button stays unclicked for client shares.
  5. The Figma craft, on the FREE tier (the course was redesigned around Figma's pricing change): Auto Layout sitemap boxes, ChatGPT drafting section copy ('Don't act like a copywriter. This is a sitemap'), and the versioning law — 'always, always make a duplicate. Don't ever go into the same artboard and keep changing it.'
  6. VISUAL DIRECTION: two contrasting moodboards from Dribbble/Behance screenshots, wired into a clickable Figma PROTOTYPE (share the prototype link, never the raw file), QA'd in incognito. Lucy picks 'leaning more towards version 2' — 'we don't really need an ultimate agreement. An email like this is good enough.'

The concepts

01

Taking control: the first reply, the call script, and the gates announced up front

'This is the moment where most designers get excited... you wanna jump straight in, but you have to be a little bit leaning backwards.'

The intake choreography: the inbound email gets NO requirements answered — the reply thanks, redirects to the questionnaire ('this is about them. Make it about them — by linking to the client questionnaire you are basically saying, hey, I am a professional'), and pre-books the call. The call-request email quotes the client's own stated goal back verbatim so it reads personal, not templated. On the call itself: 'you need to take control from the beginning because what many people do, they take on this employee role — like, oh, client, just tell me more.' Control means announcing the four phases, the agreement after each, and that backtracking costs money — 'trust me, it's a trap. I have fallen into it many times.'

The recap email closes discovery as a documentation move: restate everything agreed ('to make sure we don't lose any important information, I've written it down'), ask for confirmation, request brand assets, name the next phase. And a human touch that prevents a real misread: tell the client you're taking notes during the call — 'sometimes clients think you're on WhatsApp.'

Worked example · from the session

The Fillout stack doing triple duty: questionnaire (name/email → content → functionality → design → budget pages), scheduling into Google Calendar/Meet, all free tier.

Why it matters

The gates from Chapter 3 only bind if the client heard them BEFORE the work — this is the retrofit problem, solved by never needing the retrofit.

People get this wrong

Answering an excited client's questions quickly shows responsiveness.

It shows availability, not professionalism — and it starts the project before discovery, which is exactly the amateur sequence the course exists to break.

The client build: discovery to direction Inbound email redirect, answer nothing Questionnaire + call wants vs needs; 2 opposite screens hots Sitemap competitors -> input -> AI -> insp iration Moodboards prototype link, option 1 vs 2 every arrow is an email the client confirms - 'an email like this is good enough to move forward' Zero Figma design time before direction agreement - screenshots and conversation do the narrowing
Discovery to direction: every arrow is an email the client confirms
All of the steps before that are as much design as the final step.
This is about them. Make it about them.
Always, always make a duplicate. Don't ever go into the same artboard and keep changing it.
For your projects

["Combine with Catalyst session 1's offer doctrine for the business half the course omits."]

Go deeper

In one line: Client control = a first reply that redirects rather than answers, a call request quoting the client's own goal, a call opened with the four-phase/agreement/backtracking-costs speech, transparent note-taking, and a written recap the client must confirm — the professional posture installed at minute one.

'Make it about them' — the questionnaire redirect as professionalism signal (l2453922 0:02:00)

The employee-role trap named: waiting to be told is the amateur tell (l2453929 0:02:02)

Phases + costs announced on the first call — the gate system installed early (l2453929 0:04:04)

Recap email = agreement round 1 + asset request + next-phase announcement (l2453934 0:14:13)

Try it now

Rewrite your standard first-reply email to contain zero requirements answers and one questionnaire link framed around the client's benefit.

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Why quote the client's stated goal verbatim in the call-request email?

It proves the questionnaire was read by a human and makes the email unmistakably personal — the difference between 'let's hop on a call' spam and a professional who already understands the project.

02

Wants vs needs: reading Lucy between the lines

Lucy admires a competitor site that shows bread prices. The competitor sells online. Lucy doesn't. Copying what she ADMIRES would break what she NEEDS.

The discovery lessons are one extended demonstration of inference over transcription. Lucy's answers, decoded: 'answer recurring bread questions + reflect who we are' = content goal, not conversion goal. 'Neighborhood regulars and new-to-town people' = LOCAL SEO only. 'Not sure how many pages' = his rule of thumb: 'when clients say this, it's a good idea to offer a 1 page design.' 'Update viewers' = a newsletter that is really weekly-bread notifications — 'think outside of the box when you're dealing with real clients.' No contact form, deliberately: 'conversations in the store is where it's at' — a form is 'extra management' she doesn't want. Already at full capacity = the site must NOT be growth-optimized: the overbooked dentist from Chapter 2, in the wild.

The call surfaces what forms can't: customer questions (ingredients, allergies, fermentation) become an allergy-tag system on the bread list, not an FAQ graveyard; 'what makes people come back' (craftsmanship, non-factory feel) becomes a photography requirement — real humans, prominent placement.

Worked example · from the session

The supermarket question — 'what makes someone come back for your bread instead of going to supermarkets?' — is the single question that generated the About/Vision section, the photography brief, and the homepage priority order.

Why it matters

This is the course's central skill demonstrated at full resolution: the deliverable is downstream of the interpretation, not the transcript.

People get this wrong

A thorough questionnaire captures the requirements.

It captures the STATEMENTS. Requirements emerge from interpretation plus call follow-ups — which is why the course pairs the form with a led conversation and why pure-form discovery produces generic sites.

This is often the case that the client wants are different than the client needs.
Never tell them that they're wrong... could you please reconsider this?
For your projects

["For OI-089: the generator needs an interpretation layer between intake answers and structure — Lucy's 'newsletter' would break a literal-minded generator."]

Go deeper

In one line: Client interpretation = decoding stated answers into design implications (goal type, SEO scope, page count, feature translation), letting the WHY reshape every literal yes — with the standing check that admired references may serve a different business than the client's.

The competitor-pricing trap: admiration ≠ applicability (l2453926 0:00:00)

'Client wants are different than the client needs' — the phase's law (l2453926 0:10:09)

Feature translation: 'newsletter' → weekly bread notifications (l2453934)

Full capacity → anti-growth design — Chapter 2's dentist logic applied (l2453934)

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Lucy says yes to showing opening hours. What does the WHY add?

The why (new-to-town discoverability) sets placement and prominence — a yes without the why gets a footer line; the why earns it a real section with the map.

03

AI as last-mile validator: ChatGPT cross-checks, Relume over-generates

'I don't want you guys to be lazy and use AI. Because if you use AI from the beginning, you might skip these other steps.'

AI enters fourth, after competitors, client re-reading, and inspiration — as a CROSS-CHECK with context, never a cold start. The ChatGPT prompt is role-primed and constrained ('act like a web design professional... don't propose a multi page website if a 1 pager is enough'), fed the full questionnaire and call notes, and asked for both sections AND a business summary for the next tool. Its output validates the 1-pager and earns its keep with two genuinely new adoptions: an FAQ section and allergy-safe tags.

Relume gets the summary — and the critique: 'ReLoom has the tendency to create too many pages for simple websites... it clearly said 1 pager and then it still generated 4 pages or even 5,' e-commerce sections included despite explicit no-webshop instructions. Editing is drag/delete; the discipline is the unclicked button: never generate wireframes for the client-facing share, 'because your client is probably gonna start commenting there' — on blocky placeholder content instead of the structural question actually being asked. Second AI role later: drafting the sitemap's section copy in bulk, then re-prompted when it performs — 'don't act like a copywriter. This is a sitemap.'

Worked example · from the session

The model-humility aside kept on the record: 'there's a chance you're watching this in the future... maybe you already have ChatGPT 5' — tool guidance time-stamped by its own author.

Why it matters

It's the Chapter 3 research-order principle stress-tested on a real project — and AI passes as validator, fails as originator, exactly as predicted.

People get this wrong

AI in the workflow means starting with AI.

Position determines value: the same model that would have produced a lazy generic sitemap in slot one produced two adopted improvements in slot four — sequencing IS the skill.

The people who only have visual design skills will not have enough skills to survive the next 10 years.
I don't want you guys to be lazy and use AI. Because if you use AI from the beginning, you might skip these other steps.
For your projects

["OI-089's structure generator should copy this exactly: intake + interpretation feed a constrained prompt; output is pruned, never auto-accepted."]

Go deeper

In one line: AI-in-discovery = fourth-slot cross-check: role-primed, constraint-carrying ChatGPT over full human-gathered context, output adopted selectively (FAQ, tags); Relume for structure generation with over-generation pruned; wireframe generation withheld from client shares; copy drafting re-prompted away from marketing voice.

Fourth slot, on purpose — laziness is the failure mode being designed against (l2453940 0:00:00)

Constraint in the prompt ('don't force multi-page') and STILL over-generation from Relume (l2453940 0:08:06)

Two real AI contributions adopted: FAQ section, allergy tags (l2453940)

The unclicked wireframe button: protect the client's attention from placeholder noise (l2453940 0:12:10)

'Don't act like a copywriter. This is a sitemap.' — the re-prompt as editorial control (l2453951 0:10:08)

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Why does the ChatGPT output deserve adoption while Relume's needs pruning?

ChatGPT consumed the full context and returned suggestions AGAINST it; Relume consumed a summary and returned its own defaults. Context depth in, judgment quality out — the tools differ in what they were given, not just what they are.

04

The one-pager bias: scroll beats click, pop-ups beat pages

'Scrolling is easier for the brain than clicking because clicking requires a decision.'

The default, stated as a heuristic: modest content volume plus client page-count uncertainty = offer a single-scroll page. Depth without navigation comes from POP-UPS (extended bread info) so the structure stays flat; CMS editability questions (the client updating specials) are flagged as development concerns, not Figma concerns. Section ORDER carries psychology: About/Vision before product — 'you first want to know why something is good before you become interested in reading' — the settled sequence: hero (photo slider) → About/Vision → bread list → seasonal highlight + newsletter pairing → hours/location → contact-by-store → Instagram near footer. The uncertain item (a press section, seen on competitors) is neither included nor dropped: 'we're just gonna include it and see what the client says' becomes a client QUESTION — deferral as a first-class move.

Honesty note carried from the brief: the scroll-vs-click cognition claim arrives without citation — settled-sounding UX wisdom, flagged here as assertion rather than evidence.

Worked example · from the session

The client-facing sitemap email leads with exactly this: 1-pager to reduce clicks, pop-up for depth, About early 'to remind the visitor why they're not shopping at the supermarket.'

Why it matters

It converts the wants/needs analysis into an architecture with one governing bias — and gives the email its rationale paragraph for free.

People get this wrong

More pages signal a more serious website.

Pages are navigation cost; Lucy's users want answers, not journeys. The serious signal is the RIGHT amount of structure — which here is one page and three pop-ups.

Scrolling is easier for the brain than clicking because clicking requires a decision.
For your projects

['OI-089 default output: one-pager with pop-up slots, exactly this section order as the template.']

Go deeper

In one line: One-pager bias = default to single-scroll for modest-content clients (especially page-count-uncertain ones), with pop-ups for depth, psychology-ordered sections (identity before offer), development concerns deferred to development, and uncertain sections converted into client questions.

The trigger: 'when clients say [not sure how many pages], it's a good idea to offer a 1 page design' (l2453926)

Pop-ups as the depth valve that preserves flat navigation (l2453938)

About-before-product as persuasion order (l2453938 0:06:04)

Scroll>click presented without citation — heuristic, not finding (l2453938 0:02:02)

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

When does the bias break?

Content volume: the moment sections need their own sub-structure (archives, many products, SEO-targeted pages), the one-pager's flatness becomes the constraint — Lucy qualifies precisely because her content is genuinely small.

05

Screenshot-driven direction: two opposites on the call, moodboards after, prototype always

'I'm not touching Figma. I'm literally just taking screenshots and showing that to them in a call... This is efficient, guys.'

Direction narrows in two passes of increasing resolution. COARSE, on the discovery call: two deliberately OPPOSITE Dribbble bakery screenshots (classic/minimal vs fun/bold) — Lucy picks playful/modern/human, and the entire style space halves before any design tool opens. FINE, in visual direction: two moodboards ('Option 1'/'Option 2') built from Dribbble AND Behance screenshots (Behance surfacing fuller brand cases), trimmed to 2-3 examples each — a third 'Leftovers' frame parks the excess, hidden from the client.

Delivery craft: the frames wire into a Figma PROTOTYPE (connectors, instant/fade), element offsets normalized so nothing jumps between screens, QA'd in an incognito tab — and the client receives the PROTOTYPE link, never the raw file. The email states a mild preference while leaving the door open, ties the recommendation to Lucy's own brand words, and offers the none-of-these exit. Her reply — 'leaning more towards version 2... just make sure to not make it too playful' — closes the gate: 'we don't really need an ultimate agreement. An email like this is good enough.' A cautionary Behance case rides along: a gorgeous logo with a weak site — 'branding designers are not web designers and web designers are not brand designers.'

Worked example · from the session

Figma housekeeping worth the aside: PAGES are organizational tabs, not website pages ('let me be very clear. This is very confusing') — sitemap on one page, direction on another.

Why it matters

Style opinion is the most expensive thing to discover late; two screenshots on a call discover it for free at minute thirty of the relationship.

People get this wrong

Moodboards are decoration-phase busywork.

They are the cheapest agreement artifact in the whole workflow — screenshots and a prototype link buying style alignment before a single designed pixel exists.

I'm not touching Figma. I'm literally just taking screenshots and showing that to them in a call. This is efficient guys.
We don't really need an ultimate agreement. An email like this is good enough to move forward.
For your projects

['Website Stylekit enters exactly between these passes in your toolkit: coarse direction chosen, Stylekit generates the palette candidates the moodboard implies.']

Go deeper

In one line: Direction-setting = two-pass screenshot narrowing (opposite pair live on the call → curated moodboard options in Figma), delivered as a prototype link with offsets normalized and incognito-QA'd, closed by a lightweight email agreement — total Figma design time before direction agreement: zero.

The two-opposite trick halves the style space pre-Figma (l2453934 0:08:06)

Behance beside Dribbble for fuller brand cases; Leftovers frame for the cuts (l2466841)

Prototype link, not file share — and the incognito QA habit (l2466841 0:20:15)

'An email like this is good enough to move forward' — gates are proportionate (l2466853 0:02:03)

Branding ≠ web design — the cautionary Behance case (l2466841 0:12:11)

Try it now

Prepare a standing pair of opposite references for your niche today — the two-screenshot question costs nothing and halves every future direction phase.

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Why must the call's two references be MORE different than the eventual moodboards?

Coarse pass, coarse signal: extremes locate which half of the space the client lives in; the moodboards then explore WITHIN that half — 'we're gonna make the differences a little bit less.' Equal-resolution passes would waste the call.

Every concept, three clicks deep

The same concepts as a quick reference: the closed row is the glance, open is the study card, and every timestamp jumps into the recording.

01Taking control: the first reply, the call script, and the gates announced up frontClient control = a first reply that redirects rather than answers, a call request quoting the client's own…

Client control = a first reply that redirects rather than answers, a call request quoting the client's own goal, a call opened with the four-phase/agreement/backtracking-costs speech, transparent note-taking, and a written recap the client must confirm — the professional posture installed at minute one.

'Make it about them' — the questionnaire redirect as professionalism signal (l2453922 0:02:00)

The employee-role trap named: waiting to be told is the amateur tell (l2453929 0:02:02)

Phases + costs announced on the first call — the gate system installed early (l2453929 0:04:04)

Recap email = agreement round 1 + asset request + next-phase announcement (l2453934 0:14:13)

02Wants vs needs: reading Lucy between the linesClient interpretation = decoding stated answers into design implications (goal type, SEO scope, page count,…

Client interpretation = decoding stated answers into design implications (goal type, SEO scope, page count, feature translation), letting the WHY reshape every literal yes — with the standing check that admired references may serve a different business than the client's.

The competitor-pricing trap: admiration ≠ applicability (l2453926 0:00:00)

'Client wants are different than the client needs' — the phase's law (l2453926 0:10:09)

Feature translation: 'newsletter' → weekly bread notifications (l2453934)

Full capacity → anti-growth design — Chapter 2's dentist logic applied (l2453934)

03AI as last-mile validator: ChatGPT cross-checks, Relume over-generatesAI-in-discovery = fourth-slot cross-check: role-primed, constraint-carrying ChatGPT over full human-gathere…

AI-in-discovery = fourth-slot cross-check: role-primed, constraint-carrying ChatGPT over full human-gathered context, output adopted selectively (FAQ, tags); Relume for structure generation with over-generation pruned; wireframe generation withheld from client shares; copy drafting re-prompted away from marketing voice.

Fourth slot, on purpose — laziness is the failure mode being designed against (l2453940 0:00:00)

Constraint in the prompt ('don't force multi-page') and STILL over-generation from Relume (l2453940 0:08:06)

Two real AI contributions adopted: FAQ section, allergy tags (l2453940)

The unclicked wireframe button: protect the client's attention from placeholder noise (l2453940 0:12:10)

'Don't act like a copywriter. This is a sitemap.' — the re-prompt as editorial control (l2453951 0:10:08)

04The one-pager bias: scroll beats click, pop-ups beat pagesOne-pager bias = default to single-scroll for modest-content clients (especially page-count-uncertain ones)…

One-pager bias = default to single-scroll for modest-content clients (especially page-count-uncertain ones), with pop-ups for depth, psychology-ordered sections (identity before offer), development concerns deferred to development, and uncertain sections converted into client questions.

The trigger: 'when clients say [not sure how many pages], it's a good idea to offer a 1 page design' (l2453926)

Pop-ups as the depth valve that preserves flat navigation (l2453938)

About-before-product as persuasion order (l2453938 0:06:04)

Scroll>click presented without citation — heuristic, not finding (l2453938 0:02:02)

05Screenshot-driven direction: two opposites on the call, moodboards after, prototype alwaysDirection-setting = two-pass screenshot narrowing (opposite pair live on the call → curated moodboard optio…

Direction-setting = two-pass screenshot narrowing (opposite pair live on the call → curated moodboard options in Figma), delivered as a prototype link with offsets normalized and incognito-QA'd, closed by a lightweight email agreement — total Figma design time before direction agreement: zero.

The two-opposite trick halves the style space pre-Figma (l2453934 0:08:06)

Behance beside Dribbble for fuller brand cases; Leftovers frame for the cuts (l2466841)

Prototype link, not file share — and the incognito QA habit (l2466841 0:20:15)

'An email like this is good enough to move forward' — gates are proportionate (l2466853 0:02:03)

Branding ≠ web design — the cautionary Behance case (l2466841 0:12:11)

Tools referenced

ToolCoverageMomentContext
FigmademonstratedFree-tier build: Auto Layout sitemap boxes, Pages, duplication discipline, Prototype connectors, offset normalization
FilloutdemonstratedQuestionnaire + scheduling + embed, all free tier - the discovery infrastructure
ChatGPTdemonstratedRole-primed sitemap cross-check; section-copy drafting with the anti-copywriter re-prompt
RelumedemonstratedSitemap auto-generation from the ChatGPT summary; over-generation pruned; wireframe button deliberately unclicked
DribbbledemonstratedThe two-opposite call screenshots, structural ideas, and moodboard sourcing
BehanceexplainedFuller brand cases than Dribbble; also the branding-is-not-web-design cautionary example
WhatsAppmentionedThe client's real contact channel - the reason the site has no form

Session materials

Archived locally on V: — click to open. Companion pages link to the LMS.

Action items

Resources mentioned

Resources
  • docExercise Project & Email Templates (Google Doc)
  • docThe sitemap ChatGPT prompt
  • docThe two-screenshot call technique

Extraction notes

This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

Transcript corrections applied

The transcript saysThe trainer actually means
Krumpe and Co / Crump and Cothe fictional bakery - likely 'Crumb & Co.' (unconfirmed; check the exercise doc)
Cheggppt / Checkgpt / ChargeGpt / Jetgpt / ChachipeteChatGPT (one as-heard cluster)
ReLoom / Reeloom / ReloomsRelume (relume.io)
fill out (the platform)Fillout (fillout.com)
DribbleDribbble
I have felt into it many timesI have fallen into it many times
4o or 5o (models)as-heard ChatGPT variant names at recording - time-bound

True on recording day — verify before relying