TEL: 180-210-69380

启动 Figma 公开测试版的剖析

Aug,02,2023 << Return list


进入市场策略不仅仅在发布当天结束。在本期《解剖课程》中,我们将深入探讨如何制作产品和完成工作,我们将用手术刀剖析我们自己的开发模式,以剖析发布后关键的两周内发生的事情。

劳拉·埃德巴赫插图

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px; margin-top: 0px;">事实上,发布日是产品剩余生命周期的第一天。现在您已经将产品推向市场,是时候看看用户的反应如何,您是否正在朝着目标前进,以及哪些问题需要立即解决。将发布后的两周想象成一个用户研究聚会,每个人都被邀请:产品经理、设计师、数据科学家和营销人员。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">来认识一下样本 A:开发模式,这是我们专门为 Figma 开发人员构建的第一个工作区。今年 Config 期间推出的开发模式是我们对以下问题的回答:设计工具如何更好地为开发人员工作就像设计文件的浏览器检查器一样,它允许开发人员通过将鼠标悬停在 Figma 画布上并单击来收集测量、规格、资产和其他信息。公开测试版在 2023 年底之前向所有 Figma 用户提供免费访问,这意味着我们将能够获得关于它是否为我们的社区服务以及我们如何不断改进的重要见解。请继续阅读,了解我们如何准备发布以及在前两周内对错误、请求和反馈进行分类。

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">手术背后的大脑

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">太多的厨师会破坏肉汤,但太少的操作员会搞砸解剖。(免责声明:这在医学上是不正确的。这是一个扩展的隐喻;在这里与我们合作。)将开发模式推向市场的那些人投入了收集、分析和根据社区反馈采取行动的工作,因为我们都想了解如何使产品更好。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">就我们如何划分事情而言,产品团队负责跟踪特定功能的使用情况,营销团队评估公众情绪,支持团队专注于错误和改进。也就是说,我们都在持续沟通——没有人错过一条重要的推文,也没有人对常见问题一无所知。我们的产品经理 Avantika Gomes 从各个来源分析和综合信息,确定行动项目的优先级,协调后续步骤并进行迭代。

开发模式 A 团队的快照

在 Figma 中打开

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">重要统计数据:我们追踪的内容

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">在封闭测试的最后几周,我们花了很多时间与开发人员和设计师讨论他们的工作流程和痛点。我们学到的知识帮助我们迭代开发模式的核心机制,调整功能以反映用户的协作方式,并添加新功能来满足我们最初没有考虑到的需求。换句话说,我们知道我们走在正确的道路上,但也知道还有很多东西需要学习。

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">词汇表

北极星指标是成功的关键衡量标准,也是实现目标和期望的最强指标。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">除了根据北极星指标(使用开发模式的开发人员角色中的每周活跃用户 (WAU)的百分比)进行调整之外,我们还想了解我们是否吸引了受众、他们对工作区的看法以及需要做什么固定(统计)。我们知道我们正在准备迎接大量反馈,因此我们锁定了重要统计数据,并确保团队中的每个人都知道谁在监控什么。

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">专家提示

在结果开始出现之前设置基准指标会很有帮助,否则你会为数字的好坏而摸不着头脑。我们的研究人员还提前创建了包含关键指标的仪表板,因此可以轻松比较发布前后的变化。

  • 功能采用:我们检查了“检查”面板“比较更改”“相关链接”和其他功能上的动态,以了解有多少人在使用它们,以及哪些功能最引人注目。

  • 影响范围和反应:永远不要低估氛围检查的力量。社交媒体帖子印象电子邮件打开率产品内消息印象告诉我们,我们是否在吸引开发者受众方面做得很好,而配置期间的社会情绪现场受众反应则让我们了解哪些功能吸引了用户。

  • 修复和改进:为了了解是什么困扰了我们的用户,我们查看了帮助中心文章视图、通过产品内反馈按钮提交的内容以及支持票证——稍后会详细介绍。

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">事件的核心

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">这是我们想要的反馈,也是我们得到的反馈:在发布后的前 24 小时内,我们从反馈表、支持论坛、社交媒体、销售对话和其他渠道收到了 2,000 多个社区回复。

