Dora AI Editor
Redefining how to build 3D interactive websites using LLMs & Generative AI. From a prompt to a fully editable 3D scene in seconds.
Role
Product Designer
Timeline
Oct. 2023 - Apr. 2024
Team
6 Devs, 1 PM, 2 UX
Impact
20k+ Users Acquired

Why Natual-language-driven 3D Web Design?
Dora是一个兼容3D及其动画效果的无代码建站平台。然而,传统的“拖拽式”工作流仍动手门槛较高,制作周期过长。而Dora的核心客群(小型工作室及个人 IP 创作者)需求为快速制作、高效交付,而非“从零构建”。
随着LLMs的兴起,我们看到了三方建站由“手动构建”转向“自然语言驱动生成”的机会。Dora AI的目标是进一步降低建站门槛,允许用户通过自然语言生成高保真网站。
Build The Gap in 3D Web Design
新用户经常在初始阶段流失,主要原因为从零开始搭建网站的畏难情绪以及极高的上手成本。如何让用户在Landing page及新建项目页面即可快速体验到AI生成网站的工作流以及其核心价值,成为设计的首要挑战。
Whitelist & Referral Programme
考虑到Dora ai推理及图片生成成本问题,我们选择开放白名单模式以限制早期的使用人数,并计算用户的平均消耗(Unit Economics),从而估算大规模开放后的成本。同时去规避突发的大规模流量导致的崩溃或响应延迟(Latency)。这样一点点拧开流量,以便验证后端架构的承载能力。
对于非白名单用户,我们决定仍然保留入口可见。这里利用了FOMO(错失恐惧症)以提高Waitlist的转化率。并且我们也设计了动态刷新的队列号码,希望增加用户回访的动力,进一步提升回访率。

Onboarding Flow
Onboarding的设计上,我们给出了双重入口(Dual-Entry Strategy)的设计:
为了让用户在最短时间内触达核心功能,我们对存量用户及增量用户分别设计了两条路径:
1)沉浸式交互引导 (登录前): 在Landing Page,我们结合了鼠标scroll-down的交互,去做AI feature使用方法的演示。用户在下滑过程中,就可以高效地掌握产品使用技巧。
2)直通式激活弹窗 (登录后): 针对已登录用户,我们在Dashboard内置了带AI feature宣发视频的弹窗,用户一键即可进入AI 工作台。
Tags or not?
在“Gain more credits“的设计上,我们发现引入显性标签(Upgrade the plan & Refer a friend)虽然增加了清晰的信息分类,但也引入了不必要的视觉噪音(Visual Noise)。 继而我们通过增加卡片的对比度作为分类暗示,标签的功能变得冗余。
移除标签显著提升了界面的信噪比(Signal-to-Noise Ratio),让用户的视线能直接聚焦于核心价值(crerdits)和行动点(Upgrade & Share),而不是浪费精力去处理辅助性的层级信息。与其把所有东西都标出来,不如让context代替labeling自己说话。
![[Refer & Gain more credits] visual exploration](/assets/iterations_referral.png)
Reduce Blank Canvas Paralysis
在Dora AI冷启动阶段,主要的设计目标为尽量降低用户对0-1建站的畏难心理,期望借力AI快速生成期望网站的基本布局,并引导用户进行后续的修改。根据竞品调研,我们发现如Webflow、Wix等平台均提供了丰富的模板库供用户选择,以减少从零开始设计的难度。但是Dora仍然在起步阶段,没有一个十分强大的社群来提供海量UGC模板。
因此我们决定通过AI生成多样化的网站模板,用户只需提供简单的文本描述,系统即可生成符合其需求的3D网站布局。这种方式旨在降低了设计门槛,帮助他们专注于细节微调,从而在极短时间内达成最终交付。
Next Project
Workflow Tool
UX Architecture