如果不深入分析,大部分人觉得 SaaS Onboarding 就是引导注册登录和功能演示,高阶者会将首次 Aha moment 也放入 Onboarding 目标。

业务视角的 Onboarding 目标,对上承接用户画像获取,对下促进留存和付费转化。这些目标的完成,是通过一系列刻意的用户路径和体验设计带来的。常见设计要点,重要程度依次有:

  • 缩短 Aha moment 时间:让用户更快 Time-to-Value,因为拉长感知价值的时间,面临消耗用户耐心和用户决策的不确定性
  • 核心功能交互引导:用官方或社区模版、幻灯片指引、关键任务列表在操作层面让用户更快使用产品
  • 官网落地页:传递和沟通价值主张,让用户首先感知这个产品和我有关、对我有用
  • 问卷或对话引导收集用户画像信息:短期做个性化路径引导、长期为用户调研收集数据

Onboarding 的本质是有效沟通。用户视角下,通过路径、交互、视觉和文案,帮他们建立对产品的关联、信任和信心。

关联

没有什么比官网落地页更帮助用户建立产品关联了,用户通过搜索、广告、KOL 推荐,大部分时候和产品首次接触是官网落地页,而其中流量很多又会到首页。

海外原生团队成长在网站很重要的商业和文化环境中,无一例外重视官网。中国出海团队擅长和专注做功能,往往忽略对官网的建设。这部分分析、排查和优化,会得到很多低垂果实。

官网落地页对用户传递或强化“这个产品是什么、对我有什么用”,和用户建立关联。主标题和副标题清晰表达产品价值主张,比如 Base44 首页内容简洁、大量留白,视角焦点主要留给了价值主张文案的呈现。

image.png

相对图片,文字也是抽象的,建站 SaaS 往往用官方或社区模版陈列,更加具象建立关联。Wegic 官网首页第二屏即是官网精选模版,用各个垂直行业网站设计,对其目标用户强化了电商建站工具的认知。

image.png

Base44 的社区模版,展示竞品标题、使用量和价格,让新用户觉感知社区其他用户做出的网站,也能命中自己的需求。

image.png

Lovable 社区用户作品数量多,虽然封面不精美,但展示出二次创作(Remix)的数量,类似展示商品销量,除了命中新用户需求,也加深他们对产品信任, 因为专业级别精美的作品,会疏远和用户之间关系。相对而言,真实的略显粗糙的封面,拉进和用户关系,给用户制造 “我能做出这样的作品” 的行动氛围。

image.png

社区作品墙产品功能有个细节,和付费相关。为了促进用户公开发布作品以及基于社区作品二次创作,很多建站 SaaS 会把对话和回放默认公开,只有升级付费套餐才能转为私有。项目和回放默认公开,让用户围观作品生产过程,增加信任、也促进社区活跃、用户交流和二次创作。大部分用户从 0 到 1,面对一个空白的画布建站有难度,从模版开始该,极大降低建站或者做 App 成本。

值得注意的是 Lovable 在 11 月初把所有项目默认变成了不公开,社区作品墙也隐藏入口了,取而代之的是展示专业机构和他们代理的作品。这被视为是 Lovable 重点转向做 toB 市场的信号。

信任

公域场合,信任多来自社会认同和权益。社会认同是要表现出你的产品“别人都在用”。如果你能放世界 500 强公司的 Logo 到官网,说是自己客户,那当然是最优解。

对于大部分公司没有世界 500 强公司作为客户,可以怎么设计呢?

你首先想到的应该是用户证言。比如 Readdy 官网放的,虽然都是 SMB 或者个人向的视频,但真人出镜增加了信任。

image.png

Youware 有了很取巧的方法,大方展示出 AI 和云服务领域的公司 logo,但并不是这些公司并不是自己客户。注意 logo 墙上方的那行小字。

image.png

Wegic 官网下划时候,展示出一连串数字:230 国家、生成 60 万个网站、80% 从 0 到 1 构建…

image.png

在塑造权威上,Wegic 可谓是用力到夸张。它的付费套餐页展示出很多熟悉权威机构标志,银联、信用卡机构。但这个页面本身显得用力过猛,视角表达过多,反而会影响转化率。

image.png

信心

用户信心来自他们相信自己会用、能用好、并且能从产品中得到好的结果,而不被界面搞蒙、不被复杂功能带来焦虑。作为顶流自然语言 vibe coding 建站产品,Lovable 在其中做了很多设计优化。

人类和 Agent 对话交互中,呈现阶段性交付报告,简单的语言和合理段落排版,让用户容易理解它在工作,它能沟通。Lovable 的对话流也专门经过设计,强化了价值感知:

  • 任务中:告诉用户设计风格、功能列表,过程中给用户确定感,用户感到 agent 意图理解强,设计能力强
  • 任务完成:列出了功能列表、设计风格,让用户感知和确认交付物是符合自己要求的;通过 What’s next 引导用户使用 app,给用户提供思路和灵感,进行新一轮对话来迭代 app
  • 语言风格:会夸自己,比如说自己会做出 sophisticated, modern brand, powerful, elegant 的 app

image.png

AI 产品因为在线推理和 API 延时,一般都有等待时间。利用这段等待期间传递价值和用户教育,也成了通用设计。这一设计往往对留存和转化有正向影响。比如 Lovable 一边等 Agent 写代码,一边在右侧 App 预览区展示幻灯片,让用户了解更多的 AI 原理和编辑工具。

image.png

缩短 Time-to-Value 或者 Aha Moment 所需时长,在 AI Agent 产品中重要的是提升首次任务成功率(业内也叫“首跳”),现在大部分 AI 建站产品在用户首次使用,2-3 分钟能够做出一个基本满意的版本,并渲染出预览展示给用户。这个设计很重要,因为它让用户在耐心失去之前,交付了价值,让用户有信心自己能用产品做出想要的网页或 App,从而留存下来继续使用。

image.png

关于首次任务成功率,有个细节设计是:即使用户积分用完,不足以让 Agent 完成任务,首次也要尽量确保成功不能中断。这个设计让用户心流持续,并增加一次 Aha moment 感知的机会。