Website Design Research

Target: $ARGUMENTS

Analyzes industry websites for design patterns through first-principles thinking. Focus on layout, typography, color, and content presentation. Pair with auditing-website-accessibility and auditing-website-usability for implementation.

Core Question

"How would users naturally expect this information organized if they had never seen a website?"

Workflow

•Find websites - Search "[industry] companies/platforms", target 6-8 sites
•Extract design elements - Colors (hex), typography, layout hierarchy, CTAs
•Track sources - URL, authority level (H/M/L), cited research, cross-references
•Identify anomalies - Who breaks conventions with better UX results?
•Synthesize findings - Breakthroughs, patterns, contrarian insights, quick wins

Output Format

Source Index

text

1. [Company] - [URL] - Authority: [H/M/L]
   Cites: [Studies/sources referenced]
   Cross-refs: [Shared sources with other sites]

Design Breakthroughs (Max 3)

text

BREAKTHROUGH #N (Impact: N/100)
Pattern: [Specific design element]
Principle: [Why it works for users]
Opportunity: [How to apply]
Sources: [URLs and cited research]

Visual and Content Patterns

text

COLORS: Primary #HEX [effect], Accent #HEX [effect]
TYPOGRAPHY: Headers [font/weight], Body [font/size]
HEADLINES: "[Pattern]" - [User psychology]
CTAS: "[Button text]" - [Action driver]

Contrarian Insights

text

Everyone: [Common practice]
Reality: [What creates better UX]
Evidence: [Sources]

Quick Wins

text

ELIMINATE: [Element hurting UX]
SIMPLIFY: [Over-complex pattern]
ADOPT: [Underused effective pattern]

Rules

•Focus exclusively on visual design, layout, typography, and content
•Question every design assumption with first-principles thinking
•Extract exact values: hex codes, font names, button text
•Track cross-references between sites to identify authoritative sources
•Keep insights concise and actionable for design implementation