原文链接:Zara a usability case study
原文作者:William Ng
Zara是我最喜欢的服装品牌之一,但是当我用app的时候总会遇到一些问题。尽管我不在Zara工作,但是我想看看其他用户是不是也有相似的问题。我决定去做一做可用性测试,这可以让我发现很多的痛点,并且对体验的部分进行重设计。
同理心
用户画像
第一步,我围绕Zara的消费者进行在线调研。我创建了两个临时的角色来应对假设,最大的用户群是:20~30岁的中上收入阶层。
工作故事
除了了解角色之外,为了更近一步的了解用户在使用app时的动机和预期结果,我花费了很多的时间去理解用户使用的环境。
可用性测试
为了更好的理解用户,我决定去一家Zara的店,选择一些客人进行追踪可用性测试。我对人群进行抽样测试,确保他们在测试之前接触过网购。最终选定了七位用户。
每位用户都被要求想象一下他/她在一个场景中,并执行下面这些任务:
最近很冷,你想要去寻找一件冬天穿的外套,你会怎么做?
你看见了一件喜欢的衣服,你可以告诉我哪些因素让它吸引你?
当你添加外套进购物车后,你发现衣服的尺寸错了,你会怎么做?
定义&分析
亲密图
我仔细的分析测试录音,然后提出每个用户的问题与反馈。然后通过映射来反映这些痛点的关系,分类处理。
2X2分析
为了帮助分析问题,我试用了2x2地图来帮助划分问题的等级,通过他们在商业(x轴)和用户(y轴)的重要性来确定。假设app的主要业务目标是推动移动端商业收入,我认为购物车编辑是商业和用户之间最大的痛点。因此,这些问题都在我的重设计范围内。
定义问题
我仔细地分析了用户与购物车的行为和模式,想了一套解决方案。
当试图在购物车中编辑一个项目时:
七个人当中只有一个没有遇到问题
七个人当中有六个尝试tap购物车中的项目,但是只谈出来了一张图片
七个人当中有四个试图刷新项目,但是没有弹出编辑选项
七个人当中有两个不小心删除了他们的物品
其他问题
没有办法修改购物车中商品的大小和颜色,这意味着用户不得不返回再次选择内容
用户无法看到购物车中关于商品更多的图片
想象&创造
低保真UI草图
在回顾了购物车编辑的问题之后,我关联了每个痛点和可能的解决方案来解决问题。
高保真原型
在将我的设计应用在原型之前,我通过在低保真UI草稿的走查和参考更多的网购用户的意见。收集了一些不错的观点并融入了我的最终设计中去。
接下来是我的解决方案:
新的“edit”按钮取代了旧的“buy later”按钮;这是一个有意义的选择。在这之前,用户想要保存他们的项目,他们在购物车中只能这么做。我会添加“save for later”功能在product-browsing流中,这样用户在收藏之前就不必去移动它。
竖向的图片carousel与app中的其他部分交互模式保持了一致。在最初的可用性测试中,用户往往会水平轻扫去查看更多的图片,因此我添加了适当的视觉元素引导互动。
原型
准备好了试试看原型吗?
首先,想象你你刚在Zara的app中完成购物,并准备退出。然而你需要编辑一些在购物车中的物品。然后你可以试着使用原型(点击查看)看看了。
验证
我通过七位用户来使用原型来验证我的设计。这七位用户被要求去编辑购物车中物品的数量和大小。所有的用户都能够没有问题的完成任务。
重新设计后,任务的成功率从33%上升到了100%。
当用户在购物车中编辑一个项目:
通过追踪可用性测试,我发现了用户对已经添加进购物车中的商品编辑困难。进一步,有一些预期的普通功能并没有存在于购物车中。(例如查看更多的图片和更换尺寸)。我的设计优化了检验过程,方便用户在购物车中编辑和比较。让用户在整个过程中更平滑意味着更低的跳出率,进而带来更多的商业变现。