King Tan
“Ready when you are.” · 2026 ← All case studies
01Case study · 2026

Designing & shipping
“Ready when you are.”
with AI.

The AMP Retirement Hub — identity, campaign and comms for a design interview task. A human idea, directed end to end, with AI as production partner — then shipped as a live website the same day.

King Tan — Designer & creative director × AI as production partner Concept · campaign · live site Idea to live in a weekend
Ready when you are.one small yes at a timeBanksia #E4573Dexactly one new colourone typeface, weight only“Ready?” becomes “Ready.”deck → live site in ~2 hrsevery deploy verified Ready when you are.one small yes at a timeBanksia #E4573Dexactly one new colourone typeface, weight only“Ready?” becomes “Ready.”deck → live site in ~2 hrsevery deploy verified Ready when you are.one small yes at a timeBanksia #E4573Dexactly one new colourone typeface, weight only“Ready?” becomes “Ready.”deck → live site in ~2 hrsevery deploy verified Ready when you are.one small yes at a timeBanksia #E4573Dexactly one new colourone typeface, weight only“Ready?” becomes “Ready.”deck → live site in ~2 hrsevery deploy verified
02The problem

Unmistakably AMP —
but not a product pitch.

AMP was launching a retirement education hub — articles, guides, videos and tools — needing its own identity.

It had to read as AMP, yet feel like a content series people return to, not a sales channel. Warm and optimistic, yet credible enough to carry a financial institution's name.

Designing & shipping “Ready when you are.”The problem
03The insight was human

The barrier isn't information, it's intimidation.

The concept came from personal experience — conversations with family and friends about retirement. The pattern was always the same: people don't avoid retirement planning because they lack information; they avoid it because the decision feels enormous.

It's a behaviour problem, not an information problem. So the fix is behavioural too: break the one overwhelming question into small, answerable ones. One step at a time.

That became the idea: Ready when you are. Never ask the big question — every entry point is a small ask (“Ready to find your lost super?”), and every yes is made visible.

Designing & shipping “Ready when you are.”The insight was human
04The brand constraints were human

Two decisions came before any design work.

DECISION 01

Stay close to AMP

Keep the existing logo, the navy, the masterbrand voice. The hub should read as AMP speaking in a warmer register — not a sub-brand invention.

DECISION 02

Add exactly one new colour

