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