APPENDIX · RESEARCH附录 · 研究材料
Sources, process, and the workshop floor.来源、流程、和 工作台。
The other chapters argue. This one shows what they are arguing from. Every claim about Atria’s current flow is grounded in one of the four external sources below, and every design decision is recorded in the internal artifacts after that.
其他章节是在「论证」。这一章展示「论证依据是什么」。 所有关于 Atria 现状的判断都来自下面 4 个外部材料,所有设计 决定都记录在内部 artifact 里。
OVERVIEW · MATERIAL DEPENDENCY MAP全景 · 材料依赖关系图
What this site is built from
这个网站建在什么之上
EXTERNAL · from Atria
外部材料 · 来自 Atria
S-1 · Notion
Brief
任务说明
S-2 · Loom 1
Full flow
完整流程
S-3 · Loom 2
Self-reported
自报问题
S-4 · Figma
Screens
界面截图
DIGESTED · our internal notes
消化后 · 我们的内部笔记
loom-summary.md
Transcripts + summary
字幕 + 提炼
observed-issues.md
15+ issues sorted
15+ 问题分类
test-cases.md
17 test cases
17 个测试场景
DESIGN OUTPUT · what users see
设计产出 · 用户看到的
This site
7 chapters of writing
7 章的内容
Prototype (/mockup)
Hi-fi clickable
高保真可点击
External sources外部来源
S-1
Atria Notion brief
Atria 的 Notion 任务说明
Source of truth
权威来源
The take-home prompt from Atria. Defines scope (Radar → Image Gen), evaluation rubric (Clarity / Actionability / Continuity), time bounds (3 days, 8-12 hours), and submission expectations.
Atria 给的 take-home 题目原文。定义了范围(Radar → Image Gen 流程)、评估维度(Clarity / Actionability / Continuity 三轴)、时间限制(3 天 / 8-12 小时)、提交要求。
S-2
Loom walkthrough 1 — full flow
Loom 视频 1 —— 完整流程演示
~5 min · Chinese narration
约 5 分钟 · 中文讲解
Atria team member walks through the full Radar → Detail → Iterate → Variants flow live. Highlights the analytics rationale and the iterate-ads path. Establishes baseline UX vocabulary.
Atria 团队成员现场演示完整流程:Radar → 详情 → 迭代 → Variants。讲了数据分析的逻辑和迭代广告的路径。也建立了基本的术语。
S-3
Loom walkthrough 2 — self-reported gaps
Loom 视频 2 —— 团队自报的问题
~2.5 min · Chinese narration
约 2.5 分钟 · 中文讲解
The presenter explicitly flags two known problems: (1) generation latency + task recall, (2) Iterate restricted to image ads with no UI affordance. Asks the candidate to extend the list. These are required to hit.
讲解人明确指出 2 个已知问题:(1) 生成耗时长 + 用户找不回任务;(2) Iterate 按钮只对图片广告可用,但界面上没有任何提示。然后让候选人继续往下找。这两条必须命中。
S-4
Raya — Atria's AI Creative Agent (product film, post-brief)
Raya —— Atria 自家的 AI 创意代理(产品片,任务下发后发布)
~30 sec · founder narration · YouTube
约 30 秒 · 创始人讲解 · YouTube
Atria shipped Raya — a conversational AI agent that runs the full ad-creation chain from one natural-language command («find my top 5 performers, make 5 variants, upload them, schedule for 9am PST, ping me when ready»). Watched and inflected round 4 of the prototype: added a conversational Raya panel at the top of AI Playground, suggestion chips that auto-complete the prompt, and create-ad entry points on Radar + Overview that route the user back to Radar with the new ad highlighted.
Atria 发布了 Raya —— 一个对话式 AI 代理,用一句自然语言命令就能跑完整个广告生产链(「找我最强 5 条广告,出 5 个改版,上传到漏斗顶部,9 点 PST 排期,搞定了 ping 我」)。看完后影响了原型第 4 轮:AI 实验场顶部加了 Raya 对话面板、输入时浮现联想 chip 自动补全 prompt、Radar 和总览都加了「创建广告创意」入口 —— 创建完跳回 Radar 并把新广告高亮出来。
S-5
Atria Figma file & prototype
Atria 的 Figma 文件 + 原型
View-only · Atria-managed
只读 · Atria 维护
Six static Atria-side screen captures plus the existing prototype. Used to verify the structural shape of Detail (two-tab Performance / AI Recommendation) and the per-recommendation Iterate cell.
Atria 提供的 6 张静态界面截图 + 现有的原型。用来验证「详情页是 Performance / AI Recommendation 两个 tab」、「每条建议旁边都有 Iterate 按钮」这些结构细节。
Loom video walkthroughs · what was saidLoom 视频演示 · 讲了什么
The two videos are in Mandarin and were recorded by an Atria team member walking through the product. We cleaned up the auto-transcript (mostly typos in the ASR output) and summarized the substance below. Original audio is on Loom; transcripts are in this repo at research/loom/*.vtt.
两段视频是 Atria 团队成员录的中文产品演示。原视频是中英夹杂 + 自动 转录,有不少错字 —— 下面这份摘要按上下文整理过。原始音频在 Loom 上,字幕文件在仓库的 research/loom/*.vtt。
The presenter walks through Atria from the homepage all the way to a generated variant. Demonstrates the full Radar → AI Recommendation → Iterate → Image Generation flow.
讲解人从 Atria 首页开始,一路走到生成完变体,完整演示 Radar → AI Recommendation → Iterate → Image Generation 流程。
| Time | What happens on screen |
|---|---|
0:00–0:25 | Opens the platform. «One of the most important modules is Analytics, which does ad data analysis. From Overview, click Radar at the top to enter the Radar feature.» |
0:25–1:05 | Explains how Radar works: an algorithm analyzes all ads in the account and tells users which are Winners and which have high potential to become new winners. The table shows an overall grade plus per-dimension grades (conversion rate, Hook, Retention, CTA). Users can customize columns and add more metrics. |
1:05–1:50 | Shows the Recommendation column and the AI Recommendationbutton — «click once and AI generates suggestions on how to modify the ad.» Works for both image and video ads. «I’ve already generated this one — generation takes time, so I won’t click again. Let’s look at an already-generated result.» |
1:50–2:20 | Detail page: overall performance analysis, persona-level issues found, recommended improvement directions, and reference examples for each recommendation. |
2:20–3:05 | Points to the Iterate ads button — «this only works for image ads; video is more complex, we haven’t built it.» Clicking it requires binding a brand profile (the demo brand is fake; real usage would have brand name, logo, palette saved). |
3:05–3:50 | Add brief: either type it manually or paste a product URLfor auto-extraction. After parsing, the system pulls product images. The presenter fills in a theme color manually (the historical brand profile didn’t carry it) and clicks Generate Ad. |
3:50–4:30 | Generation is triggered, based on the recommendation. «I need to pause… actually I’ve already paused for a while, because image generation takes time. Some images are now ready.» |
4:30–5:08 | Variants page: each improvement direction gets its own group of generated images, with short explanations. Can click Generate more, tweak the brief, or click a single image to adjust it (change original concept, add text instructions). Left sidebar shows Performance and Persona info. «This page opens in a new tab.» (key implicit UX issue) |
| 时间 | 屏幕上发生了什么 |
|---|---|
0:00–0:25 | 打开平台。「最重要的模块之一是 Analytics(分析),做广告数据分析。 从 Overview 点顶部 Radar 进入 Radar 功能。」 |
0:25–1:05 | 讲 Radar 的工作方式:一套算法分析整个 Ad account 里所有 广告,告诉用户哪些是 Winners(赢家), 哪些有 高潜力。表格里有整体评分和各维度 子评分(转化率、Hook、Retention、CTA)。用户可以自定义 列、加更多 metrics。 |
1:05–1:50 | 展示 Recommendation(推荐)列 和 AI Recommendation 按钮 —— 「点一下就让 AI 生成改进建议」。对图片和视频广告都通用。 「这一条我之前已经生成过,生成需要时间,我不再点了。 点开看已经生成的结果。」 |
1:50–2:20 | 详情页:整体 performance 分析、Persona 发现的问题、 推荐的改进方向、每条建议下的参考 examples。 |
2:20–3:05 | 指着 Iterate ads(迭代广告) 按钮 ——「这个功能只对图片广告可用;视频太复杂,我们没做」。点这个按钮,先要绑定 brand profile(品牌档案)(这是 demo 数据所以品牌是假的;实际场景下应该有品牌 名字、logo、配色)。 |
3:05–3:50 | 填 brief:可以手动输入,也可以直接粘贴 产品 URL 让系统自动解析。解析后系统 提取 product images。讲解人手动填了主题色(历史 brand profile 没存),然后点 Generate Ad(生成广告)。 |
3:50–4:30 | 根据 recommendation 开始生成。「我需要暂停一下……其实 已经暂停蛮久了,因为图片生成会花一定的时间。现在看到 有一些图已经生成好了。」 |
4:30–5:08 | Variants 页:每个改进方向各自一组生成的图,有简单说明。 可以点 Generate more 生成更多、调 brief、或者点单张图再调整(改原始概念、输入文字调整)。 左侧栏显示 Performance 和 Persona 信息。「这个页面是在一个新的 tab 打开的。」(← 关键的隐含 UX 问题) |
Key product structure observed:Atria > Analytics > Radar is the entry path. Radar table columns: Recommendation tag · Overall grade · 4 sub-grades (Conversion, Hook, Retention, CTA) · Spend · ROAS. AI Recommendation button → detail (Performance + Recommendations + Personas + Examples). Iterate ads button → bind brand profile → add brief (URL parser or manual) → choose style/color → Generate Ad. Generated images open in a new tab; left has Performance/Persona, right has variants per direction; each variant can be further adjusted.
观察到的产品结构:Atria > Analytics > Radar 是入口路径。Radar 表格列:Recommendation 标签 · 整体评分 · 4 个子评分(转化率、Hook、Retention、CTA) · 花费 · ROAS。AI Recommendation 按钮 → 详情页(Performance + Recommendations + Personas + Examples)。Iterate ads 按钮 → 绑定 brand profile → 加 brief(URL 解析或手输) → 选 style/color → Generate Ad。生成的图在新 tab 里打开;左侧 Performance/Persona, 右侧每个改进方向的几张变体图;每张变体还可以再调整。
V-2 · MUST-HIT
Video 2 · Self-reported gaps (~2.5 min)
视频 2 · 团队自报的问题(约 2.5 分钟)
Watch on Loom ↗
在 Loom 看 ↗
The presenter explicitly flags problems they already know about and asks candidates to extend the list. These two issues are required to hit — any redesign that misses them under-delivers.
讲解人主动指出他自己设计中已知的几个问题,让候选人在这之上再找更多。这两条必须命中 —— 任何重设计漏掉它们都是不及格。
| Time | What is said |
|---|---|
0:00–0:35 | «If you click Image Ads, it goes to Creation > Image Ads. Because this is still in MVP stage, we did it pretty crudely. It’s not its own dedicated entry — it’s mixed in with our other MJ-style generation features Clone-S and IT-RID. Users can click into a project here to see past generation records.» |
0:35–1:10 | «Throughout this process, you might have noticed some problems. Let me point a few out. The generation process at each stage is actually very long. Users very likely won’t stay on this page— they switch to other things and come back later.» |
1:10–1:30 | Self-reported issue #1: «When the user comes back, finding their previous work — the ad, the recommendation, the iterate image ads they generated — is actually quite hard to trace back in our current design.» |
1:30–2:10 | Self-reported issue #2:«The example I just showed was specifically an image ad. But in reality, ads aren’t only images — video ads are very common too. The iterate feature only works for image right now (video would need full video ad generation which is much more complex). But which ads are image, which are video, which can iterate, which can’t — my current design makes this very unclear.» |
2:10–2:34 | «I’m only pointing out these two. But I think you’ll find other problems too. I hope you can write down the problems you find, pick the ones you consider most important.» |
| 时间 | 讲了什么 |
|---|---|
0:00–0:35 | 「点 Image Ads 会进到 Creation > Image Ads。因为这个 还在 MVP 阶段(最小可用版本),我们 做得比较简陋。它没有独立入口,而是跟我们另一个 MJ (Midjourney)风格生成功能 Clone-S 和 IT-RID 放在一起。 用户可以在这里点项目,看之前的生成记录。」 |
0:35–1:10 | 「整个过程中你可能也发现一些问题。我提几个。每个环节 的生成过程实际上非常长,用户很可能不会一直停在这个页面,会 切去做别的事,过一段时间再回来看。」 |
1:10–1:30 | 自报问题 #1:「用户回来后,要找回他 刚才发起的内容 —— 那条 ad、生成的 recommendation、 发起的 iterate image ads ——在我们目前这个设计上其实是比较难追溯的。」 |
1:30–2:10 | 自报问题 #2:「刚才举的例子是特意选了 image ads。但实际上广告不只是图片,视频广告也非常常见。 iterate 功能目前只对图片开放(视频要做的话流程会 复杂得多)。但哪些是 image ads、哪些是视频、哪些能生成 iterate、 哪些不能 —— 我目前的设计也是非常不明显的。」 |
2:10–2:34 | 「我目前就提示这两点。但我觉得你可能也会发现其他 问题。希望你可以把你认为的问题记下来,挑选一下, 选你觉得最重要的。」 |
Two issues the redesign must hit:
- Generation latency + lost task recall— image gen takes minutes, users always leave, but there’s no global way to find their work later.
- Iterate only works for image, but Radar doesn’t show which ads are video — users walk all the way to the Iterate button before finding out the action is unavailable.
Our redesign answers issue 1 with Move 04 (global Tasks panel) and Move 06 (row-level iterations badge); issue 2 with Move 03 (action-kind dispatch + video advisory route).
重设计必须命中的两个问题:
- 生成耗时 + 任务找不回 —— 图片生成要几分钟,用户必然离开,但没有全局入口能 找回刚才发起的任务。
- Iterate 只对图片可用,但 Radar 表格里看不出哪些是视频 —— 用户一路走到 Iterate 按钮才发现按不动。
我们的重设计用 Move 04(全局 Tasks 面板) + Move 06(行尾 iterations 徽标) 回应第 1 个问题;用 Move 03(按 action kind 分发产出 + 视频走 advisory 路径) 回应第 2 个问题。
Internal artifacts in this workspace工作区里的内部 artifact
The repository at ~/Downloads/AtriaPlayground/ contains the full research trail. The site renders curated chapters of it; the raw material is on disk for verification.
整个研究痕迹都在仓库 ~/Downloads/AtriaPlayground/ 里。这个网站只展示精选的章节;原始材料都在磁盘上,需要的话 可以核对。
| Path路径 | What it is是什么 |
|---|---|
research/notion-source.md | Full Notion brief, scraped via Playwright + Notion cookies. Includes deliverable expectations and submission instructions. 完整的 Notion 任务说明,用 Playwright + Notion cookies 抓下来的。包含交付要求和提交说明。 |
research/loom/0665863a*.vtt | Full transcript of Loom walkthrough #1, recovered via Playwright captioning capture and decoded from double-UTF-8 with ftfy. Loom 视频 1 的完整字幕,用 Playwright 抓字幕 + ftfy 修复双重 UTF-8 编码问题后得到。 |
research/loom/271bed38*.vtt | Full transcript of Loom walkthrough #2 — the self-reported gaps. Loom 视频 2 的完整字幕 —— 团队自报问题的那一段。 |
research/loom-summary.md | Distilled key insights from both Loom transcripts: product vocabulary, four-stage flow, must-hit issues. 从两段 Loom 字幕里提炼出来的关键信息:产品术语、四阶段流程、必须命中的问题。 |
research/tray/raya-demo.md + raya-transcript.vtt | Full transcript of the Raya product film + structured commentary on what we steal, what we skip, and which round-4 changes the video pushed us to make. Raya 产品片的完整字幕 + 结构化笔记:我们抄了什么、跳过什么、它推动我们在第 4 轮加了哪些功能。 |
research/observed-issues.md | Fifteen-plus UX issues identified during diagnosis, sorted by Clarity / Actionability / Continuity axes. 诊断阶段识别出的 15+ 个 UX 问题清单,按 Clarity / Actionability / Continuity 三轴分组。 |
research/test-cases.md | Seventeen end-to-end test cases (happy path, edge cases, async, IA, video, bulk, onboarding) used to validate redesign coverage. 17 个端到端测试场景(主路径、边界、异步、信息架构、视频、批量、新手引导),用来验证重设计覆盖到位。 |
research/assets/radar-to-image-gen.gif | Atria-provided GIF demonstrating the current Radar → Image Gen flow at four stages. Frame-extracted for static analysis. Atria 提供的 GIF,演示了当前 Radar → Image Gen 流程的 4 个阶段。我们抽帧后做静态分析。 |
research/assets/concepts.webp | Static concept image from Atria showing the Figma file structure: Radar key interfaces + Asset library. Atria 提供的概念图,展示了 Figma 文件结构:Radar 关键界面 + 素材库。 |
ATRIA_REVIEW.html | Independent dense static UX architecture review of Atria's current Radar feature, modelled on a code-architecture-review template. Used as an internal sanity check before designing the new flow. 一份独立的、密集的 Atria 现有 Radar 功能的 UX 架构 review,套用了代码架构 review 的模板。设计新流程前用来内部 sanity check 的。 |
KICKOFF_PROMPT.md | Brief that was handed to Claude Design (via the design-handoff bundle) to scaffold the prototype. 通过 Claude Design 的 handoff 流程交给设计师 Claude 的 brief,用来搭原型脚手架。 |
Claude_design_result.md | Seven design improvements that Claude Design proposed and shipped into the prototype. Source for the Solution chapter. Claude Design 提出并实现的 7 个设计改进。Solution 章节的内容来源。 |
Tools used用到的工具
Claude Design (claude.ai/design)
Generated the hi-fi clickable prototype embedded in /mockup. Iterated on visual system + the seven move improvements.
生成了 /mockup 里嵌入的高保真可交互原型。迭代出了视觉系统 + 7 个 move 改进。
Claude Code (this session)
Implemented the Next.js site wrapper, ported the prototype to the deploy target, wrote all chapter content, built the e2e test suite, deployed to Vercel.
实现了 Next.js 网站外壳,把原型移植到部署环境,写了所有章节的文案,搭了端到端测试,部署到 Vercel。
Playwright + ffprobe + yt-dlp
Captured Notion content past auth, downloaded Loom captions, attempted Loom video pulls (signature expired mid-way).
绕过 Notion 登录抓内容,下载 Loom 字幕,尝试拉 Loom 视频文件(签名中途过期)。
ftfy (Python lib)
Recovered the double-encoded UTF-8 in Loom captions (chars arrived as mojibake when raw transcript was misinterpreted as cp1252).
修复 Loom 字幕的双重 UTF-8 编码问题(原始字幕被错误地按 cp1252 解码,变成乱码)。
Vercel
Production hosting. Auto-deploy from main with static-export-friendly Next.js App Router pages.
生产环境托管。Next.js App Router 静态导出,从 main 分支自动部署。
Process honesty notes
Two things this chapter is open about, because evaluators deserve accuracy:
- The prototype is not produced from scratch in code. It was generated by Claude Design from the brief and then iterated on by Claude Code. The site you are reading is production code that surrounds and serves the prototype.
- No real Atria user data was used. Demo brand «Lipsum Brand» (a.k.a. SATURNBIRD coffee) is fabricated. Recommendation copy, metric deltas, persona labels — all placeholder data designed to look real enough to render UX decisions, not real enough to mislead.
对流程的诚实说明
有两件事这一章想说清楚,评估者应该知道:
- 原型不是从零写代码做出来的。 原型是 Claude Design 根据 brief 生成的,然后由 Claude Code 继续迭代。你现在读的这个网站是生产代码,把原型包起来呈现。
- 没有用 Atria 任何真实用户数据。 演示品牌「Lipsum Brand」(也就是 SATURNBIRD 咖啡)是 编造的。建议文案、预测涨幅、用户画像标签 —— 全是占位数据, 看起来真实到足以做 UX 判断,但不真实到能误导任何人。