figma-1al1a4l" style="box-sizing: inherit; cursor: var(--cursorText); margin: 64px 0px 32px; font-size: min(3.0556vw, 44px); font-variation-settings: "wght" 750, "wdth" 76; font-feature-settings: "ss01"; line-height: 1.12; letter-spacing: 0.01em;">分类反馈渠道

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">为了组织信息流,我们为我们听到的所有内容设置了三个不同的 Slack 通道。我们的产品内反馈按钮链接到 Asana 中的一个表单(我们在整个分类过程中的唯一事实来源),该表单自动将每次提交记录为任务并将其推送到专用的 Slack 通道 #dev-mode-feedback- stream(我们还根据在其他地方收集的反馈手动创建票证。)第一天我们收到了 1,500 多条消息!

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">另一个 Slack 频道#dev-mode-internal-feedback允许 Figma 员工提出设计不一致的问题——这通常是普通用户可能会错过的事情—— #dev-mode-external-feedback收集了来自支持、销售和任何人的意见。与客户进行交互。我们还在 Twitter 和 LinkedIn 上发布了我们听到的信息,Figma 拥有一个大型的声音社区,可以很快让我们知道什么有效,什么无效。人们在 Slack 中分享了值得注意的反馈,供所有人查看。

figma-2w6ihj" style="box-sizing: inherit; margin: 0px;">

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/5600f488db30dfa810993697b2c5a9d94b317093-1608x1608.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/5600f488db30dfa810993697b2c5a9d94b317093-1608x1608.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/5600f488db30dfa810993697b2c5a9d94b317093-1608x1608.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/5600f488db30dfa810993697b2c5a9d94b317093-1608x1608.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/5600f488db30dfa810993697b2c5a9d94b317093-1608x1608.png?w=804&q=75&fit=max&auto=format&dpr=2 1608w" loading="lazy" alt="提供有关开发模式反馈的 Slack 消息的屏幕截图" width="804" height="804" style="box-sizing: inherit; border-style: none; display: block; height: auto; top: 0px; left: 0px;" data-catch-result="fail"/>

figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">软件工程师 Karl Petersson 在 #dev-mode-internal-feedback 中添加了一条注释。
figma-2w6ihj" style="box-sizing: inherit; margin: 0px;">

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/31da6bff93a1bb715cfe3db35343bee85eb7f653-1608x904.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/31da6bff93a1bb715cfe3db35343bee85eb7f653-1608x904.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/31da6bff93a1bb715cfe3db35343bee85eb7f653-1608x904.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/31da6bff93a1bb715cfe3db35343bee85eb7f653-1608x904.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/31da6bff93a1bb715cfe3db35343bee85eb7f653-1608x904.png?w=804&q=75&fit=max&auto=format&dpr=2 1608w" loading="lazy" alt="Slack 中发布的有关开发模式的 Twitter 反馈的屏幕截图" width="804" height="452" style="box-sizing: inherit; border-style: none; display: block; height: auto; top: 0px; left: 0px;" data-catch-result="fail"/>

figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">产品经理 Avantika Gomes 在 Slack 中发布了几条精选推文。

figma-1al1a4l" style="box-sizing: inherit; cursor: var(--cursorText); margin: 64px 0px 32px; font-size: min(3.0556vw, 44px); font-variation-settings: "wght" 750, "wdth" 76; font-feature-settings: "ss01"; line-height: 1.12; letter-spacing: 0.01em;">立即采取行动

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px; margin-top: 0px;">当工程师需要更多细节来充实错误报告时,他们会直接向用户发送电子邮件进行跟进。该团队还提出了临时解决方法的建议或引导人们访问帮助中心的资源。到目前为止,我们已经与 83 位客户进行了交谈(并且还在增加)。

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">专家提示

在文档中保留一些响应模板是很好的卫生习惯,以便您的团队可以轻松地响应或跟进用户,无论是感谢他们的反馈还是向他们保证帮助即将到来。左侧的示例解决了我们在开发模式下访问评论时遇到的常见问题。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">你好,

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">感谢您伸出援手!我很高兴您有机会使用开发模式,并且感谢您关于在开发模式中访问评论的反馈。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">您仍然可以在开发模式下访问评论!要打开评论,请单击左上角的语音图标,或使用键盘快捷键“C”进入评论模式。您可以在此处的帮助中心阅读更多信息

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">如果该快捷键因任何原因对您不起作用,请告诉我!视频或屏幕截图对于故障排除最有帮助。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">非常感谢您迄今为止的帮助和反馈!通过此次测试版的发布,我们渴望听到社区的声音,哪些内容可以帮助您获得更好的开发模式使用体验。虽然我们不能保证所有反馈立即得到落实,但我们致力于不断成长,并鼓励您继续分享您的想法。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">谢谢,

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">莫莉

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">词汇表