I asked AI to suggest warm colours drawn from Australian flowers; from its candidates I chose Banksia (#E4573D) and defined its job — action and progress only, capped at ~20% of any layout, never on body text.

Designing & shipping “Ready when you are.”The constraints
05Where AI earned its place

With the insight and constraints fixed, weeks became days.

01

Articulating strategy

It sharpened my observation into a usable line — “the barrier isn't information, it's intimidation” — which became the spine of the written rationale.

02

Building the system

The question-outside/answer-inside copy architecture, the soft/hard edge rule, colour roles with WCAG checks, and a full slide grammar with speaker notes.

03

Cheap divergence

Full alternative concepts and logo studies were generated, compared and discarded in hours. Exploring became nearly free, so converging became confident.

04

Enforcing decisions

Every rule I set was applied consistently across 15+ slides — the tedium AI is genuinely good at.

Soft edges where the brand persuades, hard edges where the institution proves — one rule, applied everywhere without fatigue.

Designing & shipping “Ready when you are.”Where AI earned its place
06Where I pushed back

The collaboration ran both directions.

CUT

The progress bar in ads

AI put the Ready Line's progress state into ad concepts. I cut it — a percentage promises measurement a viewer hasn't earned. Ads got a punctuation flip instead: “Ready?” becomes “Ready.”

RESCOPED

The Ready Score

Initially parked as off-brief product mechanics, it returned later — correctly scoped as an in-hub feature for signed-in visitors only. Progress is counted from completed actions, never from reading, and never appears in advertising.

CONSOLIDATED

Typography

AI's first pass paired two typefaces. I consolidated to one — Noto Sans, hierarchy carried by weight alone — matching the masterbrand and keeping the system disciplined.

TRIMMED

Scope

Slides that explained rather than demonstrated (“Why this wins”) were cut. The deck argues by showing.

REWRITTEN

Voice

The closing slide on presenting and handling feedback was rewritten entirely in my own words, replacing AI's structured framework.

Designing & shipping “Ready when you are.”Where I pushed back
07The finishing was human

The shipped work went beyond the AI-built deck.

01

Photography

The “moment before” imagery concept — a real Australian mid-gesture, just before saying yes — was executed across nine sourced frames. Nothing shipped as a placeholder.

02

Campaign production

Three hero concepts became a rendered hub header, a 1080×1350 social ad, and six standard banner sizes — each with frame-by-frame motion direction I wrote myself, down to the endframe beat where the top of the “?” fades off to become a “.”

03

Refinement

Audience tightened, colour roles quantified, rationale polished, and the whole system rebuilt as final artwork.

Designing & shipping “Ready when you are.”The finishing was human
08The system, by the numbers

A whole system, disciplined.

1
New colour — Banksia #E4573D
1
Typeface — hierarchy by weight
9
Sourced photography frames
6+2
Banner sizes, hub header & social
Banksia capped at ~20% of any layout Never on body text WCAG-checked colour roles Every rule applied across 15+ slides
Designing & shipping “Ready when you are.”The system, by the numbers
09Then: present it live

The deck was the design.
Then I shipped it as a website.

Instead of handing over a PDF, I directed AI to rebuild all 18 slides as a live, navigable website at kingtan.com.au — native HTML/CSS, not exported images, with the deck's “Ready Line” running as the live progress bar. First version live in about two hours.

read
The Figma file, directlySlide geometry, copy and screenshots pulled straight from the source — no spec writing.
build
18 slides, native HTML/CSSDesign system, keyboard/swipe navigation and entrance motion — rebuilt, not screenshotted.
verify
Screenshot every key slideHeadless-browser renders compared against the deck before I reviewed anything.
ship
PR → merge → deploy → greenLive on my own domain through a real build-and-deploy pipeline.
Designing & shipping “Ready when you are.”Then: present it live
10The call that defined the build

Deck fidelity beat cleverness.

−561
Lines of code cut by the reversal

Version one had the campaign banners animating live on the page — real HTML banners playing their four-step storyboard. Technically flashy. But it wasn't the deck.

I called it: show the storyboards exactly as designed. The reversal shipped in minutes and removed 561 lines of code.

That's the whole working relationship in one decision — AI proposes and executes; the designer decides what's on-brand.

Designing & shipping “Ready when you are.”The call that defined the build
11Every round shipped like production

Six feedback rounds. Same day.

Each round: I reviewed the live site against the Figma file slide by slide, described what was off, and merged the fix minutes later — through a real branch → PR → deploy pipeline, with my hand on the merge button every time.

18
Slides rebuilt natively
6
Feedback rounds, same day
8
PRs merged & verified
2hrs
Brief to first live version
I keep the merge button Every deploy verified green Pixel-matched to the deck
Designing & shipping “Ready when you are.”Every round shipped like production
12What I learned

AI didn't design this identity. It collapsed the distance between a decision and its artefact.

  • 01
    The insight came from my life. A lived observation about how people actually avoid retirement planning — turned into a transferable system.
  • 02
    The constraints came from my judgment. Cutting the progress bar from ads, one typeface instead of two, deck fidelity over cleverness — exactly the moves AI can't make for you.
  • 03
    The craft moved up a level. My role shifted from maker to editor, art director and the person who ships. The craft didn't disappear; it moved up.
Designing & shipping “Ready when you are.”What I learned
13See it yourself

The work is live.

Walk the full presentation — the identity, the campaign, and the Ready Line ticking along the bottom. The same site I directed AI to build and ship.

View the live presentation

← All case studies

King Tan × AI · 2026See it yourself