让网站运营更简单
让搜索引擎更喜欢的网站
立即咨询
福利，定制网站送小程序， 名额有限，先到先得
ore-a-ux-case-study-d244f891d028
耗时：2周材料：卡片，便签，笔，纸原型工具：Figma使用的UX技术：竞品分析，思维导图，卡片排序，用户画像，系统架构，站点图，用户流程，线框图，原型设计，可用性测试摘要 ：在这个项目中，主要任务是为旧金山最古老的玩具品牌 Jeffreys Toys 设计一个全新的品牌电商网站。
新电商网站最主要的目的是吸引顾客前往线下店铺选购商品，同时也希望通过快递和门店自提的方式来完善线上销售流程，拓展消费群体 该网站需要巩固品牌核心业务价值观：传统，有趣和创意该网站还需要通过强调其庞大的库存体量和手工精选商品来将 Jeffrey’s Toys 和其他电子商务零售商区分开。
该网站的主要业务目标包括：能快速定位商品每一个商品都有单独的详情页用户能成功购买一个或多个商品为爆款商品引流用户分析用户画像谁才是这个网站真正的用户？当我接到这个任务的时候，客户已经绘制出了3个用户画像，每个用户画像都有特定的需求和痛点。
客户绘制的三个用户画像基于三个用户画像，我确定了该网站要满足的用户需求，同时也考虑了Jeffrey’s Toys的需求确定的主要需求是：通过清晰的商品组织分类来提供流畅的电商购物体验通过商品搜索使用户能够快速找到想要的商品。
通过
通过高效的下单结账流程简化购买行为并节省用户时间竞品分析为了获得启发，我确定了3个主要竞品，特别是旧金山的精品玩具店；还有3个玩具零售市场的间接竞品直接竞品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。
间接竞品分析了 Lululemon 、Ikea 和 CVS 竞品分析的目的是比较并找出这些电商网站的共同特征以及 Jeffrey’s Toys 能够脱颖而出的潜在机会竞品分析最重要的收获是了解了不同的电商网站的商品选择模块以及网站整体的布局。
这些信息有助于巩固我第二阶段的研究
比较直接竞品和间接竞品的特征思维导图在完成竞品分析之后，我把这个项目中用户的需求和客户的需求列成了长长的信息清单之后我又通过思维导图来理清了在这个项目中用户的需求和客户的需求思维导图帮助我将信息组织成更清晰的想法，同时在各个想法之间建立层次结构关系。
用来理清信息和想法的思维导图信息架构接下来我通过卡片分类法来构造网站的导航系统，卡片分类法是一种利用人们现有思维模型的研究技术在构造导航系统时，我了解到94种商店中最畅销的商品库存信息拥有如此庞大的商品库存，就很有必要通过清晰易懂的方式组织、分类库存信息，以便用户能够快速的找到他们想要的商品。
卡片分类
卡片分类的初期阶段开放式卡片分类：我要求9位参与调研的用户通过他们自己觉得合理的分类规则将94种商品分类，然后给每个类别加上他们认为能够准确描述该类别的标签这样做的目的是对于网站潜在的商品分类方式及类别名称有一个大致的了解。
封闭式卡片分类：基于开放够清楚判断这些类别是否符合大部分网站用户的分类逻辑。
期望的位置，同时使购物体验更加直观。
站点地图系统架构图为了对用户将会如何浏览网站有一个全面的概述，我绘制一张系统架构图这样做的主要目的是为了了解网站应该给用户提供什么功能以及功能拓展的广度我还通过系统架构图来探索电商网站和实体店铺之间的联系。
系统架构图演示用户将会如何浏览网站用户流程在确定了我需要给用户提供的体验“全局”之后，我为每一个用户画像创建了不同的用户流程，通过不同的用户流程来使购物体验更加符合他们的需求构建用户流程的目的是确定每个用户为了实现各自的预期目标经过的页面和操作步骤。
这不仅能使我专注于每个用户的操作，也使我能够在设计网站的时候将功能拆分，以便给用户提供更佳的购物体验我绘制的第一个用户流程是关于用户画像是 Jenny 的Jenny 最主要的目是为自己的孙子购买初级魔术玩具。
Jenny 的用户流程（如下图所示）表明了她是如何搜索初级魔术玩具，以及为了成功购买她可能采取的几种不同路径
Jenny 的用户流程Debbie 和 Jenny 都希望能有一个高效的下单结账流程，所以很有必要在用户流程中绘制出下单结账流程下图的用户流程显示了Debbie在选定一个特技自行车之后该如何进行结账下单。
通过允许她登录自己的帐号，自动输入她的结账信息来简化她的结账下单流程
Debbie 的用户流程开发阶段草稿在我整理了前期获取的所有信息之后，我就开始着手设计网站基于之前整理出来的用户流程图，我开始绘制几个主要页面的草图，同时快速思考出几个不同的网站布局方案之后我邀请3个用户参与了用户调研，以验证这些方案是否同时满足客户和网站用户的需求。
我个人的想法，我开始使用Figma来绘制线框图。整个过程中，根据优先级不同，优先考虑最能满足网站用户的功能。
网站首页和产品详情页的线框图原型制作1. 主页首页我尽可能的保持简洁，避免用户进入网站时被过多的信息干扰而不知所措首页放置了全局导航、辅助导航和搜索栏，方便用户快捷的找到自己想要的商品首页还放置了新品推荐，因为新品推荐能够展示品牌丰富的库存，同时能为用户提供有用的购买建议。
我想通过介绍 Je
除此之外，我还将用户交流系统放在页脚，这样是为了获得用户想法并在店铺进行活动时通过用户参与提高店铺活动氛围
2. 商品类别页面当用户点击商店按钮或者是某个类别之后，用户将会前往一个列出了该类别下所有商品的商品列表页有个用户画像想要给他的孙子买一个合适他孙子年龄的玩具，所以页面需要一个品类筛选器，同时支持商品按照不同的属性例如年龄、价格和品牌分类也很重要。
除此之外，我还通过面包屑导航来方便用户定位页面位置
商品类别页线框图3. 商品详情页在商品详情页，我希望能够提供尽可能多的商品详情来确保这个商品是用户想要的在页面下方，网站会基于当前商品给用户推荐其他相似商品在商品详情页，产品评论区占了很大一部分，因为用
为了简化下单流程，我设计了一个购物车预览页，用户在购物车预览页可以预览商品信息，用户每次将商品加入购物车后都会出现购物车预览页，在购物车预览页面，用户可以很方便的点击“选好了”按钮而进入结账下单流程
商品详情页线框图4. 购物车预览页当用户点击“选好了”按钮或者是购物车按钮，用户将会进入到一个如下图所示的购物车预览页这是结账下单流程的第一步，用户在购物车可以管理他们所选的商品，作出合适的调整用户在下单时，可以选择到店自提或者是物流配送，设置到店自提是为了引导用户去 Jeffrey’s Toy的线下店铺，同时降低运输成本。
购物车预览页线框图5. 结帐页面客户提供的三个用户画像的主要痛点之一就是想要有一个高效的结账流程，所以我得确保结账下单体验要尽可能的流畅作为一个回头客，用户可以选择登录自己的帐号，并自动保存物流信息和支付信息。
我决定在一个页面上承载全部的结账流程，这样方便用户在结账流程中任何时刻都能编辑信息顶部的进度栏显示了下单结账流程有多少步，用户当前在哪一步以及用户还剩下多少步骤
登录页
下单页
订单查看页6. 其他画面我还创建了一些其他页面，例如订单确认页面订单确认页面明确告知用户结账流程已经完成了，用户还能在订单确认页查看有关订单的其他信息，以供参考我创建了一个店铺联系页面，当用
除此之外我还创建了一个“关于页面”用来着重强调 Jeffrey’s Toys 与其他电商网站例如亚马逊的区别我还在这个页面介绍了Jeffrey’s Toys 长达60年的独特历史，以增强用户对于品牌传统、有趣和创意的商业价值的印象。
订单确认页
联系方式页
公司介绍页可用性测试在完成线框图之后，我就开始的，可用性测试还能巩固网站的功能需求。
我邀请了4位用户进行可用性测试，为了让他们吻合用户画像中的用户特征，我指定了三种用户场景来让他们完成测试这三种用户场景包括：您需要为您的女儿购买一个玩具您会怎么查找商品并完成购买您可以通过什么方法知道 Jeffrey’s Toys 下个月将要举办的店铺活动。
部分用户觉得前往线下店铺的引导部分还可以增强，目前的引导不够。
可网站页面并将Jeffrey’s Toys的视觉风格融入到网站中。
下图展示了我最初设想的UI设计风格UI设计我希望秉持简洁、创意、传统的设计理念
首页
商品分类页
商品详情页编辑总结本文以玩具购物网站这个小案例，清晰地记录了一个较为完整的产品设计流程不论是设计方法，还是记录方法，都可以借鉴运用在工作、汇报和作品集上关于设计方法，我之前有一篇点赞破千的文章可供大家参考：。
每个人的设计方法不同，这个设计流程未必适合所有人，赠送一个小测试给大家玩玩：
本文图文来源于网络，版权属于原作者或网站，内容为作者观点，内容版权归原作者所有、本站不对文章中的任何观点负责，内容只用于提供信息阅读，无任何商业用途。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站（文章、图片、音频、视频）有涉嫌抄袭侵权/违法违规的内容，请联系管理员，一经查实，将立刻删除、维护您的正当权益。
扫一扫，关注我们
