设计方法论实战：从构想到交互式原型

用户为中心的财务管理APP开发，从初步构想到交互式原型。

我们在SKOPOS NOVA为金融行业的一家公司开发了一个概念APP，允许用户集中管理所有财务事务。

我们遵循设计思维方法，将最初的构想转化为交互式原型的完整产品。

在这篇文章中，我们的项目经理Anna Slotty与您分享了项目的进程、详细见解、经验教训和收获。

背景

VALUE是一个响应式APP，帮助用户管理财务并了解他们的消费行为。它还作为一个安全的储蓄和交易银行账户。VALUE帮助用户更好地理解自己的消费行为，并帮助他们更快地实现储蓄目标。

问题：

用户厌倦了使用多个APP来完成不同的任务，或者根本不使用任何APP，因为都不满意。

解决方案：

开发一个全能型财务APP，满足用户需求，而无需使用多个产品。

项目开始

该财务应用的目标是开发一个能够不仅与市场上其他财务应用竞争，而且超越它们的产品。在用户研究和相应的设计步骤之前，我们分析了竞争对手并确定了业务需求。
这些需求包括产品摘要、目标群体、风险和机会、竞争对手以及最终结论。

对于该项目，我们遵循了设计思维方法论，共有 5 个步骤：

共情 — 定义 — 想象 — 原型制作 — 测试

这个过程使我们能够建立对用户的共情和深入理解，并采用实践方法进行头脑风暴、原型测试和产品原型制作。

即使我们在这里将APP的开发呈现为一个线性过程，但其实设计思维方法论是一个迭代过程。

共情

理解用户

首先，我们进行用户调查，以更好地了解大家如何管理资金以及他们对新的财务APP的期望。根据这些调查结果，我们进行了用户访谈，并使用亲和力绘制进行了结果分析。这是我们首次对项目进行妥协：丢弃或更改了一些构想。

研究目标

确定潜在用户
了解用户在财务领域的行为
了解用户使用数字金融服务时的习惯和行为

调查

Google表单
15个问题及其后续问题
14名参与者

访谈

通过视频通话进行的直接访谈
14个访谈问题
3个访谈

见解

要用多个APP以完成不同任务
现在的产品在理财方面缺乏思考
希望更注重考虑金融方面
希望使用财务应用时有安全感
易于使用对产品来说是是很重的

亲和力绘制

在进行用户访谈后，我们通过创建亲和力地图分析了迄今为止的研究结果。结果被归类到不同的群组中，以识别模式，获得新的见解，并了解用户的需求。

定义

问题

用户希望有一个可以帮助他们管理资金和组织财务的产品。对于用户来说，快速和安全的交易不是唯一重要的因素，该应用程序还应显示统计数据、分析和消费行为，以及给用户提供节省资金的机会。

解决方案

一款允许用户快速、安全进行在线支付和交易的应用程序。该应用程序不仅允许用户支出资金，还帮助他们跟踪支出并反思自己的行为。用户还可以存钱、设定限制和目标，以及管理财务。

用户人设

根据访谈数据和调查结果，我们现在定义了三个用户人设，以更好地了解主要用户群体，并根据他们的需求确定目标的优先级。

“有闲钱的时候，我很难控制住自己花钱的欲望”

目标与需求

Said希望能够用手机支付
他希望设定预算目标以节省资金
在达到支出上限时，他需要收到通知
他希望在花钱方面更加谨慎

动机

设定预算限制和储蓄目标将成为他的动力
在花钱方面更谨慎将有助于他为未来储蓄
他希望能用手机支付以获得更好的支出概览

他的挫折

Said经常做出不必要的购买
只要Said有剩余的钱，他就会花出去
他缺乏自律，很难节省资金
Said因为几乎所有东西都使用信用卡支付而迷失了购买记录

行为/活动

Said对自己的花钱不加考虑
购物使他感到快乐，所以他喜欢买新东西
Said对自己的花销不太在意
Said总是使用信用卡支付

用户旅程

从全局用户需求到具体交互的首要步骤是用户旅程图。用户旅程图帮助我们更深入地了解用户的情感，并描述人设在完成任务时所经历的情感。这为解决用户的痛点和问题、帮助他们顺利完成任务提供了初步的思路。

想象

用户调查和用户流程

Jacob：“作为一个经常需要汇款的人，我想要简单而安全的转账，这样我就能完整记录我的付款。”

根据业务需求和用户人设，我们开始创建用户流程。任务流程显示人设为实现目标所采取的路径。这些流程也是第一个线框的基础。

信息架构

VALUE的网站地图是我们进行的卡片归类的结果。我们首先通过混合卡片排序研究组织内容并测试之前的假设。然后重新组织了网站地图的内容。

以下是结果，包括我们在过程中的小修改：

线框图

基于之前研究的所有发现，并在站点地图的帮助下，我们开始用线框图勾勒出我们关于最终产品的想法。
因此，我们首先绘制了低保真线框图的第一屏。在评估了效果后，我们又为线框图添加了更多细节，使其达到中保真度。

原型制作和测试

可点击原型

根据创建的用户流程和最重要的功能（也是高保真度的），我们在Figma中制作了第一个可点击的原型，并为用户测试做好准备。

原型是灰度的，因为我们最初只测试了功能。

易用性测试

我们现在使用可点击的高保真原型进行了有主持的易用性测试，共有 6 名参与者。通过亲和力绘制(affinity mapping)和彩虹电子表格(rainbow spreadsheet)对测试结果进行分析后，我们根据测试结果对原型进行了改进。

测试目标

评估新用户初次和应用交互的可学习性
检查用户是否理解应用程序
观察用户如何执行基本操作
确定该应用程序是否易于使用和找到想要的功能

测试分析和报告

然后，我们使用亲和力绘制和彩虹电子表格对测试结果进行了分析。根据Jakob Nielsen的错误规模对错误进行了分析。根据参与者遇到的相同问题以及对某些APP的反馈和评论，结果可以帮助进一步改进原型。

总的来说，所有参与者都能够完成设置的任务，并表示将“VALUE”归类为简单且直观的应用程序。除了一个例外，错误大多是次要设计问题，需要从视觉的角度进行小调整。

易用性问题

所有参与者都遇到的最大问题是对储蓄计划和钱包的困惑。在进行初始的卡片归类研究后，用户无法将这两个功能联系起来，因此钱包和储蓄计划被归类为两个不同的功能。然而，在原型的开发过程中，明显出现了这样做会导致复杂性的问题，但是我们当时为了看看用户能否将这两个功能区分开来，我们暂时采用了混淆起来的方案。由于这个困惑，我们最终还是重新修订了这两个功能。

改进前：

用户可以创建钱包或储蓄计划。区别在于，钱包可以储蓄资金，而计划只是为了特定目标而“提醒”储蓄资金。