案例研究：谁不喜好吃小蛋糕呢？关于蛋糕店的电子商务应用轨范-Cookiss

在这个寻衅中，我的角色是UX研究员和UX设计师创建研究操持，利用设计思维来帮助我的设计过程，并制作用户角色、用户旅程、信息架构，用户流程，线框，模型和原型。

对付这个寻衅，我利用设计思维来帮助我的设计过程。

一、案例研究背景

在这个统统都被数字化的时期，仍旧有很多蛋糕店是手动下单，须要买家到店取餐，有些是在线的，但买家由于没有直接看到目录和价格而感到不愿定，还有所有的蛋糕店大多是自己制作网上订购办法。

以是除了一家商店外，购物者没有太多的蛋糕选择。
买家也

二、研究操持创建产品创意创建用户画像创建客户旅程舆图制作线流探求一些感情板创建设计系统创建高保真创建原型

三、定义

在定义过程中，我正在做几件事来确定问题，找到痛点并制订我们该当如何做：

1. 问题

从背景研究中我得到了几个指出用户需求和洞察力的问题，以是我提出这个不雅观点来知道要办理什么问题：

从这个角度来看，我制作了用户画像：

在制作用户角色之后，我正在做的下一步是创建客户旅程舆图：

四、设计

定义之后，我有几件事要做，那便是：

1. 优先考虑指标

由于我在定义过程中做得很好，以是我得到了几个优先级的想法：

2. 信息架构

根据这些指标，我可以制作几个 IA，帮助我设计运用程序，让用户知道如何利用运用程序，而无需再次学习：

3. 用户流

做完信息架构（IA）后，我做了用户流的制作过程，此用户流程侧重于用户购买过程，从注册阶段到支付阶段：

4. 线框

这是我根据 IA 和用户流程创建的线框：

5. 线流

有了线框后，我创建了线流以理解用户在利用运用程序时的路径：

当用户定向到主页的运用程序的帐户时：他们选择了他们想要的蛋糕，然后他们阅读了蛋糕的描述。

如果他们不喜好样品蛋糕，他们可以进行定制。
如果他们喜好样品，他们会转到购物车页面，然后在付款页面中他们选择他们的地址并选择他们支付蛋糕的办法，然后在我们利用第三方快递的这个运用程序中选择快递。

在他们支付蛋糕后，他们可以等待蛋糕交付而无需来到商店。

五、原型与设计

为了制作原型和设计，我做了几件事：

1. 感情版

感情版是我们创造产品设计灵感的凑集，这些产品设计聚拢在一块版面上。

2. 设计系统

我的设计系统包括：

排版颜色输入表格肖像学插图按钮（紧张、次要、单选、复选框、切换、徽标、图像）统计栏头部导航栏和卡片

对付设计系统，我将其分为 3 类，即原子、分子和有机体。

3. 高保真

创建基于线框图的高保真，来自感情板的灵感，并利用设计系统将其排列成一页。

4. 原型制作

六、测试1. 问题

1.1 研究方法

深度访谈&可用性测试

1.2 研究目标

理解用户利用Cookiss做蛋糕电商的需求理解 Cookiss的设计成功率

1.3 受访者标准

1.4 工具

1.5 用户任务

注册和登录：哀求用户注册并登录运用程序并不雅观察用户的行为；选择项目和交易：哀求用户购买且停在购物车等待付款页面并不雅观察用户的行为；填写地址：哀求用户填写地址并不雅观察用户在做什么；付款：哀求用户为蛋糕付款并不雅观察用户在做什么；跟踪顺序：哀求用户跟踪订单并不雅观察用户在做什么。

2. 结果第一个任务的结果是用户觉得注册和登录就像他们在利用其他电子商务运用程序时一样，这与他们在注册和登录运用程序时的行为符合。
第二个任务的结果是多种多样的，但大多带有负面反馈。
用户觉得首页很紧，没有喘息的空间，由于只有物品卡。
当他们将商品放入购物车时，他们没有把稳到空购物车图标和添补购物车图标之间的差异。
第三个任务，反馈比以前少，这只是小问题，但会引起混乱。
用户没有把稳到切换按钮使地址成为主地址，由于颜色与背景稠浊。
第四个任务，用户对流程没有问题，但他们给我的反馈是：地址框太小，看不清楚和所选卡的颜色太浅以是没有差异第五项任务是最清晰的任务，由于所有用户都没有问题，他们以为它清晰无瑕。

3. 结果总结

七、迭代

任务2迭代：

1. 主页痛点：用户以为首页太紧，只装蛋糕卡，没有变革迭代：供应一个分类图标，让主页看起来不像只有蛋糕卡

2. 将物品放入购物车痛点：用户对已经在购物车和尚未在购物车中的蛋糕物品之间的差异感到困惑，因此他们不愿定迭代：供应购物车中物品的动画，购物车图标从轮廓图标变为添补图标

任务3迭代：

痛点：填写地址时用户不把稳是否有切换紧张地址，用户想快速填写地址，建议用舆图填写地址迭代：供应更深的灰色，以便切换按钮更明显，并供应舆图作为快速填写地址的一种办法

任务4迭代：

痛点：用户觉得地址框间距过紧，选中的项目不太显眼迭代：将间距从 0px 到间距 10px，并为所选项目供应更深的颜色，并将地址框从字体大小 12px 变动为 16px

这个电子商务的运用的设计是按照用户的需求和用户在网上购物的习气进行设计，紧张的问题在于视觉设计，没有给用户的足够的空间呼吸。
但是，在完成迭代过程后，我可以很好地处理这个问题~感谢你的阅读：）

（部分图文来自网络，若有侵权，请联系删除。
）

作者：交互设计小助手；公众年夜众号：美国交互设计资讯（ID：gh_deb1a91db646）

原文链接：https://mp.weixin.qq.com/s/ekNtS0c8MZAhVrCPFCBKig

本文由 @美国交互设计资讯 授权发布于大家都是产品经理。
未经容许，禁止转载。

题图来自Unsplash，基于CC0协议。