K09 — Patterns

Flows, step by step.

Every pattern is a flow with annotated steps. Red outlines mark the conversion step; dashed plum marks where things can go wrong.

01

Conversion flows

Brief builder

D05 · data-step on each step
  1. 01 → Project type Card checkboxes, multi-select
  2. 02 → Goals Pick 1–2 outcomes
  3. 03 → Budget Ranges; minimum €4.5k shown upfront
  4. 04 → Timeline Launch window, real availability
  5. 05 → Links & uploads Optional, drag and drop
  6. 06 → Contact Name, email, consent unchecked
  7. 07 Confirmation Stamp, next steps, video hello

Validate per step, never at the end.

Honest “not a fit” route

D05 · budget below minimum
  1. 01 → Budget under minimum Detected at step 3
  2. 02 → Say it kindly “Probably not the right fit”
  3. 03 → Offer the shop Starter kit template, €149
  4. 04 → Offer smaller Review call, €390
  5. 05 → Refer Two named designers
  6. 06 Let them change “Change my budget” returns to step 3

Discovery-call booking

D05 · D04
  1. 01 → Pick day Visitor time zone
  2. 02 → Pick slot Taken slots struck through
  3. 03 → Confirm No account, no payment
  4. 04 → Invite Calendar file + video link
  5. 05 Reminder 24 h before, with prep list

Confirmation

U05 · after any inquiry
  1. 01 → Stamp + reference Brief No. 2026-041
  2. 02 → Reply time “Within 24 hours on weekdays”
  3. 03 → What to prepare Checklist, 4 items
  4. 04 → Video hello 40 s, captions on
  5. 05 Next best action Book the call now

Availability communication

D04 · header · footer
  1. 01 → Booked until “Booked until mid-November”
  2. 02 → Open slots “2 slots in December”
  3. 03 → Hold a slot Secondary CTA
  4. 04 → Waitlist If full, join for next opening
  5. 05 Update date Shown on the calendar

Never fake scarcity.

Price anchoring

D04 · D01 teaser
  1. 01 → From-price “Projects typically start at €9k”
  2. 02 → Packages Three, one featured
  3. 03 → Inclusions Checklist per package
  4. 04 → Exclusions Listed plainly
  5. 05 Day rate For agencies
02

Proof & commerce flows

Case-study storytelling

D03
  1. 01 → Context Who and why now
  2. 02 → Challenge The hard part
  3. 03 → Process Proof rounds, annotated
  4. 04 → Proof Before/after, detail, loupe
  5. 05 → Result Baseline, period, source
  6. 06 CTA “Want results like this?”

NDA work

D02 · U04
  1. 01 → NDA card Industry, role, year only
  2. 02 → Request access Short form
  3. 03 → Password sent Within a day
  4. 04 → Unlock Password page
  5. 05 Wrong password Clear message + request link

Proofing & approval rounds

D08
  1. 01 → Access Password or magic link
  2. 02 → Select Circle frames, limit 20 of 64
  3. 03 → Comment Per image
  4. 04 → Compare Two frames side by side
  5. 05 → Approve round Stamp, locks selection
  6. 06 Download Finals in chosen sizes

Print & digital shop

D09
  1. 01 → Browse Filter by type
  2. 02 → Product detail Loupe, variants, reviews
  3. 03 → License tier Personal / commercial
  4. 04 → Cart drawer VAT and shipping shown
  5. 05 → Download consent Unchecked, required for digital
  6. 06 Pay + deliver Instant download link

Image licensing request

D07
  1. 01 → Choose image From archive
  2. 02 → Usage Editorial, commercial, packaging
  3. 03 → Duration 1 issue, 1 year, perpetual
  4. 04 → Territory Country, EU, worldwide
  5. 05 → Exclusivity None, category, full
  6. 06 Quote Same day

Journal & newsletter

D11
  1. 01 → Read Article with reading time
  2. 02 → Related work Link to case
  3. 03 → Subscribe Email only
  4. 04 → Double opt-in Confirm link
  5. 05 Sample issue Before signing up

Link-in-bio

U02
  1. 01 → Arrive from social Mobile, one thumb
  2. 02 → Latest post Big image
  3. 03 → Start a project Only red link
  4. 04 Other paths Call, work, shop, newsletter
03

Relationship & system flows

Testimonial request

after handover
  1. 01 → Day 30 Email with 3 questions
  2. 02 → Draft offered I write, you edit
  3. 03 → Approval Name, role, company confirmed
  4. 04 Publish With “Verified client” stamp

Referral prompt

after testimonial
  1. 01 → Thank you Personal note
  2. 02 → Ask One person who should know
  3. 03 → Easy share Pre-written intro email
  4. 04 Credit Thank-you gift, no discounts

Agency & recruiter path

D06 · D04 · D12
  1. 01 → Land on About CV block visible
  2. 02 → Download CV 2-page PDF
  3. 03 → Check rates Day rate card
  4. 04 → Check availability Month picker
  5. 05 Book call 20 min

Language switch

header · EN/DE
  1. 01 → Toggle EN · de in header
  2. 02 → Swap copy +35% length tolerated
  3. 03 → Keep place Same scroll and state
  4. 04 → Remember Per session
  5. 05 hreflang Alternate URLs

Consent

U07 · newsletter
  1. 01 → Banner Only optional services
  2. 02 → Equal weight Accept all = Reject all
  3. 03 → Choose individually Nothing pre-checked
  4. 04 → Reopen “Privacy settings” in footer
  5. 05 Newsletter Double opt-in
04

States

Every page and component has these five. Copy tells people what happened and what to do next.

Empty No frames match these filters. Clear filters
Loading Loading 64 frames… Skeletons, no spinner
Error Couldn’t send your brief. Your answers are saved. Try again
Success Brief sent. Reply within 24 hours. Book the call
Offline You’re offline. We’ll send when you’re back. Keep editing
05

Focus management on page transitions

  1. 01After navigation, focus moves to the new page’s h1 (tabindex −1).
  2. 02The page title and an aria-live region announce the new page.
  3. 03Skip link “Skip to content” is the first tab stop on every page.
  4. 04Closing a modal or drawer returns focus to the button that opened it.
  5. 05Shared-element transitions never delay focus or input.
  6. 06Reduced motion: transitions become an instant cut.