案例研究:电子商务平台设计的五个阶段(原创)

< p >在本文中，将向您介绍我们在设计思维过程的五个阶段采用的不同技术-从情感用户到测试我们的原型-以及我们的发现。

我们在UX的第一个项目是为当地企业设计一个电子商务平台

从左到右:丹尼尔·内格尔、海军陆战队勒尤尼和我自己

我们的挑战是为当地企业设计一个网站，专注于为最终用户提供一个美妙的购物体验。

我们的团队选择了一家名为“插曲”的旧货店来销售二手衣服、鞋子和配饰像许多实体旧货店一样，《剧集》不提供网上购物平台。

在本文中，我将向您展示我们在设计思维过程的五个阶段采用的不同技术——从情感用户到测试我们的原型——以及我们的发现。

这个项目帮助了我在Ironhack的三个同学(亚历克西斯·米德尔顿、丹尼尔·内格尔和马琳)！

设计思维过程的五个阶段

由于亚马逊、易趣、速卖通和荷兰Bol.com等网络购物巨头的流行，当地小商店的年销售额正在下降。这不仅影响到小企业本身，也影响到当地经济和许多家庭。

然而，有一种趋势是，中产阶级消费者选择购买更少的商品，并且愿意支付更多的钱。

第一阶段:重点

设计思维过程的第一步是了解并强调用户这也被称为研究阶段由于电子商务网站在行业内得到了很好的研究，我们被要求将大部分研究时间用于基准测试和市场研究，并创建专业的最佳实践和简历规则，用于创建电子商务体验。

此阶段使用的方法是:

品牌分析(品牌比较、功效比较、命题矩阵) 观察(精益观察画布，谷歌表格) 采访

(1)品牌分析

品牌规模将epic与其四个直接竞争对手(阿姆斯特丹的其他旧货店)和两个间接在线竞争对手进行了比较，包括口号、目标受众、库存和价格规模。这有助于我们了解这两个位置之间的插值位置。

“疗效量表”是指我们通过检查和研究发现的“疗效”比较图。这些功效似乎值得注意。这样做的目的是为了比竞争对手更好地了解《星球大战》以及旧货店中常见(或不常见)的东西。

由克里斯·泽尔威尔开发的

精益观察画布是一种快速、协作地建立短期观察以获得所有所需信息的有用方法它侧重于定义目标用户和验证假设所需的视图(我们需要学习什么？我们已经知道哪些信息？我们需要向谁学习？我们如何联系这些人？)

我们的精益观察画布支持我们认识的人、我们应该瞄准和观察的人、如何正确安排逻辑流程图中的问题以及如何削减最基本的问题。(请记住:没有人愿意填写冗长的书面意见)

(2)观察

下一步:在谷歌表单中创建观察问题和结构已经讨论过了。这个过程相对简单。

在

建立了精益观察画布之后，我和我的团队对谷歌表单进行了简短的观察我们通过个人渠道(脸书)和专门讨论节俭购物和古董服装的小组页面分发观察问卷。

共有133人回复了我们的观察。一些主要发现是:

节俭购物的三个主要原因是:省钱(72%)、环保(59%)和寻找异国商品(52%)在过去的六个月里，73%的受访者(133人)去过旧货店。其中，75%是购买的。在过去的6个月里，38%的受访者(133人)去过网上旧货店。其中65%被购买。

我们从未来的培训中学到的一些经验是:

记得问痛点——我们关注人们庆祝节日的原因以及他们在某些方面(新奇、省钱、质量)有多重要，但是忘记一个问题来验证可能的(发现新的)痛点。在发布(和分享)你的观察结果之前，请测试你观察结果的所有可能情况——由于时间限制，我们忘记了测试事情的具体过程。事实证明，如果某一组问题得到了回答，最终的部门将不会出现。请记住，谷歌表单不支持巨大的显示逻辑——您可以添加基本的显示逻辑(“如果对Q3的响应是a，请显示部门2”)，但是谷歌表单不能处理惩罚更大惩罚的逻辑(即，“如果对Q3的响应是B，对Q5的响应是c，请显示步骤4))

(3)面试

我们一共进行了9次采访:一些被采访的顾客脱离了《剧集》，一些采访了忠诚顾客的顾客。采访加深了我们的理解，并问:“为什么？”虽然你不能做很多事情，但回复通常更丰富，可以帮助你理解用户内心的想法、感受和想法。

阶段2:定义

随着研究的完成，我们小组进入了设计思维过程的第二阶段:定义问题在这个阶段，我们希望对所有的发现进行分组和综合

