Atria.
Atria · Take-home · Hayden Liu · May 2026Atria · 设计 take-home · Hayden Liu · 2026 年 5 月

Radar should feel like a todo list, not a leaderboard.
Radar 应该像一份 待办清单,不是排行榜。

A redesign of Atria’s Radar → AI Recommendation → Iterate → Image Generation flow. Today reads as analytics + image generator. Seven moves later, it reads as an AI copilot that closes the loop — and survives the user leaving the page.
Atria 的 Radar → AI Recommendation → Iterate → Image Generation 流程重设计。原版读起来像「分析工具 + 出图工具」拼起来。七个 move 之后,它读起来像一个能闭环的 AI 副驾 —— 并且能在用户离开页面后依然把任务跑完。

Open the live mockup →打开 live prototype →See how it's used看看怎么用Read the case读案例
Seven chapters · designed to be read top-to-bottom七章 · 建议从头读到尾
CH · 01
Problem framing
问题诊断
What's broken in Atria's current Radar → Image Gen flow, and which fractures matter most for Clarity, Actionability, and Continuity.
原版 Atria 的 Radar → Image Gen 流程哪里出了问题,以及哪几条断裂最值得修 —— 沿着 Clarity / Actionability / Continuity 三轴划分。
Read →阅读 →
CH · 02
Solution — seven moves
方案 —— 七个 move
Seven design decisions that reframe Radar from a list into a todo, give the AI a strategic point of view, and align production to recommendation kind.
七个设计决定,把 Radar 从「列表」改成「待办」,让 AI 有自己的立场,产出对齐建议类型。
Read →阅读 →
CH · 03
User flow
用户旅程
Side-by-side flow diagrams: today's four-stage path versus the redesigned async-aware loop.
并排流程图:原版四阶段路径 vs 重设计的异步闭环。
Read →阅读 →
CH · 04
Interactive mockup
可交互原型
A hi-fi clickable prototype that covers Radar, Detail Drawer, Add Context modal, Variants, and a global Tasks panel — runnable test cases TC-01 / 02 / 03 / 04 / 07 / 11.
高保真可点 prototype,覆盖 Radar、Detail Drawer、Add Context modal、Variants、全局 Tasks panel —— 6 个测试用例都能跑。
Open prototype →打开原型 →
CH · 05
How it's used
怎么用
A real Monday morning at a SATURNBIRD account — nineteen minutes, three ads touched, one variant pushed live. The redesigned flow in narrative form.
SATURNBIRD 咖啡账户的真实周一早晨 —— 19 分钟内动了 3 条广告,推了 1 条变体上线。重设计流程的叙事版。
Read →阅读 →
CH · 06
If we had more time
如果时间更多
Explorations beyond the take-home scope: prediction-to-truth feedback loop, video iteration MVP, multi-team review workflow.
超出 take-home 范围的探索:预测对真实数据的反馈闭环、视频 iteration MVP、多人审核工作流。
Read →阅读 →
CH · 07
Research appendix
研究附录
Sources, internal artifacts, tools used. The workshop floor — what every other chapter is arguing from.
来源、内部 artifact、工具栈。其他章节的论据全部出自这里。
Read →阅读 →
01 · The brief01 · 这次的任务
Atria gave me a 3-day design assignment, 8–12 hours of work. The task: redesign the loop that goes look at ads → pick one → tweak it → ship the new version. The team named three things to optimize for: information should be easy to read, every screen should let the user actually do something, and the whole flow should feel like one connected experience.
Atria 给我一份 3 天的设计作业,大概 8–12 小时的工作量。任务是 重新设计「看广告 → 挑一条 → 改它 → 把新版本送回投放平台」 这条主流程。团队点名了 3 个评估方向:信息要好读、每个屏幕都要 能让用户做点什么、整个流程要连成一条线。
02 · How it was built02 · 怎么做出来的
Two AI tools did the heavy lifting. Claude Design generated the visual exploration; Claude Code built this docs site and the interactive prototype, plus an end-to-end test suite that runs on every change. Hosted on Vercel.
主要靠两个 AI 工具。Claude Design 出视觉方案 和高保真界面;Claude Code 把这个文档站和可交互 原型实际写出来,再加一套端到端自动化测试(每次改动都跑一遍)。 上线托管在 Vercel。
03 · How to read this site03 · 怎么读这个站
Want the strategy? Read /problem then /solution — they explain how the product’s posture changed, not just what the screens look like. Want the craft? Open /mockup and click around. Want the trade-offs? Every section ends with «what this costs» — nothing is sold as a free win.
想看 战略:读 /problem 然后 /solution —— 它们解释的是「产品姿态怎么变了」,不是「界面长什么样」。 想看 手感:打开 /mockup 自己点一点。 想看 取舍:每一节末尾都写了「这么做要付什么代价」—— 没有任何改动被包装成「白拿的好处」。