NEXT PROJECT — CIVIC ECOSYSTEM
AA DESIGN SYSTEM AUDIT
DESIGN SYSTEMS
An evidence-led audit of AA New Zealand’s live product, treating computed styles and interaction behaviour as a source of truth.
ROLE — Product Design, Systems Audit
DELIVERABLES — 7 documentation pages
FOCUS — Evidence, clarity, honest documentation
THE AUDIT_
01
A single screenshot suggested the mobile sub-links were Link Blue.
02
The screen recording showed they were black — and that three nested groups toggled independently.
03
Neither fact was visible until I watched the product behave.
The correction became part of the documentation, not something to erase.
THE QUESTION
How do you document a system honestly when the product keeps correcting your assumptions?
First pass
“This is probably consistent with the rest of the system.”
Observed behaviour
black sub-links
three independent toggles
live interaction states
recording over convention
The behaviour is visible. The underlying experience isn’t.
DOCUMENTATION METHOD
Proposed
An interpretation that still needs to be tested.
↓
Confirmed
Observed in the live product or a recording.
↓
The trail
Keep earlier reasoning
show what changed
tag each value
make certainty earned
What the audit made visible
Pattern 01
A single state is not a component’s whole story.
Documentation needs the behaviour, not just the appearance.
Pattern 02
The live product is a research participant.
Its computed styles and interactions can disagree with our assumptions.
Pattern 03
Accuracy improves when proposed values are visibly provisional.
Pattern 04
Correction is not failure. It is evidence of attention.
INTERPRETATION GAP
A designer expects
“The pattern will follow convention.”
The product shows
“Watch me before you describe me.”
The documentation records
“Here is what is confirmed, and what is still proposed.”
Listening begins when the evidence is allowed to revise the first interpretation.
MY DESIGN PHILOSOPHY
A designer is a listener before a problem-solver.
Predict. Clarify. Check the interpretation against what is actually there.
The audit made that discipline concrete. Instead of relying on familiar patterns, I checked the live interface — its computed styles, its states, and the behaviour revealed only when the product was in motion.
Seven pages, built from evidence
Foundation
Colour, type, spacing, and real visual tokens.
Each value is marked as confirmed or proposed, so the documentation says exactly what it knows.
Iconography
A shared visual language for recognisable actions.
The icon pages connect each symbol back to the live visual language instead of inventing a parallel one.
Buttons
States, hierarchy, and application across mobile and web.
Components document what changes on interaction — not just their resting appearance.
Navigation + stepper
Accordion behaviour, depth, and progress patterns.
The mobile navigation and stepper record real structure so future work can be precise.
DELIVERABLE / 02
WHAT CHANGED MY THINKING?
Honesty about capacity and evidence turned out to be the same practice.
01
01 — When illness interrupted the project, I learned that naming capacity clearly is not separate from the work. It is the work: check what is actually true.
02 — I kept the earlier spec rather than hiding it. The correction became part of the trail, showing how the documentation earned its confidence.
03
03 — Design systems and self-care asked for the same thing: stop performing certainty, listen closely, and let the correction stand.
BACK TO WORK