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