YC设计评审官:你的网站越完美,死得越快
为什么一个像素级完美的网站,反而会是初创公司的“毒药”?YC设计评审请来前Coinbase、Airbnb设计负责人Karri Saarinen揭秘。他警告,在早期产品尚不完善时,一个过于精美的网站会设定错误的用户预期,用模糊的“大话”代替精准的沟通,最终赶走最懂你的核心用户。本期通过5个真实案例,教你如何打造一个“不完美”但极度诚实、能帮你精准捕获早期用户的品牌起点。
本期嘉宾 - Karri Saarinen, Co-Founder & CEO of Linear
- 2019年至今,Linear联创兼CEO,2024年公司完成C轮融资,估值12.5亿美元
- 2014-2018,Airbnb首席设计师、设计系统负责人
- 2014-2017,Coinbase早期设计师、设计负责人,创建公司视觉与产品设计体系,带领设计团队。
听播客: https://www.youtube.com/watch?v=uEeFsW9343g
Key Takeaways
面向早期创业者与公司创始人
- 忠于你的阶段,不要过早扮演“大公司”。
- 你的第一个网站应该诚实地反映你当前的产品和公司状态。与其花费数月打造一个与产品成熟度不符的“完美”网站,不如用几天时间快速上线一个简单、直接的页面。将主要精力投入到产品本身,让你的品牌与产品同步成熟。
- 为你的用户和投资人准备两套不同的“说辞”。
- 在你的网站上,必须使用具体、朴实、直接解决用户痛点的语言。把那些宏大、有野心的愿景(例如“未来的工作平台”)留给你的募资PPT。请记住,网站是获取用户的工具,不是向投资人画饼的画布。
- 你的品牌不是静态的,它必须与你一同成长。
- 定期审视你的网站和品牌信息,确保它与你不断演进的产品、客户群和公司愿景保持一致。当你从服务初创公司转向服务大型企业时,你的视觉风格、语言和信息优先级都需要进行相应的调整和进化。
- 找到你的“唯一优势”,并只对最在乎它的人说话。
- 放弃取悦所有人的想法。去和你的理想客户交谈,找到他们选择你的最核心的那个理由(The One Thing),然后把这个理由放在网站最显眼的位置。用它来吸引更多同类用户,并自动过滤掉那些不合适的人。
面向产品经理与设计师
- 信息架构采用“金字塔原则”:从极简到丰富。
- 登陆页的首屏只有一个任务:用最简单、最清晰的方式告诉用户“这是什么”。不要试图在首屏塞进所有功能和信息。将详细的功能介绍、客户案例等内容放在页面的更下方或专门的子页面中,供感兴趣的用户自行探索。
- 为“建立信任”而设计,尤其当你的用户非技术背景时。
- 面对非技术受众,设计的首要目标是传递“可靠”和“专业”的信号,而非追求视觉上的酷炫。选择清晰易读的字体,确保足够的色彩对比度,减少令人分心的自动动画。一个简洁、专业、值得信赖的网站,远比一个混乱、华丽的网站更能赢得他们的青睐。
- 交互设计必须尊重用户习惯,而非挑战它。
- 在设计关键交互元素时,要时刻考虑用户在成千上万个网站上已形成的习惯。一个浮动在底部的输入框很可能被当成Cookie横幅忽略。请将核心交互功能放在用户期望找到它们的地方。
- 每一个设计元素都应服务于品牌,从字体到包装。
- 品牌的一致性是建立记忆和信任的关键。如果你在网站上建立了一个“有机、好玩”的品牌形象,那么你的产品包装、Logo、甚至邮件签名都应该延续这种风格。品牌形象的断层会严重削弱用户信任。
▎1 品牌建设核心原则:从Linear的实践看真实性、精准沟通与演进
品牌真实性与早期定位
- 品牌应真实反映公司所处阶段:Karri Saarinen 指出,早期创业公司不应盲目模仿 Stripe 或 Linear 等成熟公司的精致网站。这些公司在初期时的网站和产品也远非如今的面貌。
- 避免设定错误的用户期望:在产品(如仅开发了一个月)还不够完善、功能尚未完全实现时,一个过于精美和华丽的网站会给用户设定错误的期望,让他们误以为这是一个非常成熟和完善的产品。
- 警惕过早模仿大公司:过早地试图让自己看起来像一个大公司或成熟公司是危险的。
案例分析:Linear的第一个网站 (2019年)
- 快速上线,聚焦产品:Linear 的第一个网站仅用一两天就创建完成。团队的目标是将主要精力投入到产品本身,而不是耗费数周或数月时间在网站上。
- 使用精准术语过滤用户:
- 网站刻意使用了“Issue Tracking”(问题追踪)这一具体术语,而不是像 Slack 等大公司那样使用“工作平台”(work platform)这类模糊的描述。
- 这样做的目的是为了精准地吸引和筛选出那些能理解这个术语的目标用户——早期公司的工程师,即使“问题追踪”并非 Linear 的长远愿景。
- 设计服务于核心目标:
- 网站上的产品截图经过了模糊化处理,旨在创造一种神秘感,激发用户的好奇心,其最终目的是引导用户留下邮箱、加入等待名单。
- 网站极其精简:只有一个页面,没有“关于我们”、没有博客。内容只强调了几个核心点:快 (Fast)、集成了受 Superhuman 启发的 Command Menu、展示了与现有工具的连接,并介绍了团队过往的成功经验 。
精准沟通:为不同受众定制信息
- 准备两种公司描述:YC 经常建议创业公司准备两种描述。
- 对投资者:可以宏大、富有野心,例如“未来的工作平台”。
- 对用户:必须具体,使用他们能产生共鸣的行话和术语,例如“一个好用的聊天应用”或“问题追踪工具”,哪怕投资者可能不理解这些术语。
- 网站应聚焦于用户:网站的文案,尤其是头条,应该专注于面向客户的描述,并将其直接、清晰地放在最显眼的位置。
品牌与设计的持续演进
- 品牌随公司发展而演变:Linear 的品牌和网站随着公司、产品和客户群的成长而不断演进。如今的网站已是第三次重要迭代。
- 信息传达的演变:
- 随着产品功能扩展(如增加了规划、项目、路线图功能),网站标题也从“Issue Tracking”演变为更全面的描述。
- 但描述依然保持清晰具体,使用“Issues, projects, and product roadmap”等技术团队熟悉的语言,而不是模糊的营销口号。
- 视觉风格的演变:
- Linear 著名的“紫色网站”被大量公司复制后,新版网站演变为更成熟的黑白风格,以更好地服务于日益增多的大型企业客户。
- 但网站仍保留了精美的动效,以此信号他们对卓越用户体验的持续关注和投入。
- 网站结构的分层:
- Karri 认为,首页(Landing Page)是给那些不了解你的人看的,应该提供“足够但不至于过载”的信息,帮助他们判断是否感兴趣。
- 更深度的内容,如所有功能细节、客户案例等,应该放在专门的子页面中,供感兴趣的用户进一步探索。
- Linear 努力克制在首页堆砌过多功能的冲动,以保持品牌最初的简洁核心理念。
▎2 网站评审: Sprites AI
核心问题:目标用户与核心功能模糊
- 第一印象模糊:Karri Saarinen 的第一印象是,仅从首页首屏无法确定这个产品是为谁(Who it's for)设计的,以及具体能做什么。
- 文案过于宽泛:
- 标题“Build custom AI workflows and streamline growth”(构建自定义AI工作流并简化增长)中的“增长”定义不明确,可能是指收入、用户或市场增长。
- 目标用户不明确:不清楚是为设计师、工程师,还是像卡片中提到的 YouTubers 设计的。
- 改进建议:
- 文案需更具体:建议在文案上更具体地说明产品。
- 对模板进行分组:可以将页面上展示的各种工作流模板(如“品牌情绪板生成器”、“社交媒体广告生成器”)按目标用户进行分组,例如“YouTubers 工作流”、“商业分析师工作流”,帮助访问者快速识别与自己相关的部分。
设计元素与用户注意力分散
- 视觉元素过度吸引注意力:网站独特的图形和循环动画非常抢眼,导致主持人 Aaron Epstein 完全没有注意到卡片上描述具体用例的文字。
- 动画的负面影响:
- Karri 指出,好的动画应能引导用户关注重要信息,但该网站背景和卡片的循环动画反而分散了用户的注意力。
- 这种持续的动态效果使用户难以聚焦于核心信息,与设计初衷背道而驰。
- 信息层级结构缺失:
- Karri 提出了“金字塔”信息结构模型:网站的顶部(首屏)应该用最简单、最清晰的方式告诉用户“This is what it is”(这是什么),然后随着页面向下滚动,再逐步展开更多细节和功能,信息量由少到多。
交互设计与用户习惯
- 关键交互元素被误判:页面底部浮动的 Prompt 输入框(prompter)在设计上存在问题。由于其样式和位置,极易被用户误判为“Cookie Banner”(Cookie同意横幅)并习惯性忽略。
- 设计需尊重用户习惯:设计师不能在真空中进行设计,必须考虑到用户在长期网页浏览中形成的行为习惯(如忽略底部横幅)。否则,关键的交互功能可能会完全失效。
- 改进建议:将这个 Prompt 输入框直接整合到页面顶部的主区域,使其成为一个明确的、鼓励用户直接尝试的功能入口,而不是一个浮动的、易被忽略的组件。
对“工作流”本身的解释不足
- 缺乏核心机制解释:整个页面虽然展示了许多模板(Templates),但并未清晰地解释“工作流”(workflow)本身是如何运作的,其内部机制是什么。
- 改进建议:选取一个具体的工作流案例,用类似流程图(flowchart-like explanation)的方式将其“放大”展示,解释其构成和运作原理。在此基础上,再告诉用户还有其他多种模板,并可以创建自己的工作流,这样能更好地传递产品价值。
▎3 网站评审: GigaML
公司背景与核心问题
- 核心诉求:GigaML 团队提出的问题是:“我们的网站转化率很低,如何提升?” 。
- 转化目标:网站的主要转化目标是引导访客点击“Book a demo”(预约演示)。
- 产品定位:网站标题为“AI agents for enterprise support”(面向企业支持的AI代理)。
针对企业级(Enterprise)产品的转化率反思
- 核心观点:Karri Saarinen 指出,对于主攻大型企业(Enterprises)的B2B业务,网站的点击转化率低是正常的,甚至不应该过度关注这个指标。
- 企业采购行为模式:企业客户通常不会通过随机访问网站并点击按钮来评估和采购工具。他们的决策过程更为复杂。
- 真正的客户获取渠道:获取企业客户更多依赖于销售团队的主动出击(sales)、参加行业活动、举办晚宴或其他线下连接方式。
- 转化率指标的误区:对于企业销售而言,一笔交易的金额可能非常巨大,因此单纯衡量网站的点击转化率意义不大。
- 改进建议:
- 如果仍希望通过网站吸引更多用户试用,应提供一个“Try it out themselves”(自行试用)的通道,而不仅仅是“预约演示”。
- 如果坚持纯企业销售路线,现有模式是可行的,但必须接受转化率低的现实,并通过其他渠道(销售、市场活动等)来寻找客户。
交互式Demo体验分析
- 引导性不足:当用户激活AI助手后,AI的第一句是“你有什么想聊的吗?”。这种过于开放的问题会让用户感到茫然,不知从何问起。
- 建议:应以一个引导性的问题(prompt)开始对话,主动引导用户询问产品的特定功能或优势,从而更有效地推销产品。
- AI回答的准确性问题:Demo中的AI将安全合规认证“SOC 2 Type 2”错误地读作“S2 type 2”。这种低级错误会严重损害企业用户对产品专业性和可靠性的信任。
- 交互元素可见性差:AI助手的交互入口是一个发光的蓝色球体(glowing blue orb),其中的麦克风图标是灰色的,在侧面视角下很难看清,用户可能根本不会注意到可以点击互动。
- 建议:可以考虑将这个球体换成一个更传统的、边界清晰的盒子(box),并在其中预设一些引导性的问题(prompts),直观地展示产品的核心用例。
文案与信息传递的优化
- 主标题过于笼统:“AI agents for enterprise support”非常通用,虽然点明了“Enterprise”是关键词,但缺乏更具体的差异化信息。
- 副标题是“错失的机会”:副标题“Trusted by some of the most admired companies in the world”(被世界上最受尊敬的一些公司所信赖)是多余的,因为下方紧接着就展示了客户logo。这个位置本可以用来更具体地描述产品功能,或点明目标用户(例如,企业内部的哪个角色)。
- 对“最受尊敬的公司”说法的质疑:Karri 认为这种表述可能不完全真实(not super honest),因为每个人对“最受尊敬”的定义不同(例如 Apple)。直接展示客户logo就已足够有力。
- 核心功能“Voice”缺失:直到页面下方才提到产品是“Voice AI”(语音AI)。在最重要的首屏部分完全没有提及“Voice”这个关键词,这是一个重大的信息遗漏,错失了精准定位早期采用者的机会。
企业级网站的内容策略
- 满足企业采购者的信息需求:企业采购者在决策前需要大量详尽的材料来“check a lot of boxes”(满足清单上的所有要求),例如客户案例、深入的功能介绍、安全合规文档等。
- 建议:不必将所有内容都堆砌在首页。可以为不同主题创建专门的子页面(如“安全性”页面、“客户案例”页面等)。在通过邮件等方式与客户沟通时,可以直接附上这些页面的链接,方便他们在网站上找到所需信息并进行深入了解。
▎4 网站评审: UnReal Milk (来自Brown Foods)
品牌背景与创始人提问
- 产品类型:一款在实验室中培育(lab-grown)的牛奶替代品,属于消费品(CPG)领域。
- 创始人提问:“我们的网站是否为品牌留下了积极的、令人印象深刻的记忆点?” (Does the website leave a positive impression and recall for the brand?)。
设计、故事性与品牌记忆点 (优点)
- 极强的个性和记忆点:两位评审一致认为网站非常独特且令人难忘(memorable)。其手绘风格的插画(如奶牛在沙滩椅上度假)、独特的横向滚动(side scrolling)叙事方式,使其在众多网站中脱颖而出。
- 成功的概念传达:
- 巧妙的故事叙述:网站通过“奶牛去度假了” (the cow is on a forever vacation) 的隐喻,非常巧妙地传达了“我们的牛奶生产不依赖于动物”这一核心理念,避免了生硬的说教。
- 对抗“科技”的“有机感”:网站整体呈现的“有机感”(organic feel),如手绘字体和插画,成功地对抗了消费者对“实验室制造食品”(manufactured foods)可能产生的科技、冰冷、不安全甚至“侏罗纪公园式”的负面联想。
- 字体选择的策略性:
- 手写风格的字体(handdrawn font)与品牌整体的“有机”、“好玩”的调性完美契合,是字体选择服务于品牌个性的成功案例。
- Karri 补充道,字体是网站品牌建设的重要一环。标题可以使用独特的字体来表达个性,但正文为了保证可读性,通常需要使用更标准的字体。
核心问题:信息模糊与缺失行动号召 (缺点)
- 产品信息不明:尽管品牌故事性很强,但访客在浏览完整个网站后,仍然不清楚这款“UnReal Milk”到底是用什么成分制成的。
- 【关键缺陷】缺乏行动号召 (Call to Action, CTA):
- 网站最大的问题是,当故事讲完后,用户不知道下一步该做什么。页面上没有购买链接,没有告知在哪里可以买到(is it in stores? where can I find it?),也没有留下联系方式的地方。
- 这种体验更像一个单向传播的、老式的“杂志广告”,而非一个现代的、可交互的网站。
- 改进建议:
- 增加邮件列表注册:最简单的改进是增加一个邮件列表注册入口,如“输入邮箱加入我们的社群”,以捕获感兴趣的潜在用户。
- 了解早期用户画像:通过分析注册用户的类型(如学生、环保人士等),团队可以开始了解其早期用户画像,并与他们展开对话,挖掘他们的真实兴趣点。
- 升华CTA:行动号召可以与品牌的社会使命(social mission)相结合,例如号召用户“加入我们,一起改变世界”,这比简单的“订阅更新”更具感召力。
品牌一致性问题
- 【疑似品牌不一致】 网站本身非常有趣、好玩、充满手绘感。然而,最终展示的产品包装(瓶子)上的 logo 却是一个非常普通、标准的无衬线字体(提及可能是 Helvetica),其风格与网站建立的独特个性完全不符。
- 这是一个错失的机会,产品包装未能延续并强化网站所建立起来的品牌形象。
▎5 网站评审: Confident AI
公司背景与创始人提问
- 产品定位:一个面向其开源项目 Deep Eval 的 LLM 评估(evaluation)与可观测性(observability)平台,由 Deep Eval 的创建者构建。
- 目标用户:工程团队,用于对 LLM 应用进行基准测试、安全保障和改进。
- 创始人提问:访客能否在20秒内了解我们是做什么的?我们同时拥有开源和闭源产品,这可能会造成混淆 。
信息传递与清晰度分析
- 优点:用词精准:网站使用了大量专业术语(如 LLM evaluation, observability, metrics, tracing)。Karri 认为这对于面向专家的市场是件好事,能有效且快速地与目标受众沟通。
- 核心问题:缺乏差异化信息 (Lack of Differentiation):
- 尽管访客能大致理解产品的功能,但网站未能清晰传达它与其他同类产品的区别,或是其独特的“特别之处”(what is special about it)。
- “由 Deep Eval 的创建者构建”这句话,对于不了解 Deep Eval 的访客来说,无法传递任何信任或价值感 。
- 对“Deep Eval”的身份困惑:
- 主持人 Aaron 是通过点击右上角的 GitHub 链接,才推断出 Deep Eval 是其开源项目。
- Karri 的第一反应是将其与 DeepMind 混淆,不清楚它是一个公司、一个开源库,还是一项技术。
- 建议:应在文案中明确 Deep Eval 的身份,例如“由流行的开源库 Deep Eval 的创建者构建”,以消除歧义。
- 潜在的定位策略:
- 评审推测,该网站的初期策略可能就是只针对已经在使用 Deep Eval 的用户。
- 如果是这样,网站文案可以更直接,例如定位为“Deep Eval Hosted”(托管版的Deep Eval),然后清晰说明付费平台在开源版本之上增加了哪些额外的价值。
设计元素与视觉问题
- 紫色下划线的误导性:标题中的紫色下划线文字(on Deep Eval),因其样式极度类似浏览器中“已访问链接”的默认样式,导致两位评审都误以为它是一个可以点击的链接。
- 视觉逻辑不一致:不清楚为什么只有“evaluation”一词被标为紫色,而同样重要的“observability”却没有。这种不一致的处理方式让用户感到困惑。
- 颜色对比度不足:紫色的文字在深色背景上颜色过暗,可读性差,几乎消失在背景中。
- 标题空洞模糊:页面下方的一些小标题,如“Make forward progress always”(永远向前迈进),过于模糊和空洞,未能有效传递信息。建议在设计网站时进行一个练习:只读所有大标题,看其是否能连贯地讲述一个清晰的故事。
▎6 与理想客户对话的重要性
本节内容由评审 Confident AI 时的差异化讨论延伸而来。
- 找到你的“唯一优势” (The One Thing):Karri 指出,作为初创公司,不可能在所有方面都做到最好。关键是找到你想在哪一个“one thing”上比所有竞争对手都做得更好,并用这一点去吸引那些最在乎它的早期采用者 。
- Linear 的早期案例:速度 (Speed):
- Linear 早期的核心差异点就是“速度”。这是他们通过与大量用户交谈后发现的核心痛点——当时市场上的同类工具普遍太慢。
- “速度”这一特性与他们的理想客户“初创公司”完美契合,因为初创公司行动迅速,最看重效率,而当时并不需要大企业所看重的“复杂性”(complexity)和烦琐流程。
- 如何找到并沟通你的差异点:
- 定义理想客户 (Ideal Customer):首先要非常清楚你的理想客户是谁。
- 与客户交谈:如果你不清楚你的核心优势是什么,就去和你的理想客户交谈,问他们“你为什么选择(或会选择)我们的产品?”。
- 发现模式并应用:从他们的回答中寻找重复出现的模式(pattern),然后将这些他们真正在乎的“原因”直接写在你的网站首页上。这会帮助你吸引更多与他们类似的客户。
▎7 网站评审: Dropback
公司背景与创始人困境
- 产品定位:为顶尖大学体育项目(elite college programs),特别是美式足球教练,提供的收入分成软件和前端办公室技术(front office tech)。
- 创始人的困境:
- 登陆页面感觉非常混乱(chaotic)。
- 但由于客户(足球教练)不精通技术(not tech-savvy),他们有一种心态:“如果我没在页面上直接看到某个功能,就默认你没有这个功能”,因此团队感觉必须分享大量信息。
对“混乱感”(Chaotic Feel)的分析与改进建议
- 首屏信息过载:当前网站试图在首屏塞入过多信息,是造成混乱的主要原因。创始人担心用户不滚动页面的想法是过时的,如今的用户已经完全习惯于滚动浏览。
- 移除干扰性背景动画:首屏的移动网格背景(moving grid)没有任何实际意义,反而严重干扰了核心文本的阅读。建议直接移除。
- 减少自动动态效果:页面中几乎每个版块都有自动播放的视频或图表,这进一步加剧了整体的混乱感。建议大幅减少自动播放的元素,让页面静下来。
- 简化首屏设计:建议将首屏内容大幅简化,只保留最核心的价值主张,甚至可以把字体调大,使其更清晰、更易读。
面向非技术用户的设计策略
- 核心目标:建立信任 (Build Trust):Karri 引用了他在 Coinbase 早期的经验——对于不精通技术的用户,或在涉及金钱、重大决策的领域,网站设计的首要任务不是追求惊艳的视觉效果,而是“建立信任” 。
- 设计应服务于“值得信赖”感:这类用户可能更希望看到一个“值得信赖”(trustworthy)的网站,而非一个“最酷炫”(most amazing)的网站。所有设计决策都应围绕传递专业、可靠的信号展开。
- 内容策略:解决问题,而非罗列功能:
- 对于非技术用户,网站内容可以不那么“以功能为中心”(feature-based),而应更“以客户为中心”(customer-based)或“以用例为中心”(use case-based)。
- 他们更关心的是“我的问题是否能被解决”,而不是底层技术细节。
- 强化社会认同 (Social Proof):对于这个群体,展示其他教练(“other people like me”)的面孔和成功案例,可能比展示功能列表更有效。
具体设计与结构问题
- 颜色对比度不足:黄色的按钮和背景色对比度低,导致上面的白色文字难以辨认。Karri 指出,黄色是一个很难用好的颜色,若用作背景,通常需要选择更深的黄色调或搭配对比强烈的文字颜色。
- 图表示意不明:首屏的一些小图示(如“logo logo logo documents”)完全看不清内容,无法传递有效信息,应予简化或移除。
- 【关键缺陷】冗长的单页结构:
- 将所有信息堆砌在一个过长的页面上,是导致混乱和信息难以被吸收的根本原因。
- 建议:将内容拆分到不同的子页面。利用现有导航栏的充足空间,创建针对不同人群(如“For College Programs”、“For Coaches”)或不同用例的专门页面。用户习惯于通过导航栏来寻找自己感兴趣的特定内容,这种结构更清晰、更易用。
请先 登录后发表评论 ~