Skip to main content

Product Design

Before shipping any page, run through these in order:

1. GOAL       → What's the one thing we want users to do?
2. HIERARCHY  → Can users see what matters in 3 seconds?
3. FRICTION   → What's stopping them from acting?
4. PROOF      → Why should they trust us?
5. SPEED      → Does it load fast enough to keep them?

You can't coach speed but you can engineer it.

Checklists​

Checklists for building interfaces that convert. Each checklist targets a specific decision point in the design process.

Decision PointUse This Checklist
Starting a new pageLanding Pages
Reviewing visual designVisual Hierarchy
Optimizing for speedPerformance
Improving conversionsConversion & CTAs
Building componentsComponent Design
Modal vs page decisionPage vs Modal
Design review sessionDesign Review
Data management UICRUD Patterns

Good checklists act as mantras to remind experts of the critical steps they might skip under pressure.

  1. Concise - 5-9 items per section, fits on one page
  2. Actionable - Each item enables a decision or action
  3. Tested - Refined through actual use
  4. Pause-pointed - Clear when to use them

Quick Reference​

Visual Hierarchy (Squint Test)

  • One element dominates attention
  • Clear size progression: H1 > H2 > H3 > body
  • Generous whitespace between sections
  • F or Z reading pattern respected
  • CTA color reserved for clickable actions only

Performance Standards

  • LCP under 2.5 seconds
  • Touch targets 44px minimum
  • Text readable without zoom (16px+)
  • No horizontal scroll on mobile
  • Contrast ratio 4.5:1 or higher

Conversion Essentials

  • One primary CTA above the fold
  • CTA uses action verb + benefit
  • Value proposition visible in 3 seconds
  • Social proof near decision points
  • Minimal form fields