我花了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.后续步骤
至于设计方法，我曾经发表过一篇关于智虎的文章。感谢您的参考：“我已经分解了一个完整的产品设计过程。我希望它对您也有用。”
1b
发表评论