敏捷项目管理是项目可交付成果逐步增量且经常发生的方式,燃尽图列表可以帮助您跟踪仍需要完成的工作以及何时完成。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">我们担心我们会通过提供开发模式来破坏设计师的工作流程(剧透警告:我们做到了)。任何与此相关的 ping 都会成为我们在最初几天内推出的快速修复的燃尽清单:文件导入和导出问题、登录问题、接受服务条款的问题。在第一周内,我们就解决了 200 多个反馈提交——如果我们自己这么说的话,这还不错。

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">消化信息

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">专家提示

要获得反馈的鸟瞰图,请使用 Asana 小部件将任务放入 figma.net.cn/lm2/3383.html">FigJam 文件中,在其中可以按主题组织任务。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">在消除高优先级错误的同时,我们开始整理数据并完善短期路线图。我们的门票收入可能是《速度与激情 11》的情节,但我们是这样处理的。当 Asana 出现问题时,项目经理、研究、设计和工程团队会对它们进行标记和分类;最终,缓慢的加载时间和滚动浏览如此多部分的努力使得反馈难以综合。就在那时,我们跳到 figma.net.cn/lm2/3383.html">FigJam,通过 Asana 小部件拉取票证,然后将其组织到不同的部分。这让我们很好地了解了人们最关心什么以及我们应该优先考虑什么。

figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/6c308f9520e4c02ca2cc1cc345888cf548ce28f1-2160x1440.png?w=804&q=75&fit=max&auto=format&dpr=0.5 402w,https://cdn.sanity.io/images/599r6htc/localized/6c308f9520e4c02ca2cc1cc345888cf548ce28f1-2160x1440.png?w=804&q=75&fit=max&auto=format&dpr=0.75 603w,https://cdn.sanity.io/images/599r6htc/localized/6c308f9520e4c02ca2cc1cc345888cf548ce28f1-2160x1440.png?w=804&q=75&fit=max&auto=format 804w,https://cdn.sanity.io/images/599r6htc/localized/6c308f9520e4c02ca2cc1cc345888cf548ce28f1-2160x1440.png?w=804&q=75&fit=max&auto=format&dpr=1.5 1206w,https://cdn.sanity.io/images/599r6htc/localized/6c308f9520e4c02ca2cc1cc345888cf548ce28f1-2160x1440.png?w=804&q=75&fit=max&auto=format&dpr=2 1608w" loading="lazy" alt="Figma 如何在 FigJam 中组织 Asana 门票的屏幕截图" width="804" height="536" style="box-sizing: inherit; border-style: none; display: block; height: 536px; top: 0px; left: 0px;" data-catch-result="fail"/>

figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">figma.net.cn/lm2/3383.html">FigJam 的一部分,展示了我们如何将 Asana 任务组织为“错误报告”和“可用性问题”等类别

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">最终,这个过程变得过于手动,因此我们开始将数据导出到 Google 表格中,这仍然允许我们一次查看多张票证,向一张票证添加多个标签,并计算在任何给定标签下嵌套了多少张票证。作为视觉思考者,我们正在寻找一种自动化工作负载的方法,以便我们可以留在 figma.net.cn/lm2/3383.html">FigJam 中。

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">接收方

figma-1al1a4l" style="box-sizing: inherit; cursor: var(--cursorText); margin: 64px 0px 32px; font-size: min(3.0556vw, 44px); font-variation-settings: "wght" 750, "wdth" 76; font-feature-settings: "ss01"; line-height: 1.12; letter-spacing: 0.01em;">路线图规划

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">深入了解开发模式有助于我们了解 H2 的产品路线图计划;既然我们更好地了解了用户喜欢什么和不喜欢什么,那么制定产品方面的后续步骤就容易多了。营销团队能够识别用户理解方面的差距,我们可以继续通过教育文章和直播来解决这一问题。