Design Case Studies

Design Case Studies

Five-Layer Analysis Framework

Apply in order. Each layer feeds the next.

1. Visceral (3-second reaction) — name the emotion in one word before analyzing anything.
2. Aesthetic — fonts/sizes/hierarchy; palette structure and semantic color use; spacing rhythm; motion duration/trigger.
3. Usability — walk the primary flow, mark friction; check Nielsen heuristics; enumerate states (default/hover/focus/loading/empty/error); stress-test edge cases (long text, no data, slow net).
4. System — visible token system (spacing, type scale, palette); component DNA; could you add a new screen without inventing patterns?
5. Philosophy — map decisions to Gestalt, Rams, Norman's three levels, platform conventions (Material/HIG/custom).

Analysis Template

**Product:** [Name]
**Category:** [SaaS / E-commerce / Content / Mobile / Design System]
**Visceral:** [one word + one sentence]

**Why it works**
| Principle | Concrete application |
|-----------|----------------------|
| ... | ... |

**Key takeaway:** [one sentence]
**Study this closely:** [specific screen, flow, or interaction]

Worked Example — Linear

**Product:** Linear
**Category:** SaaS / Project Management
**Visceral:** Fast. The keyboard-driven feel registers before any visual detail does.

**Why it works**
| Principle | Concrete application |
|-----------|----------------------|
| Rams: As little design as possible | Single-column issue view; no decorative chrome; commands surfaced via Cmd+K, not nav menus |
| Norman: Behavioral level | Every action has a keyboard shortcut shown next to its label; muscle memory compounds with use |
| Nielsen: Recognition over recall | Cmd+K palette shows recent commands + fuzzy search; users never memorize paths |
| Fitts's Law | Frequently used controls (status, assignee, priority) live in a fixed sidebar — large targets, predictable position |
| Hick's Law | Issue creation form shows only title field by default; metadata expands progressively, not all at once |

**Key takeaway:** Speed is a design feature, not a performance one — it's produced by removing decisions, not by removing milliseconds.
**Study this closely:** The Cmd+K palette transitions and the inline issue-creation flow (press C anywhere).

Categories at a Glance

Next Steps

• Design Philosophies: theoretical foundations
• Visual Design: apply aesthetic lessons
• Component Library: build components from observed patterns
• Design System Creation: your own system using Polaris/Carbon/Radix lessons