案例研究：谁不喜欢吃小蛋糕呢？关于蛋糕店的电子商务应用程序-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协议。
6款设计师必备的app
6款设计师必备的app分享
花瓣-设计师的灵感天堂
推荐理由：我每天早上坐地铁必刷的app之一，遇到好看的作品或者素材直接下载采集下来，当工作中遇到紧急需求时，不要慌张打开花瓣寻找灵感！
站酷-国内设计大佬的聚集地
推荐理由：站酷是一个优质的设计师社区，在这里你能看到各种天马行空的设计(自卑警告)。你也可以在这里发表自己的作品，优质的作品会得到推荐积累自己的人气，还有可能接到私单。
dribbble-汇集全世界创意人士的社区
推荐理由：想要关注最前沿的设计趋势，那你的手机里一定要有dribbble.(温馨提示请搭配梯子一起使用）
✏️DailyArt-每日一幅经典画作
DailyArt每天会推荐幅经典画作，上下班的路上看一看提高艺素养合理利用碎片时间。
每日故宫-感受古人的匠心精神
推荐理由：故宫博物院的官网app，每日带你赏析一件历史文物，这款app的设计风格我也非常喜欢字体采用人文气息十足的宋体.配色上采用中国传统的朱砂与驼色.爱了爱了。
编程狮-妈妈再也不用担心我被程序猿打了
推荐理由：作为一名设计师,不仅要垂直发展深耕我们的设计技能，更要会横向了解一些前端的知识.既能减少组，内讨论的沟通成本,又可以提高跟程序爸爸的亲密度.这款app免费学习前端三剑客的教学教程,不用电脑也可以学代码。
福利素材共享
为答谢客官阅读完此文支持，特准备新人大礼包赠送领取:
精选2000款海报设计模板素材
300套Psd场景素材，ps源文件
300款ps 空间场景素材（出图快，改稿更快）
100+设计电子书 ps 色环插件ps涂抹笔刷
Adobe全家桶软件大全
5000款设计师必用字体等等100个G的设计资源
获取方式：
1.关注小编~
2.评论文章,不限字数~
3.私信“领取”2字即可~
相关问答
web 程序设计 属于 电子 商务吗?web程序设计属于电子商务Web程序设计是电子商务专业的一门重要的专业必修课程。在学生大学一年级开课,通过课程学习,学生能够设计简单的的程序Web程序设计...
设计 专业都需要用到什么软件啊?-ZOL问答作为一名设计师,我需要使用各种专业的设计软件来完成我的工作。以下是我经常使用的几个软件:1.Photoshop:这是Adobe公司开发的一款图像编辑软件,主要用来制作...
大学专业是 电子 信息工程，想依据本专业在大学期间 设计 些 电子 产品，还应该学什么?我是一名教育工作者,我来说说你的疑惑。大学专业是电子信息工程,可以说是学习电子类,偏向弱电方面,如果想自己在大学期间根据自己专业设计一些电子产品,需...我...
哪款中文ACD电路板 设计 软件简单且很实用?ExpressPCB设计软件是一门科学cad应用工具软件也是一款免费的PCB设计软件,简单实用。可以画双层板,目前美国若干知名半导体公司提供的参考设计基本都是采用E...
什么是 电子设计 ?俗称机电一体化,是机械工程与自动化的一种,也是最有前途的一种方向。1、机械电子工程专业包括基础理论知识和机械设计制造方法,计算机软硬件应用能力,能承...
应用电子技术 专业要学哪些课程 - SAN耳 的回答 - 懂得课程嵌入式微机应用、应用技术、电子产品生产组织与管理、现代电子生产线设备(贴片机、波峰焊、回流焊、AOI等)维修维护技术。相关资格证书:通过培...
怎么自制手机 电子 书啊?自制手机电子书的方法如下:1.你可以通过以下几个步骤来自制手机电子书。2.因为手机电子书的格式和特点与传统纸质书籍不同,所以需要采取一些特定的方法和工具...
设计 机器人用什么软件?学习机器人需要掌握的基本信息1.创意与概念设计(造型、渲染):3DSMax,Rhino;2.机械设计(零件设计、装配与制图):AutoCAD,SolidWorks,Creo,UG;3.科...
学 应用电子 技术要学什么课程?应用电子技术专业主要学电工基础、模拟电子技术、数字电子技术、C语言程序设计、智能传感与检测技术、工程制图、电子产品制图与制版、电子产品生产与检验...
电气 电子 专业有哪些常用的专业软件? 申请方EE专业这么广。。。不同方向锁涉猎的内容不同,电脑上装的东西肯定是不同的。我就尽我所知挑几个常见的说一说吧。1.VC,作为C语言的基本工具,这个对...
