▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。SESA（印度尼西亚排名第一的杂货网店）提出了对重新设计现有网店的诉求，本文作者接到需求后，从发现、构思、设计几个阶段对该项目进行了优化，并详细展示设计流程，一起来跟随作者了解完整过程吧。
![]()
在这个 UI/UX 案例研究中，我将解释我是如何从头开始重新设计杂货网店 SESA ，讲述我的设计流程以及在此过程中做出的决定。1. 项目背景
1. Project Background
SESA 看了我的案例研究后在 LinkedIn 上联系了我 —— Tasty Green 提出了他们对重新设计现有 PWA【1】 以用于桌面和移动断点的要求。而且，我决定接受这个挑战！（【1】PWA：（渐进式 Web 应用程序）是一种使用各种技术来增强Web应用程序功能的理念，它可以使网站体验更好并模拟一些本机功能，例如通知推送、在移动端使用标准化框架，Web应用程序具有与本机应用程序类似的体验。）作为一名购物者，我喜欢在当地的杂货店购物，并注意到老百姓面临的一些问题……2. 我的角色
2. My Role
用户体验研究、用户界面设计、原型设计、文案写作、艺术指导（注意：所有设计组件和数据严格属于 SESA ™ 并拥有版权。请不要再创或重新分发。）
3. 方法论
3. Methodology
![]()
4. 第一阶段：发现
4. Phase 1: Discovery
1）🕵🏻 利益相关者访谈
我与 SESA 的创始人和产品经理进行了 2-3 次会议，以更好地了解他们的产品并找到业务目标、用户需求和技术限制之间的交集。
2）😨 问题陈述
• 低转化率：杂乱的界面使用户更难浏览产品及其变化。• 对手机用户不友好：几乎 90% 的用户通过手机访问网站，但手机端设计不符合用户期望。• 手机网站上令人困惑的用户界面和体验：目前，他们正在为其网站使用现成的模板，该模板并未根据品牌和目标受众进行优化。因此，需要很长时间才能加载。3）💁🏻 客户真正想要什么？
4）📉 成功指标
• 让健康的生活方式更受欢迎、更实惠、更轻松、更愉快、更美味
5）定义目标受众
5. 第二阶段：构思
5. Phase 2: Ideation
1）🧍🏻 人物卡
• 为了与目标受众产生共鸣，我根据目标受众标准创建了 2 个角色。• 我创建了两个完全不同的角色来理解来自两个不同背景的用户旅程。年龄：25岁，专业：时尚艺术，状态：单身，职业：时尚博主，地点：巴厘，文化程度：高“我认为美随处可见。寻常人是丑得东西，我能看到它的另类美。”个人经历：Rheza 是印度尼西亚有名的时尚博主和油管博主。她想要保持健康。她每天锻炼，吃健康的食物。她与各个品牌合作，向她的粉丝赞助他们的产品。她独自生活，并且想要独立的生活。- 想要保持健康，这样她看起来美丽动人并且以后能获得更多品牌合作
- 虽然她充满活力，但是对送货延迟和每日杂货店花费感到挫败
年龄：35岁，专业：商课，状态：已婚，职业：时尚博主，地点：雅加达，文化程度：中“我相信健康的身体寓于健康的心灵。我希望家人健康安全因为他们对我来说就是全世界。我也参与各种可持续的基础社区关系当中。”个人经历：Jane 已婚，生了一对龙凤胎。除了妈妈的身份，她还管理100名员工的公司。她的公司专注于电子服务，伴随着客户高要求和激烈竞争。她是一名母亲，一位妻子，于此同时还是一名成功的女企业家感到心满意足。- 保持家人健康安全只为他们提供最好的产品，愿意为此付出更多（决策和保证）
- 她没有从当地杂货店买到优质产品。尽管她没有得到健康的物品，她甚至付了更多
2）🧑🏻🦯理想用户之旅
当我开始完成和理解更多用户的挫折时，我想放大用户的生活方式。因此，我可以想出一个简单的方法来融入他们的生活。3）🚗 旅程地图
为了更深入地理解挫折感，我使用了“旅程分析”用户体验方法，并将旅程分为五个阶段——
![]()
旅程地图
![]()
指出旅程地图中的挫败感
4）🏋🏻 竞品分析
• 它帮助我 了解竞争对手在做什么 以及 他们如何解决这些问题。• 它还帮助我从这些网站获得负面评论，并通过解决我们可以让自己脱颖而出的问题。Happyfresh（同一个地方囊括了所有的杂货店）- 为什么在Happyfresh购物？展示主要重点，货到付款/在线支付
5）客户评论（竞品）
• 我从竞品那里收集了用户的负面评论，并专注于通过我们的设计解决它们。这个应用程序真的令人失望，我的订单应该最晚在下午 1 点到达，但它从来没有出现过。在我决定给客服打电话后，结果发现我的订单被送错了地址，纠正之后，我终于拿到了我的蔬菜，但是番茄变得黏糊糊的。我要求退款，但客户服务实际上没有回复。糟糕的经历，不要相信这个应用程序！糟糕的的应用程序。你甚至无法取消订单，从而使新订单的付款更加困难，因为假定已取消订单的所有价格都与正在进行的订单相结合。常见问题解答选项对解决此问题几乎没有帮助。不推荐。应用程序不好，需要改进，修复错误，调快响应时间速度，尤其是付款的时候。如果你以前失败或放弃付款交易，请不要选择通过虚拟账户付款。但可怕的是客户服务回复，回复非常慢，可以说根本没有回复。我的订单在预定日期后一天到达，缺少 1 件商品，没有任何确认。我确实聊天并通过电子邮件向他们询问我的订单交付但根本没有回复。绝对会卸载！！！annanovalia dewii 2020.2.4我已经在周日下单并完成了付款，订单应该在周二早上6点到9点送达。已经是下午1点了，我的订单直到现在才送达，糟糕的系统，糟糕的服务，没有选择。退款也没有跟踪订单。在这里订购能有什么体验。Ardian Sapoetro 2019.1.30第一次体验=真的很糟糕。根本没有确认缺少的商品。投诉后，他们给了我们缺少商品等价值的代金券，但我需要支付额外的运费？？！！有时包装不好。蔬菜送到时，塑料里面是湿的。当它应该用纸包裹时它会腐烂。有时水果和蔬菜的质量不好，尤其是打折的时候。在你为订单付款后，还有不少缺少的商品。你得到的不是退款，而是代金券。他们的品种太少，尤其是水果。添加一些选择。我仍然会给这个应用程序一个未来改进的机会。客户服务也总是很忙，并不能真正令人满意地回答你的问题。Sapto Handriyanto 2020.10.29我曾经喜欢这个应用程序，但现在它变得越来越荒谬。我通常使用电子钱包付款，但该选项不再可用，对于我通常购物的商店，CC(信用卡支付)是唯一可用的付款方式。此外，每次打开应用程序时，送货费越来越贵。它不仅不适用于当天交货，也不适用于2-3天的提前购物。我必须说奇怪和愚蠢。如果它是一个错误，请修复它。但如果你故意这样做，对我来说很容易卸载。应用程序不是用户友好的。产品供应有限。购物者没有受过良好的产品培训——很大程度上取决于购物者的个人知识。没有必要选择交货时间，因为他们已经根据你选择的交货时间预订了快递员。我的交货延迟了2小时，而购物者在5小时前完成了购买。我的肉类订单没有冷藏。该应用程序已经有2周没有工作了。你将物品添加到购物车，但当你打开购物车时，它一片空白。在许多不同的商店尝试了很多产品，但仍然相同。该应用程序已更新到最新版本。最差的服务之一。浪费了2个小时等待我的订单。重点是节省不去杂货店的时间。购买杂货时，我使用折扣券并支付了全部金额，当购物者到达门口时，即使在显示我的购买细节和折扣后，又浪费了30分钟询问折扣金额。他拒绝出示原始收据，因为他做了一些替换，所以我应该怎么计算。Amanda Buchari 2020.11.20我从此应用程序中选择的付款方式与送货员应用程序上出现的付款方式不同步。我选择用借记卡付款，但最后不得不在送货员来时支付现金，因为在他的应用程序上我的订单是电子钱包或货到付款。我从我的应用程序中没有选择的付款方式。这就是你的应用程序系统的工作方式吗？除非应用程序。为什么我的区域无法访问所有市场商店？愚蠢的...这是新冠应时期，我们需要所有送货服务，我们不想出去买我们需要的东西，请为我所在的地区做点什么。Salimah Maulana 2020.3.25缺货，如果最终在应用程序中有选项，但当你选择它时说缺货时，线上什么都一样，你不必展示它。没有库存，没有交货跟踪，没有延迟交货，没有取消订单，没有退款。请在接受订单前了解如何处理超额订单并升级你的系统。非常烦人的是应用程序无法区分哪个缺货，哪个仍然可用。所以在某种程度上，需要很长时间才能完成购物清单。Derry Motor Bridal 2020.5.23我经常在这里购物，通常还不错..即使我已经是明星会员了...所有一起的订单都烂了..胡萝卜干瘪了，一些pokcoi坏了..WA也没有付款。公平评论：我一直都很好地使用应用程序和服务，但如果这是由于新冠疫情或假日季节每个人都在家购买的旺季，最好避免使用这些应用程序。Buditeguh Prasetyo 2020.3.27该信息不易理解，没有取消。首先，订单没有发送...Agnesia Margaretha 2019.8.8我想注册并登录gmail(谷歌邮箱)，但它不工作也强制突然注销，这是一个最糟糕的应用程序，最好不要再使用这个应用程序了难以置信，我下单订了11件商品，结果发现只有3件商品。他们从不回复或接你的电话。我试图用各种可能的方法（电子邮件、WA、电话）联系他们，但都没有回复。这不是可靠的电商。在印度尼西亚有很多外国人，请考虑在应用程序上选择使用英语，以便更容易了解ni 在销售什么以及如何订购！这将有很大的帮助！谢谢你
6. 第三阶段：用户界面设计
6. Phase 3: UI Design
1）✍🏼 网站地图
2）🎨草图
![]()
草图（桌面断点）
![]()
草图（移动断点）3）📃 线框
![]()
线框（桌面断点）
![]()
线框（移动断点）
3）📵 可用性测试
我根据我最初的想法创建了线框来展示客户并执行未经审核的用户测试。我与目标用户分享了原型链接， 。基于此，我对线框进行了一些更改并创建了高保真模型。• 在测试之前，用户必须手动搜索他的位置才能收货。我修复了它并创建了一个对话框，如果位置功能打开，它可以自动检测位置，否则在用户登录网站后手动搜索位置。• 通常会在卡片上 显示产品的变体以及定价和所有其他详细信息。客户想要一键购物，所以当用户点击 Variant list 时，我在卡片上进行了转换。它会简单地翻转并展示所有带有价格和报价详细信息的变体，如下所示：
![]()
将变体产品添加到购物车早些时候，我展示了网站上最新优惠的3个部分 —— 网页横幅、特别促销和分类优惠。在测试中，我发现用户对优惠感到不知所措，看不到闪购。因此，我删除了特别促销部分，并使优惠清晰可见（不混乱）。
![]()
促销横幅• 为了更容易访问每个产品（无论用户在哪个页面），所有页面中都提供了一个 粘性产品标题。用户可以直接选择 杂货类型或将鼠标悬停在其上 以获得子类别和该类别的推荐博客文章。
![]()
悬停时显示子类别
4）💻桌面断点
5）📱 手机断点
我在优化时发现的最具体的问题是为手机设备创建响应式设计，但我做到了。• 我将每个类别分为不同的部分，并尝试给他们正确的位置，同时牢记他们的层次结构。• 我为导航栏使用了汉堡菜单，并将搜索栏与它对齐。• 我还为移动断点提供了一个 底部导航栏，以便于访问，因为 90% 的目标受众是手机用户。
![]()
底部导航栏
![]()
模型（手机断点）
6) 🥦 重新设计前后对比
![]()
7）🐳 我的学习
这是我第一次做这么大的项目，了解国外用户需要花费很多时间。尽管团队在进行研究和调查方面帮助了我很多。由于公司条款，我无法在此处分享数据，但您可以看到最终输出并感受到我的辛勤工作。• 在卡片上显示价格对我来说是一个挑战。印尼盾 (IDR) 汇率高于美元。• 在线框图中，我在卡片上显示了每个产品的评级，但后来我发现他们只有一个品牌产品。所以，这里没有比较的地方。最后，我决定仅在“产品详细信息”页面上显示客户评分和评论。• 客户希望他们的网站有两种语言 —— 印度尼西亚语和英语。用印度尼西亚语设计它对我来说很典型。所以，如果翻译成印度尼西亚语，我对卡片中的字数限制持谨慎态度。无论如何，我从这个项目中学到了很多东西，并想用这些知识来解决更典型和更广泛的目标受众问题。差不多就是这样。这是我重新设计网站的整个过程。希望您发现这篇文章非常有帮助和有见地。如果您想与我分享任何内容，请与我联系。我很乐意接受。![]()
原文：Redesigning Indonesia’s #1 Online Grocery Store — UI/UX Case Study by Om Arya Muzli - Design Inspiration
作者：Om Arya
译者：周佳悦
审核：李泽慧、张聿彤
编辑：孙淑雅
本文翻译已获得作者的正式授权（授权截图如下）
TCC 设计情报局欢迎小伙伴加入，一起交流设计知识，了解全球设计资讯，锻炼英文能力，发掘更多可能性～添加小助手微信，备注「社群」，即可加入读者群。![]()