在数字化浪潮中，SaaS（软件即服务）产品的竞争日益激烈，而优秀的用户体验（UX）设计已成为企业脱颖而出的关键。本文以美国《时代》杂志评为2024年全球顶尖教育科技公司Class的产品官网为例，深入剖析了其官网设计如何通过出色的内容策划、UX文案、视觉呈现和交互体验逐步建立起用户信任并传递品牌价值。
今天我要为大家分享被美国《时代》评为 2024年全球顶尖教育科技司Class 的产品官网体验旅程，希望这篇文章对你有所帮助！
我之所以想创建一个SaaS 产品体验侦探社的公众号，愿景就是让中国的 SaaS 企业不要只关注功能和营销，而是要回归到SaaS服务的本质，为用户打造优秀的产品体验。体验是全方位的，它包含品牌、内容、交互、视觉等多个层面，而一个 SaaS 产品的品牌官网，正是开启用户对品牌全新体验旅程的起点。
我们绝不能忽视 SaaS 产品的官网设计，它不仅是用户与产品交互的第一步，还将决定用户对品牌的价值感知，甚至让用户第一时间对产品做出初步判断：这个产品有价值吗？它符合我的需求吗？我愿意为它付出多少成本？
这也是我想撰写这类官网体验文章的目的之一，通过分享全球优秀的 SaaS 官网设计，为国内的 SaaS 从业者提供有价值的参考，学习他们的产品设计理念以及品牌宣传方式，最终提升自己产品的品牌价值。
Class 是美国一款面向 K-12、高等教育、政府机构和企业的在线学习软件，于 2021 年疫情期间推出。与其他 LMS系统（学习管理系统）以及知识付费产品相比，它是基于 Zoom 和 Microsoft Teams 构建的，为用户提供丰富的互动功能，让线上学习更有效、更可持续、更具规模化。
Class 被美国《时代》评为 2024年全球顶尖教育科技公司，目前已帮助 75 多个国家的 1000 多万用户改变了教学、学习、培训和发展方式。
我是在一次谷歌搜索在线教育SaaS 产品时偶然浏览到它的官网，仅仅是简单的浏览，我就被这个产品深深吸引，由此促成了这篇文章的诞生。
SaaS 官网这类分析的文章在此之前几乎无人创作，我在创作过程中也遭遇不少挑战。受限于时间和精力等因素，本文对 Class 官网的体验旅程分析主要以网站首页为主，以此为主线并聚焦于此。不过在部分版块，我也加入了二级栏目的内容，以确保你能获得相对完整的阅读体验。
需要特别说明的是，Class 是一个美国产品，其官网全部为英文，因此我主要依靠谷歌翻译以及 ChatGPT 来进行阅读。这其中难免会出现偏差，但我已尽力保持客观、准确的表达。
内容拆解
我将会从首页从上至下按模块拆分，然后提炼每个模块的核心内容，让你能知道这个模块设计了什么内容。
体验评分
每一个模块我会尽量从内容、视觉和交互的角度进行一个简单的点评，并且给出一个评分（满分为五颗星），我希望这样的阅读方式会更让你更轻松，而不是陷入枯燥乏味的长篇内容阅读中。不过有些模块过于简单，或者出现重复内容，我就不会再赘述。
用户信任曲线
在阅读整个Class官网的过程中，我会记录自己的信任状态变化，看看从一个潜在用户的角度，我是如何从”观望中”到产生”初步信任”，最终建立”深度信任”的。这种信任度变化曲线能够帮助我们理解一个官网的说服力和吸引力是如何逐步建立的，也为我们自己设计官网提供参考。
让我们正式开始吧！如果你想获得更好的阅读体验，建议你一边打开 Class(https://www.class.com/) 的官网，一边跟随本文进行阅读！
与国内多数 SaaS 官网不同，Class 的首屏并非左右滚动的促销大轮播，而是向用户清晰传达品牌的价值主张——专为学习和发展的虚拟教室。
体验评分：⭐️⭐️⭐️
用户信任情绪曲线
在首屏的体验中，我对Class的信任度是 “😐观望中”。虽然它的设计和内容清晰专业，但作为首次访问的用户，我还没有完全理解产品的价值主张和适用场景。网站导航的设计和品牌的视觉呈现确实给我留下了专业的第一印象，但我需要更多信息来建立初步信任。
与我们平时所熟知的 SaaS 产品不同，Class 虽然也有自己的 web 客户端（名叫 Class Collaborate），但它主要建立在领先的视频会议平台——Zoom 和 Microsoft Teams 之上。简而言之，它更像是 Zoom 和 Microsoft Teams 的一个应用插件。不过你不必感到奇怪，正是这样的产品定位和商业模式才值得我们学习和探讨。读到这里，你也能理解为什么它的 CTA 按钮是”获取现场演示”，而非”免费申请试用”了。
体验评分：⭐️
用户信任情绪曲线
我需要观望，因为我感受不出 Class 的优势和使用场景，这可能主要是因为我并不熟悉 Zoom 和 Microsoft Teams。但这部分的内容的确没有吸引我，反而让我思考这是否是我想要调研的竞品。
与简单罗列功能不同，Class 从直播学习的前、中、后阶段进行综合对比，并搭配精炼优秀的 UX 文案，让用户一目了然地理解两者的区别。写到这里，我呼吁大家要关注 UX 文案这一领域，它对产品设计体验的提升有极大帮助。在接下来的内容体验中，你还会阅读到很多能激发用户情绪共鸣的文案。
我开始对 Class 的功能有了初步的了解，比如课程模板、分组讨论室、嵌入式工具、投票评估这些我所熟知的在线教育产品功能。不过当我下载了他们详细的对比流程和步骤后，这提升了我对这个品牌专业性的信任度，因为他们并非随意填充内容，而是基于真实依据构建产品。
体验评分：⭐️⭐️
用户信任情绪曲线
通过阅读到产品对比部分，我已经开始从”😐观望中”向”🙂初步信任”转变。Class提供了详细的产品对比的流程及资料，让我开始相信这是一个有真实价值的专业产品，而不仅仅是营销噱头。虽然我对它的适用场景还有疑问，但对比表格的专业性为我建立起初步的品牌信任。
Class 的行业应用场景覆盖了各类企业、政府、高等教育、K12、金融、医疗和制造业等。它不仅为教育机构和学校提供专业的在线学习教学工具，还能为政府和企业提供新员工入职培训和人才培养等服务。
不过这里值得思考的是，虽然 Class 已经把场景延伸到医疗、政府以及金融等行业，看上去规模越来越大、应用场景越来越多，但这也可能会降低教育客户的兴趣——他们更希望找到一个专注于教育行业的产品。而用户对 Class 的初步认知，以我为例，它是一款教育产品。
体验评分：⭐️⭐️⭐️
用户信任情绪曲线
我的情绪在这个阶段经历了明显的波动。由于我本来想寻找一款专注于在线教育的产品，这种跨行业的解决方案实际上降低了我的兴趣。然而，当我深入阅读完二级详情页后，我的看法发生了转变，重新激发了我继续探索的欲望。
从这里开始，Class 逐渐向用户展示他们的产品核心优势以及如何解决在线课堂场景中的一系列痛点。他们大段的 UX 文案不会让我觉得啰嗦，反而总能吸引我进入二级详情页。当我进入后，我被”不要让学习者迷失在屏幕后面！“这一句极具张力的 slogan 所吸引。回想一下我们是如何介绍自己的产品优势，是否习惯于罗列那些用户根本不熟悉也极少使用的功能清单？如果是，那么 Class 真的值得你学习。
体验评分：⭐️⭐️⭐️⭐️
用户信任情绪曲线
在阅读到解决方案部分时，我的情绪开始上升。Class的”不要让学习者迷失在屏幕后面”这一理念深深打动了我，它不仅指出了远程教育的痛点，还提供了切实可行的解决方案。我从一个怀疑者逐渐转变为潜在的支持者，特别是当我看到他们如何通过实时数据分析和互动工具提升学习参与度时，我意识到这款产品确实理解教育者的核心需求。
Class 倡导，学习不应受到空间、时间或身体条件的限制。真正的学习自由，意味着无论身处何地、是否能到达教室，都应该被平等对待。这个表述换种方式理解，其实就是我们更熟知的”随时随地学习”概念。不过 Class 结合”教育平等”理念的介绍，不仅升级了这个场景的使命，而且更能激发用户的共鸣。
体验评分：⭐️⭐️⭐️⭐️
将”随时随地学习”与”教育平等”理念相结合，升华了产品价值主张，让用户产生更强共鸣。文案简洁有力，传达了产品的使命感和社会价值。
用户信任情绪曲线
我对 Class 的好感持续上升，特别是它将”随时随地学习”这一普通概念与”教育平等”的社会价值观相结合，让我感受到这不仅仅是一款工具型产品，而是一个有使命感的教育解决方案。
数据分析是一个产品的核心，我仔细地研究了这部分，想评估这款软件是否值得深入了解。结果让我充满惊喜，除了我能预想的课程数据仪表盘等内容，Class 甚至还提供实时的学习者参与度评分，可以帮助教师识别未参与学习者，并即时采取措施。我对 Class 的品牌信任度开始增加，并逐渐充满兴趣。
体验评分：⭐️⭐️⭐️⭐️
数据分析部分的内容既专业又实用，通过实时学习者参与度评分等特色功能展示了产品的深度。文案简洁有力，突出了数据分析对教学优化的关键作用，让用户能清晰理解产品价值。
用户信任情绪曲线
当看到 Class 展示的数据分析和实时评估功能时，我对这个产品开始建立了信任。这不仅仅是普通的数据统计，而是真正能够帮助教育者做出更好决策的实时智能分析，学习者参与度评分、自动转录和 AI 助手等功能让我确信这是一个值得体验学习的产品。
在讲解完行业应用场景后，Class 逐渐转向微观的功能层面，开始详细介绍其产品功能。在这个承上启下的环节，他们强化了产品的核心价值——促进学习者成功、建立社区感和提高留存率。
即便是介绍功能，Class 也按场景来分类，这样设计的优势不仅信息可读性高，而且能提升每一个功能的价值，它们为场景服务，而非简单重复堆砌。
协作式主动学习
进入到微观层面，Class 展示了其强大的功能。尽管我无法获取真实的产品体验，但当阅读完这个二级详情页后，我的兴趣已经被彻底激发。我非常想亲自体验一下，使用 Class 进行教学会是一种怎样特别的经历。
体验评分：⭐️⭐️⭐️⭐️
– 内容体验：每进入一个全新的二级详情页，我都会对这个页面的内容抱以期待，看看他们会去如何介绍，这正是他们出色的内容策划和 UX 文案魅力，每一句 Slogan 都能给你留下深刻的印象。
– 视觉体验：无论是首页的 tab 标签栏切换，还是二级详情页的设计，Class 的排版和视觉设计都非常自然、和谐，并保持高度的风格统一。
– 交互体验：Class 的信息层级虽然不复杂，但各页面的穿插，特别是 CTA 按钮的引导让用户能够轻松理解复杂的产品功能，降低了认知负荷。
用户信任情绪曲线
我的信任持续上升，尤其是在浏览二级详情页了解到这些细致的功能细节后，更加确信这是一款值得学习和体验的产品，而非仅仅堆砌功能的平庸之作。
无缝课程设置和交付
这是一个较新的概念，它向用户传达 Class 已经将所有内容整合到一个统一的空间，为你提供完整无缝的学习体验，实现”All-in-one”的教学模式。从网页的介绍中，我能够想象出一些真实的操作场景。由于我恰好正面临类似的需求，更能深刻体会到在教学中实现”All-in-one”模式对在线学习环境确实提供了极大的帮助。
体验评分：⭐️⭐️⭐️⭐️
我真的被 Class 如此出色的内容策划能力所折服，每一个功能模块都能被清晰贴切地表达出来，每一个功能点都能引起共鸣。他们不仅仅是在展示功能，更是在讲述这些功能如何解决实际问题、如何提升用户体验。这种内容策划能力值得每一个SaaS产品学习。
用户信任情绪曲线
我的信任持续攀升，在仔细阅读完 Class 如此丰富的功能后，我对这款产品产生了强烈的好奇和信任。此时，我已经迫不及待想要试用这款产品了。
灵活、易用的界面
这是我在 Class 官网这场体验旅程中的”啊哈”时刻，它让我对这个品牌肃然起敬，甚至想迫不及待地填写申请去了解它的定价，看看我是否承担得起。这是因为它的产品设计理念引发了我强烈的共鸣——灵活性、无障碍设计，让每一位学习者都能感受到被关注、被倾听，并能充分参与其中，这正是我的产品设计价值观之一。
体验评分：⭐️⭐️⭐️⭐️⭐️
创新、灵活、易用，以及让每一位学习者都能感受到被关注、被倾听的产品设计价值观。Class 的内容完美地传达了这一切，彻底引发了我的共鸣，让我收获了真正的”啊哈”时刻。
用户信任情绪曲线
我在这个部分收获了”啊哈”时刻，也对 Class 建立了深度信任。我不仅喜欢他们的产品设计，更认可他们的设计价值观。此时，我已完全信任这个品牌，并强烈期待能够亲自体验这款产品。
这个部分如果换个我们熟悉的词，那就是——关于我们。但你发现了吗？当你阅读到「致力于开创未来学习的新篇章」这一句产品愿景的时候，你是否会感受到它强烈的冲击力？这正是 UX 文案的力量，能够真正在客户心智中留下深刻的品牌印记。
体验评分：⭐️⭐️⭐️⭐️
用户信任情绪曲线
一旦建立了深度的信任，用户其实就成为品牌的粉丝了，我就是这样的感受。我深入了解了 Class 更多的细节，比如创始人 Michael Chasen 的亲身经历和解决实际问题的使命感让品牌故事更具说服力。了解到这是一家全球化远程运营的公司，也让我对其创新能力和适应性产生了更多信心。此时，我已经完全信任这个品牌，并准备好了解更多细节。
Class 已经受到来自 75 多个国家、1500 多个机构的 1000 多万用户的信赖，正如他们的客户 Jenna Caviezel 对他们的评价——”在我的整个职业生涯中，我从未记录过学生迟到多少分钟，我也从未计算过课堂上我讲了多少分钟，每个学生又讲了多少分钟，但如今，Class 帮助我实现了这一切。”
这种用户的真实反馈为产品提供了强有力的信任背书，我相信，如果一个有实际需求的用户阅读到这些内容，他们会毫不犹豫地留下自己的邮箱，迫切想了解这款神奇的软件如何真正改变我们的学习方式。
体验评分：⭐️⭐️⭐️⭐️
这是我首次访问到三级内容详情页，他们的交互设计令人印象深刻。也许我们会认为一个新闻详情页几乎不需要过多设计，但 Class 的阅读体验如同使用 Notion 一样流畅——目录、视频以及各种丰富的版式为用户带来了非常棒的阅读体验。
用户信任情绪曲线
我已经成为了这款软件的粉丝，所以接下来在这个官网的体验中，每一个部分对我来说，都是为了获取更细致的了解，我对它已经产生了高度的信任。
在首页底部，Class 再一次强调了它的产品价值，这六个场景不仅是 Class 始终思考如何解决的难题，也体现了他们的产品设计理念。
完美的收尾，主要归功于Class又一句精彩的UX文案。它不是简单的”联系我们”，也不是”免费领取优惠券试用”，而是一句能真正激发客户行动的句子。
体验评分：⭐️⭐️⭐️
看了 Class 的这一段 UX 文案，你是否想起了自己产品官网底部的「联系我们」表单？不妨重新构思一句更有吸引力的文案，让客户更有动力留下他们的联系方式。
用户信任情绪曲线
在体验的最后，我毫不犹豫填写了获取演示的信息，期待能够获取体验产品的机会。
我无法掩饰对 Class 官网的喜爱。尽管我并未体验过他们的产品，但他们确实为我呈现了一个非常出色的品牌官网体验旅程。这种愉悦的体验主要归功于他们精心策划的内容和优质的视觉呈现。接下来，我将会按照以下几个维度进行一个概括性的总结。
内容策划
Class 官网的内容策划堪称经典，他们采用了讲故事的方式来介绍产品，整个体验旅程环环相扣。从开篇点明价值主张，到逐步展开产品功能特性，再到呈现用户证言和行业认可，内容结构清晰而有说服力。如果你对 SPIN 销售原则有一定的了解，你会发现它完美地契合，这也是为什么我们阅读起来感觉很自然的原因之一。每一个模块的内容和顺序，都经过了精心的设计和制定了清晰的策略。
💡SPIN 销售原则
S（Situation）：探询情境，了解客户面临的问题与挑战。
P（Problem）：明确问题，深入分析客户的具体痛点。
I（Implication）：阐述影响，说明如果不解决这些问题会带来什么后果。
N（Need-payoff）：需求收益，展示解决方案如何满足客户需求并带来价值。
UX 文案
Class的UX文案堪称教科书级别，每一段文字都经过精心打磨，既传达了专业信息，又保持了亲和力与说服力。从主标题”改变世界的学习方式”到各个功能模块的描述，再到最后的行动召唤，文案的创作风格始终以用户视角出发，张力十足，又极具人文关怀，总能引发用户共鸣。他们的CTA按钮文案细节也做得很出色——你几乎看不到”了解更多”或”联系我们”这类平淡文字，而是更具吸引力的”体验Class的变革力量”，更有效地激发客户行动。
视觉体验
在视觉设计方面，Class官网采用了简洁而专业的设计风格，以蓝色作为主色调，象征信任与稳定。页面布局清晰有序，重点内容突出，视觉层次分明。我单独把他们的一些重点界面进行了完整的临摹，目的就是更细致地去感受他们的设计细节——配色、图标、字体等。而且他们的布局版式极具参考性，完全可以作为一个标准的参考模板。
交互体验
从交互体验角度看，Class 网站导航结构简洁明了，用户可以轻松找到所需信息。页面滚动流畅，各个部分之间的过渡自然。值得一提的是，他们在页面中战略性地放置了多个行动召唤按钮，引导用户进一步了解或申请演示，这些按钮设计醒目但不显得过于强制，为用户提供了清晰的下一步行动路径。
学会讲故事
Class官网的故事叙述方式是其成功的关键。他们没有简单地列举产品功能，而是将产品放入一个更大的叙事中：改变世界的学习方式。这种方法让潜在客户不仅能理解产品的功能，还能感受到使用产品后带来的转变和价值。对于SaaS产品官网来说，讲述一个引人入胜的故事比罗列功能特性更能打动人心。
重视 UX 文案
Class 官网的文案是其产品设计的一大亮点。每一处文案都经过精心打磨，直击用户痛点，强调价值而非功能。从品牌宣言到按钮文本，每个词语都服务于整体故事，引导用户沿着预设的转化路径前进。对于SaaS产品来说，优质的UX文案不仅能提升网站转化率，更能塑造品牌形象，建立信任感。
不要忽视产品官网
许多 SaaS 企业常常忽视产品官网的重要性，认为只要产品功能强大就能吸引用户。然而，Class 的成功案例提醒我们，官网是用户了解产品的第一窗口，是塑造品牌形象的关键阵地。一个精心设计的产品官网能够有效传达品牌价值主张，建立用户信任，并引导潜在客户踏上转化之旅。
商业模式的参考
Class 并不是传统意义上独立的 SaaS 产品，它是基于 Zoom 和 Microsoft Teams 而创建的，最早的产品名称就叫”Class for Zoom”，完全依托于 Zoom 这个被全球企业和用户信赖的平台。在获取了大量用户追捧并验证了产品与市场匹配度（PMF）后，他们才开始真正的产品化，发展成为如今我们所了解的 Class。这种发展路径和商业模式非常值得我们参考——在产品初期先借助大平台去试错，测试 MVP，然后再进一步商业化，最终实现”独立”。
本文由人人都是产品经理作者【廖尔摩斯丨设计大侦探】，微信公众号：【设计大侦探】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
