01
首页的收支趋势
在首页增设卡片的收支变化，让用户可以直接看到趋势。
独立案例产品 · UI/UX · 2026
BOA：支出
与预算
针对于BOA产品的用户体验优化
- 挑战
- 将已有的流程进行简化，并迭代新的产品功能
- 我负责的部分
- 调研、流程分析、线框图简化、移动端和网页设计
- 结果
- 本次招募测试者共有6人。在没有提示的情况下完成预算重新分配的人从 2 位增加到 5 位；发现超支所需的中位时间从 41 秒降到 24 秒
01
设计决策
整个设计包含三个重要的设计决策，以及一个新功能的迭代
02
花费页的超支展示
在花费页清楚地展示哪个项目超支，而不仅仅是一个数字圆盘。
03
超支项目的对比
对于超支项目，可以更清楚地横向对比每月的开销，不仅能按月份查看，也能按消费商家查看。
04
新功能：预算转移
预算可以在两个不同分类之间直接转移，无需修改月度预算总量。保存时，会询问这次调整是否只针对当前月份。
02
可交互原型
请点击右侧的手机，试用可点击的移动端原型
尝试 Spending 和 Budgeting 页面圆盘的 Hover 交互。
尝试 Edit Budget、Save Budget，以及新功能 Relocate，在不同分类之间转移预算。
尝试右上角的 AI 助手。
尝试修改一笔 Transaction 的分类。
03
用户痛点与市场调研
这些问题来自我自己使用 BOA 时对操作流程的疑问。在查询中我发现 Reddit 上有很多人也对账户中的 Spending 和 Budget 功能感到困惑。
出于此目的，我做了一份问卷调查，共收集到 32 份问卷。用户反馈主要集中在三个问题：
01
首屏信息冗杂
大部分用户觉得首页找不到花费页面在哪里，用起来很不方便。
02
修改分类会打断流程
一部分用户表示，每次修改分类都会打断当前流程，导致要重新再来一遍。
03
修改预算很费劲
每次修改预算，都要把整个流程重新做一遍。
对此，我整理了整个使用流程，简化了支出与预算两条流程，并制作了线框图。
查看改版前后的流程，以及全部 15 张线框
任务流程对比
查看支出
调整预算
入口
查看支出
预算
04
设计与迭代
两轮测试均由同一组 6 位成员参与并完成
01
预算重新分配功能获得巨大成功
每位测试者都表示新功能对于预算调配很有帮助，直接减少了分配时的多次点击。
02
支出图表的调整也取得了很好的效果
用户可以直接看到哪个项目超支，相比之前，完成任务所需的时间明显缩短。
03
AI 助手功能的使用有一些反向的反馈
因为移动了助手入口至右上角，导致权重降低。
05
网页端适配
桌面端并非只是简单地将界面放大，而是将更多信息放在同一个页面中。仪表盘更加丰富，也更方便用户查询资料。
查看视觉系统
反思
继续迭代 AI 助手
AI 助手可以在各类 App 中为用户提供很大的帮助。像 BOA 这类复杂的 App，用户在使用时会遇到疑问，也会不知道去哪里找内容，所以 AI 助手变得尤为重要。
如何权衡 AI 在每一页给出的回应，以及如何让 AI 融入整个使用过程，是很重要的一件事。后续，我也会围绕 AI 助手的用户体验做更多尝试。
独立的改版概念，与美国银行无关联。