目的是对网站的潜在产品分类方法和类别名称有一个总体了解(简述商品分类的作用)

我花了14天时间设计了一个玩具购物网站

时间：2周

材料：卡片、便笺、钢笔、纸张

原型工具：figma

使用用户体验技术：竞争产品分析、思维导图、卡片分类、用户肖像、系统架构、网站地图、用户流程、线框、原型设计、可用性测试。

该网站的主要业务目标包括：

可以快速定位货物

每个项目都有一个单独的详细信息页面

用户可以成功购买一个或多个产品

通俗商品渠道

01用户分析1.用户肖像

谁是这个网站的真正用户 当我收到这个任务时，客户画了三幅用户肖像，每幅用户肖像都有特定的需求和痛点。

确定的主要需求是：

通过清晰的商品组织和分类，提供流畅的电子商务购物体验

通过产品搜索，用户可以快速找到他们想要的产品

通过与用户建立品牌关系来建立信任

通过产品细节，确保用户选择正确的产品

通过产品评论帮助用户做出消费决策，并允许用户提供产品反馈

通过高效的订单和结算流程简化采购行为并节省用户时间

2.竞争产品分析

竞争分析最重要的收获是了解不同电子商务网站的商品选择模块和网站的总体布局。这些信息有助于巩固我的第二阶段研究。

3.思维导图

在完成竞争产品分析后，我列出了该项目中用户和客户需求的一长串信息列表。之后，我通过思维导图阐明了该项目中用户和客户的需求。思维导图帮助我将信息组织成更清晰的想法，并在想法之间建立层次关系。

02信息架构

接下来，我通过卡片分类构建网站导航系统，这是一种利用人们现有思维模式的研究技术。在构建导航系统时，我了解了94家商店中最畅销产品的库存信息。

[新闻消息]

1.卡片分类

开放式分类：我要求9名参与调查的用户根据自己合理的分类规则对94种商品进行分类，然后在每个类别中添加他们认为能够准确描述该类别的标签。目的是对网站的潜在产品分类方法和类别名称有一个总体了解。

封闭式卡片分类：基于开放式卡片分类的结果，我从最常见的类别标签中创建了13个预定类别。然后，我进行了封闭式卡片分类。我邀请了20名参与调查的用户，将这些商品逐一归类到我之前订购的13个类别中。封闭式卡片分类帮助我在设计之前清楚地判断这些类别是否符合大多数网站用户的分类逻辑。

上图显示了通过卡片分类获得的13种商品类别

2.网站地图

根据卡片分类和竞争产品分析的结果，我绘制了网站的网站地图，以明确整个网站的框架结构。这是为了确保所有产品都放置在用户期望的位置，并使购物体验更直观。

3.系统架构图

上图是一个系统架构图，显示了用户将如何浏览网站

4.用户进程

在确定了我需要向用户提供的“全局”体验后，我为每个用户肖像创建了不同的用户流程，并通过不同的用户过程使购物体验更符合他们的需求。构建用户流程的目的是确定每个用户为实现其预期目标而经过的页面和操作步骤。这不仅使我能够专注于每个用户的操作，还使我能够在设计网站时分割功能，从而为用户提供更好的购物体验。

我画的第一个用户流程是关于Jenny的用户肖像。珍妮的主要目的是给她的孙子买主要的魔法玩具。Jenny的用户流程显示了她如何搜索基本魔法玩具，以及她可能采取的几种不同途径来成功购买它们。

上图显示了Jenny的用户进程

Debbie和Jenny都希望有一个高效的订单和结算流程，因此有必要在用户流程中绘制订单和结算过程。下图中的用户流程显示了Debbie在选择特技自行车后如何结账并下订单。通过允许她登录自己的帐户并自动输入结帐信息，她可以简化结帐和订购流程。

03开发阶段1.草案

在我整理了早期获得的所有信息后，我开始设计网站。根据之前整理出的用户流程图，我开始绘制几个主页的草图，并迅速想出了几个不同的网站布局方案。之后，我邀请了三位用户参与用户调查，以验证这些解决方案是否同时满足客户和网站用户的需求。

上图是网站首页和分类页面的初稿

2.接线框图

基于用户对草图的反馈和我的个人想法，我开始使用figma绘制线框。在整个过程中，根据不同的优先级，优先考虑最能满足网站用户需求的功能。

上图是网站主页和产品详细信息页面的接线图

04.1.主页

我尽量保持主页尽可能简单，以避免用户在进入网站时被太多信息所迷惑。

在页脚中，我输入了其他用户可能需要的信息。此外，我还在页脚中加入了用户沟通系统，通过用户在门店活动中的参与，获取用户的想法，改善门店的活动氛围。

2.商品分类页面

当用户单击商店按钮或类别时，用户将进入产品列表页面，该页面列出了该类别下的所有产品。用户肖像想要购买适合其孙子年龄的玩具，因此该页面需要类别过滤器，并且支持根据年龄、价格和品牌等不同属性对商品进行分类也很重要。此外，我还使用面包屑导航帮助用户定位页面。

3.产品详细信息页面

在产品详细信息页面上，我希望提供尽可能多的产品详细信息，以确保产品符合用户的需求。

在页面底部，网站将根据当前产品向用户推荐其他类似产品。在产品详情页面上，产品评论区占了很大一部分，因为用户可以在产品评论区反馈产品信息，这便于建立用户的信任，同时，用户可以通过其他用户的评论做出更智能的购买决策。

为了简化下单过程，我设计了一个购物车预览页面。用户可以在购物车预览页面上预览商品信息。每次用户将商品添加到购物车时，购物车预览页面都会出现。在购物车预览页面上，用户可以轻松单击“选定”按钮进入结账订单下订单流程。

4.购物车预览页面

5.结账页面

客户提供的三张用户画像的主要痛点之一是要有一个高效的结账流程，因此我必须确保结账和订购体验尽可能顺畅。作为回头客，用户可以选择登录自己的账户，并自动保存物流信息和付款信息。

6.其他图片

我还创建了一些其他页面，例如订单确认页面。订单确认页面清楚地告诉用户结算过程已经完成。用户还可以在订单确认页面上查看有关订单的其他信息以供参考。

7.可用性测试

完成线框后，我开始绘制网站原型以进行可用性测试。

这使我能够评估用户将如何与网站互动，以及网站是否满足用户的基本需求。在UI设计之前，有必要通过中等保真度原型进行可用性测试，以获得潜在用户的真实和关键反馈。可用性测试还可以整合网站的功能需求。

我邀请了四位用户进行可用性测试。为了使它们与用户画像中的用户特征相匹配，我指定了三个用户场景，让它们完成测试。这三种用户场景包括：

你需要给你女儿买个玩具。您将如何找到货物并完成购买。

当你在网站上找不到你想要的玩具时，你将如何查询和购买它们。

以下是我通过可用性测试得到的用户反馈：

总的来说，用户可以轻松找到他们想要的产品和信息

在结账过程中，促销活动会分散用户的注意力

一些用户认为可以加强对线下商店的指导，但目前的指导还不够。

8.后续步骤

至于设计方法，我之前曾在《智湖》上发表过一篇文章，我对此表示赞赏，供您参考：“我已经分解了一个完整的产品设计过程，希望它对您也有用。”