Interface redesign
Most interfaces do not need rebuilding. They need a dozen specific things fixed, in the right order.
Audit first
Go through the real product, on a real device, doing a real task. Record what you find in these
categories — the order is the priority order:
- Structural — unclear primary action, competing focal points, navigation that does not match
the mental model. These are the only ones worth a rebuild.
- Systemic — inconsistent spacing, more type sizes than a scale would allow, palette drift,
components that exist in variants. High impact, mechanical to fix.
- Craft — weak hierarchy, poor contrast, unfinished states, cramped density.
- Cosmetic — dated shadows, default border radii, stock illustration.
The generic-AI-product tells
These are the specific things that make a product read as unconsidered. They are worth naming
because they are all cheap to fix:
- Default framework styling left in place — the untouched button, the starter-template card.
- One accent color used for every emphasis, so nothing is emphasized.
- Uniform spacing everywhere, so nothing groups.
- Centered everything, including body copy.
- Emoji standing in for iconography.
- Gradients on surfaces that carry no meaning.
- Empty and error states that were never designed.
Sequencing
Fix in this order, because each makes the next easier to see:
- Tokens — spacing scale, type scale, palette. This alone resolves most systemic findings.
- Hierarchy on the two or three highest-traffic screens.
- States: empty, loading, error, overflow.
- Component consolidation.
- Cosmetic pass.
Restyle or rebuild
Rebuild only when the structure is wrong — when the information architecture does not match how
people work. Everything else is a restyle, and a restyle that ships beats a rebuild that stalls.
Return contract
Findings by category with severity, the sequenced plan, what you would do first if only one day were
available, and what you deliberately are not touching.
1---2name: interface-redesign3description: Upgrades an existing interface to a higher standard without rebuilding it — auditing what is there, identifying what reads as generic or unfinished, and sequencing changes by impact. Use this when a product works but looks dated or default, when a redesign is being considered, when deciding whether to restyle or rebuild, or when a screen needs to look substantially better with limited effort.4---5
6# Interface redesign
7
8Most interfaces do not need rebuilding. They need a dozen specific things fixed, in the right order.
9
10## Audit first
11
12Go through the real product, on a real device, doing a real task. Record what you find in these
13categories — the order is the priority order:
14
151. **Structural** — unclear primary action, competing focal points, navigation that does not match
16 the mental model. These are the only ones worth a rebuild.
172. **Systemic** — inconsistent spacing, more type sizes than a scale would allow, palette drift,
18 components that exist in variants. High impact, mechanical to fix.
193. **Craft** — weak hierarchy, poor contrast, unfinished states, cramped density.
204. **Cosmetic** — dated shadows, default border radii, stock illustration.
21
22## The generic-AI-product tells
23
24These are the specific things that make a product read as unconsidered. They are worth naming
25because they are all cheap to fix:
26
27- Default framework styling left in place — the untouched button, the starter-template card.
28- One accent color used for every emphasis, so nothing is emphasized.
29- Uniform spacing everywhere, so nothing groups.
30- Centered everything, including body copy.
31- Emoji standing in for iconography.
32- Gradients on surfaces that carry no meaning.
33- Empty and error states that were never designed.
34
35## Sequencing
36
37Fix in this order, because each makes the next easier to see:
38
391. Tokens — spacing scale, type scale, palette. This alone resolves most systemic findings.
402. Hierarchy on the two or three highest-traffic screens.
413. States: empty, loading, error, overflow.
424. Component consolidation.
435. Cosmetic pass.
44
45## Restyle or rebuild
46
47Rebuild only when the structure is wrong — when the information architecture does not match how
48people work. Everything else is a restyle, and a restyle that ships beats a rebuild that stalls.
49
50## Return contract
51
52Findings by category with severity, the sequenced plan, what you would do first if only one day were
53available, and what you deliberately are not touching.
majiayu000