返回项目
软件即服务 Figma 顺风 2025 年 · 6 周

Novu — SaaS 仪表板重新设计

对 B2B 通知管理平台进行全面的 UX 和 UI 检修 - 减少认知负荷,简化核心工作流程,并将更多试用用户转化为付费客户。

客户

诺武公司

角色

首席 UI/UX 设计师

时间线

2025 年 1 月 – 2 月

可交付成果

Figma, HTML/CSS

Novu — SaaS 仪表板重新设计英雄

−40%

认知负荷(SUS 分数)

+27%

试用到付费转化

−35%

支持票证(入门)

4.8/5

启动后 NPS

简介

Novu 是一个 B2B 通知基础设施平台,它允许开发人员跨电子邮件、短信、推送和应用内渠道路由、管理和监控通知。该产品在技术上很可靠,但仪表板在两年多的时间里有机地发展,却没有一个连贯的设计策略。到 2025 年初,该团队在 14 天的试用期内看到了很高的客户流失率,并收到了一致的反馈,认为该平台“功能强大但势不可挡”。

我的任务很简单:修复第一个小时的体验,而不从头开始重建产品。预算已确定,工程团队有六周的时间交付。

“我们在前 20 分钟内就失去了用户。他们注册后,看到仪表板,然后就跳了。该产品正是他们所需要的,只是他们找不到它。”

发现与研究

用户访谈

我对当前付费客户和最近流失的试用用户进行了 9 次用户访谈。这些课程包括 45 分钟的适度可用性测试以及任务后访谈。主要发现:

  • 9 位用户中有 7 位在第一次会话期间在没有帮助的情况下无法找到“工作流程”部分
  • 通知日志和分析面板被 5 个用户混淆
  • 侧边栏有 14 个顶级导航项——用户表示感觉“不确定从哪里开始”
  • 试用用户特别想要“实时获取第一个通知”路径,而不是功能概述

启发式审计

我对现有界面进行了全面的尼尔森启发式评估,发现了 6 个类别的 23 处违规行为。最关键的是工作流构建器中系统状态的可见性、识别与召回以及错误预防。

现有的仪表板审计——映射启发式违规行为

现有仪表板在审计阶段注释了启发式违规行为。

设计策略

根据研究,我围绕三个原则进行了重新设计:

渐进式披露

仅显示当前任务所需的内容。高级功能按需显示,而不是预先显示。

固执己见的导航

将侧边栏减少到 6 个核心项目。在上下文面板而不是全局导航中对次要操作进行分组。

目标第一的入职

将功能导览替换为三步“发送您的第一个通知”流程,该流程可在 5 分钟内提供一个顿悟时刻。

工艺流程

第 1-2 周·信息架构

我与 12 名参与者进行了卡片分类练习,从头开始重建导航分类法。 14 项侧边栏折叠为 6 个主要目的地。然后,我在 Figma 中为 8 个访问量最大的屏幕制作了低保真线框图,并使用 Loom 演练与产品团队进行快速异步审查。

1

卡片分类+IA重建

通过 Optimal Workshop 对 12 名参与者进行远程卡片分类。 14 个导航项目 → 6 个清晰的目的地,零模糊分组。

2

低保真线框图和异步审查

以 Figma 线框模式绘制的 8 个关键屏幕。通过 Loom 与产品团队进行异步审核 — 4 天内 3 轮迭代。

3

高保真设计和组件库

基于自动布局构建的完整 Figma 组件库。 40 多个组件,涵盖所有状态(空、加载、错误)。包括暗模式令牌。

4

可用性测试和迭代

5 场关于高保真原型的主持会议。 2 个重大用户体验问题在移交前浮现并得到解决。 SUS 分数从 54 → 82 提高。

5

移交和前端支持

Zeroheight 设计文档 + Tailwind CSS 实现新的设计令牌。在冲刺期间出席,以支持工程团队处理边缘情况。

高保真 Figma 屏幕 — 新的仪表板布局

最终的高保真屏幕显示了重新设计的侧边栏、仪表板主页和通知工作流程构建器。

之前 — 原始仪表板

之前 — 14 项侧边栏,没有明确的入口点

之后——重新设计的仪表板

之后 — 6 项侧边栏、目标优先的入门清单

关键设计决策

折叠侧边栏

原始侧边栏不加区别地将主要目的地与上下文操作和帐户设置混合在一起。我应用了严格的三层层次结构:主导航(6 个项目,始终可见)、上下文操作(相关时出现在右侧面板中)和帐户/设置(折叠在头像菜单下)。仅这一点就显着降低了认知进入成本——用户知道他们在哪里以及他们可以去哪里。

入职清单

我没有设计一个产品导览,而是设计了一个嵌入在仪表板主页中的持久但可忽略的清单。三个步骤:连接通道、创建工作流程、发送测试通知。每个步骤都会启动一个内联迷你向导,该向导可以在仪表板内完成,而不会破坏上下文。在发布后的第一个月,68% 的试用用户完成了所有三个步骤,而之前这一比例为 21%。

空州为师

旧设计中的每个空状态都是空白面板。在重新设计中,每个空状态都包含对该部分功能的一句话解释、主要 CTA 和文档的辅助链接。这将专门针对功能发现的支持请求减少了 35%。

结果

重新设计的产品在第六周交付,完全按计划进行。与之前同期相比,在发布后 6 周内跟踪了指标。

  • SUS(系统可用性量表)分数: 54 → 82 (+28 分)
  • 试用到付费转化率: +27%
  • 入职完成(3步流程): 21% → 68%
  • 支持票证(与入职相关): −35%
  • 创建第一个工作流程的平均时间: 18分钟 → 4分钟
  • 启动后 NPS: 4.8/5

“艾略特彻底改变了我们对入职的看法。仅此清单一项就为我们第一季度的 ARR 增加了 6 个数字。整个过程非常彻底,合作愉快。”

反思

这个项目最大的教训是:大多数 SaaS 用户体验问题与美观无关,而是与信息架构有关。该产品是有能力的——用户只是无法足够快地找到价值。与视觉重塑相比,有针对性的 IA 改革可带来更可衡量的投资回报率。

如果我再做一次,我会更加努力地推动更长的发现阶段。对于完整的仪表板重新设计来说,六周时间很紧,我们必须根据不完整的卡片分类数据做出一些导航决策。结果成立,但在高保真音响之前进行另一轮测试会让我对一些边缘呼叫更有信心。


对类似的订婚感兴趣吗? 联系我们 — 我可以从 2025 年第二季度开始参与新项目。

准备好开始了吗?

有类似的项目吗?

我可以参与新项目。告诉我您正在构建什么,让我们看看我们是否合适。

开始一个项目 →