在这里，我们接受了以下技术:

头脑风暴大会(相似性图表、思维导图) “我们如何能”声明 用户角色，用户旅程 问题陈述

(1)头脑风暴会议

亲缘关系图:

此亲和图支持我们组自己的观点、观察效果和对逻辑分类和亚型的观点。

此亲和图支持我们组自己的观点、观察效果和对逻辑分类和亚型的观点。

接下来，我们仔细检查发现的痛点。这些类别是:披露/会议、时间、质量、组织和业务问题

我们决定为每个痛点建立单独的思维导图在反思了面试中最常见的难点之后，我们决定继续“时间”和“组织”

思维导图:

思维导图在组织的相关方面支持组织

思维导图为我们组织的相关方面提供了时间。

(2)用户

用户

Maya是我们的主要用户角色她30多岁，全职工作。她喜欢在旧货店购物，寻找奇怪的复古服装。然而，不幸的是，她发现垃圾购物需要很多时间，通常是由于垃圾商店的混乱。在她的日程表上找到一个合适的时间变得越来越难了。

小号蛇是我们的第二用户角色她二十多岁才开始她的职业生涯。她自称是“渴望预算的时尚人士”。她也对这种情况充满热情，并致力于为循环经济做出贡献。

(3)用户行程

用户之旅帮助我们让用户感觉更好我们为主要用户角色选择了以下方案:

“玛雅下周有员工晚宴她想为运动找到合适但奇怪的衣服。她决定周六下午节约购物。她大约有两个半小时“

从所有这些意见中，我们可以整理出以下问题陈述:

“由于时间有限，节俭的购物者对杂乱无章的商店感到沮丧，因此他们需要一种更有效、更愉快的购物方式。”“

因此，我们的假设陈述变为:

“我们相信，创造一种网上购物体验，专注于在有限的时间内为节俭的购物者组织商品，将使他们能够更有效地购物并消除挫折感。”当顾客忠诚度在6个月内增加10%时，我们就知道我们是对的。“

第三阶段:构思

通过我们的研究，我们的团队已经准备好进入设计思维过程的“理想”阶段

我们首先查看了所有的发现和用户的意见，并建立了主运行状态图-性能:

M =必需 S =预期 C =可以拥有 W =否

(1)网站地图

接下来，我们将继续为网站构建信息架构(IA)或蓝图在这里，我们决定如何按照逻辑模式对内容进行分类和组织。否则，用户在浏览我们的网站时会迷路。它还能帮助我们迈出下一步:构建一个原型。

(2)用户流

阶段4和5:原型和测试

现在，我们将构建一个纸质原型

某些纸张原型屏幕

在与我们的四个同学测试了交互式原型之后，我们发现了以下问题:

城市的选择和商店的位置不够清楚。 商品只能从商店里拿走的事实没有得到正确的展示。

我们优化了原型，并在草图中建立了一个中等保真度的原型。

产品效果页面/过滤效果页面/产品页面

用户界面流程:

接下来，我们团队的每个成员都建立了一个高保真原型机我们在这个部门呆了四天下面将带您了解视觉设计/用户界面过程的各种元素

情感板:

我开始建立一个情感板我想挑战自己对这个品牌的忠诚，包括在《第一集》的商店里发现的黑色和勇敢的红色。我寻找的图像代表了《第一集》的外观。范氏和匡威品牌和毛皮大衣应该有很高的代表性，我在商店里注意到了很多。

情感板

颜色:

色

我最后选择了(略)深红色，再加上深水蓝色作为第二(关键)色。

布局:

我选择了80px Staatliches字体作为显示标题，这与剧集的实际标志字体非常相似，但也有点前卫。

对于标题和正文，我选择了《浓缩机器人》这是一种中性且可读的字体，仍然与显示标题的字体互补。我认为机器人字体的“压缩”版本非常适合电子商务网站，因为每一行文本可以容纳更多的文本。

高保真原型机:256以上

主页:

产品页面，以女装为例:

产品第256页+

细节保持简洁，并指向关键点:尺寸、颜色、材料、质量以及(当然)物品存放的位置。

还要记住，因为所有的商品都是独一无二的，所以你永远不会像在其他电子商务网站上那样有一个星级/评级系统。

原作者:Nele Groosman

原地址:https://medium.com/@奈雷金斯曼/UX-ui-case-study-e-commerce-for-second-clos-1078355 f0de 3

翻译:南社；译者公开号码:佘梦莲门

这篇文章今天由@南社翻译发表未经允许，请勿转载

。

张地图来自Unsplash，基于CC0协议