案例研究：谁不喜欢吃小蛋糕呢？关于蛋糕店的电子商务应用程序-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协议。
软网推荐：文件一“转身”离了软件也能用
在使用图、文、音乐或压缩包时，我们往往首先会考虑用什么软件来打开它们。其实，如果将这些文件转换为EXE格式，就可以在脱离相关应用软件的情况下，直接运行EXE文件进行阅读或欣赏了。
1. 脱离阅读器 仍能阅读PDF
利用PDF2EXE软件，完成从PDF格式到EXE格式的转换，就能让电子书脱离阅读器而直接打开阅读了。
运行PDF2EXE软件后，首先设定一些转换选项，主要包括是否禁止保存或打印某些方面的内容、设置口令等。选项设置完成之后，点击工具栏上的第一个按钮，打开要转换的PDF文档。这时，页面右侧会出现PDF文档的预览页面。通过工具栏上的相应按钮，可进行页面的切换、旋转、缩放、幻灯片预览等操作（图1）。
设置好选项之后，单击工具栏上的磁盘按钮（或直接按下Ctrl+S组合键），打开“另存为”对话框，将“保存类型”选择为“Executable Files(*.exe)”，为EXE文件命名，点击“保存”按钮，即可获得转换后的EXE自动运行文件（图2）。
2. 图片相册 不用软件也演示
借助于一款PicturesToExe软件，我们可以将图片制作成能够独立运行的EXE电子相册，让图片脱离图片管理软件自动演示。
启动PicturesToExe，打开图片所在的目录，通过软件底部的Slides选项卡，设置图片演示的顺序；通过Timeline选项卡，以时间轴的方式控制每一幅图片出现的时间。点击窗口底部的Slide Options按钮，在弹出的窗口中选择Transition选项卡，可在丰富多彩的过渡效果中进行选择（图3）。
最后，点击Publish菜单，选择Executable File for PC（EXE）（或直接按下F9键），生成EXE自动演示文件。如果选择Safe Executable File for Internet选项，则可生成能在Internet上安全使用的EXE文件。选择Executable File for Mac（或直接按下F8键），生成苹果Mac上能够使用的图片自动演示文件（图4）。
3. 不用压缩软件 解开压缩包
我们平时使用文件压缩包，一般都需要利用压缩软件来解压。实际上，如果利用压缩软件（如“好压”）自带的格式转换工具，将压缩包转换为EXE格式的文件，就可以实现脱离压缩软件的文件自解压了。
首先在资源管理器中选中某个压缩包，右键单击该文件并选择“用好压打开”（图5）。
在随后弹出的好压窗口中，点击工具栏上的“自解压”按钮；选择自解压模块，然后指定自解压文件的路径，点击“确定”按钮，即可生成EXE格式的自解压压缩包文件（图6）。
4. 离了播放器 音乐也能播放
MP3音乐文件也可以脱离播放器独立播放。我们只需利用一个MP3TOEXE软件，将MP3文件转换为EXE文件即可。
启动MP3TOEXE软件，点击“歌曲文件”框后的“选择”按钮选择MP3歌曲文件；随后，EXE文件框中会自动出现同名的EXE文件名，若需要更改EXE文件的存放路径和文件名，点击该框之后的“选择”按钮，指定一个新的路径和文件名（图7）。最后，点击“快速转换”用最快的速度将选定的MP3文件转换为能够独立播放的EXE文件；如果选择“优化转换”按钮，转换速度会慢一些，但质量会有所提高。
转换完成之后，以管理员的方式运行转换所得的EXE文件，即可开启黑底绿字的播放窗口，自动播放音乐了（图8）。
小提示：该软件不仅支持转换MP3格式的音乐文件，还能支持WMA、MID、WAV等常见音乐格式到EXE的转换。
相关问答
怎样取消平板电脑禁止安装“android 电子程序 ”-ZOL问答在设置那里,安全-允许安装位置来源程序,打开就好了。亲可能你装的不是安卓的额...设置里的应用程序设置应用程序未知来源啥也不说了···国产杂牌子我们...
excel 2016 电子 表格 应用程序 布局如何?excel2019是excel2016的更新版,界面布局整体不变,但优化表格配色等多项内容。excel2019是excel2016的更新版,界面布局整体不变,但优化表格配色等多项内容。
kindle无法启动选定的 应用程序 ，这是怎么回事?您好,可能有几个原因导致Kindle无法启动选定的应用程序:1.应用程序未正确安装:请确保已正确下载并安装该应用程序。2.应用程序不兼容Kindle设备:请确...
exe 应用程序电子 书怎么转换word?exe应用程序电子书转换为Word文档是一个复杂的过程,因为exe文件通常是编译后的二进制程序,而不是纯文本或可编辑的文档格式。通常,exe文件不具备直接转换为Wor...
你好，我的电脑桌面上的图标都变成 电子 表格的图标了，所有 应用程序 都打不开了，请问怎么解决?到开始---程序中找到office中的电子表格,点右键发送到桌面快捷方式就行了到开始---程序中找到office中的电子表格,点右键发送到桌面快捷方式就行了
电子商务 : 应用软件 不包含() A通用软件 B实用软件 C语言处理...选C语言处理程序。我查了百度,就这个不属于应用软件关键字,竞价排名可以选择部分跨界经营范围的计算机软件
提示找不到 应用程序 ，怎么解决?_会计学堂[回答]https://inv-veri.chinatax.gov.cn你好,你登陆这个网站里面有一个相关下载,在这里面下载。
下载税务UKey的时候，显示找不到 应用程序 _会计学堂[回答]Ukey用户管理工具下载网址:https://inv-veri.chinatax.gov.cn/xgxz.html
(APP)也在逐渐为人们熟知、 应用 。新闻、阅读、社交、 电子 ...[最佳回答]本题考查了科技的重要性,依据课本知识分析材料可知,科技带来社会生活的变化说明,我们的生活与科技息息相关,科技提高了人们生活的科技含量和生活质...
手机显示禁止安装非 电子 市场提供的 应用 程-ZOL问答尊敬的三星用户,您好!根据您的描述,建议您:手机设置-应用程序-未知来源打钩(允许安装非电子市场提供的应用程序)祝您生活愉快!不受影响的。...
