在这个 UI/UX 案例研究中，我将阐明我是如何从头开始重新设计杂货网店 SESA ，讲述我的设计流程以及在此过程中做出的决定。
一、项目背景
SESA 看了我的案例研究后在 LinkedIn 上联系了我 —— Tasty Green 提出了他们对重新设计现有 PWA【1】以用于桌面和移动断点的哀求。而且，我决定接管这个寻衅！
（【1】PWA：（渐进式 Web 运用程序）是一种利用各种技能来增强Web运用程序功能的理念，它可以使网站体验更好并仿照一些本机功能，例如关照推送、在移动端利用标准化框架，Web运用程序具有与本机运用程序类似的体验。）
UX 案例研究：设计美味绿色食品杂货店 App
作为一名购物者，我喜好在当地的杂货店购物，并把稳到老百姓面临的一些问题……
二、我的角色
用户体验研究、用户界面设计、原型设计、文案写作、艺术辅导
（把稳：所有设计组件和数据严格属于 SESA ™ 并拥有版权。请不要再创或重新分发。）
三、方法论
四、第一阶段：创造1. 利益干系者访谈我与 SESA 的创始人和产品经理进行了 2-3 次会议，以更好地理解他们的产品并找到业务目标、用户需求和技能限定之间的交集。
并且可以总结为：
2. 问题陈述低转化率：凌乱的界面利用户更难浏览产品及其变革。对手机用户不友好：险些 90% 的用户通过手机访问网站，但手机端设计不符合用户期望。手机网站上令人困惑的用户界面和体验：目前，他们正在为其网站利用现成的模板，该模板并未根据品牌和目标受众进行优化。因此，须要很永劫光才能加载。
3. 客户真正想要什么？一键购物更大略的用户界面和用户体验无缝产品搜索用户很随意马虎看到折扣和优惠搜索网站时的熟习度和大略性4. 成功指标增加我们订单的均匀代价让更多人理解我们的品牌也增加了用户和订单无缝用户体验让康健的生活办法更受欢迎、更实惠、更轻松、更愉快、更美味供应和教诲轻松康健转变为快乐美好生活5. 定义目标受众五、第二阶段：构思1. 人物卡为了与目标受众产生共鸣，我根据目标受众标准创建了 2 个角色。我创建了两个完备不同的角色来理解来自两个不同背景的用户旅程。（1）Rheza Aulia丽莎·奥利亚
年事：25岁，专业：时尚艺术，状态：单身，职业：时尚博主，地点：巴厘，文化程度：高
“我认为美随处可见。平凡人是丑得东西，我能看到它的另类美。”
个性：充满活力的，自我导向的，有趣的
类型：脸书、油管、ins 照片墙
支付媒介：数字付款，现金/支票
个人经历：Rheza 是印度尼西亚有名的时尚博主和油管博主。她想要保持康健。她每天磨炼，吃康健的食品。她与各个品牌互助，向她的粉丝资助他们的产品。她独自生活，并且想要独立的生活。
核心需求：
想要保持独立，并成为印度尼西亚顶流网红想要能够自我管理，并使得人们意识到自我管理想要保持康健，这样她看起来俏丽动人并且往后能得到更多品牌互助挫败感：
她保持独立，并没有很多关于杂货店购物的知识虽然她充满活力，但是对送货延迟和逐日杂货店花费感到挫败市场上并没有过多的选择和比较（2）Jane Ani简安妮
年事：35岁，专业：商课，状态：已婚，职业：时尚博主，地点：雅加达，文化程度：中
“我相信康健的身体寓于康健的心灵。我希望家人康健安全由于他们对我来说便是全天下。我也参与各种可持续的根本社区关系当中。”
个性：敏感的，有年夜志壮志的，忠实的
类型：美国宇航局、华为、ins照片墙
支付媒介：数字付款
个人经历：Jane 已婚，生了一对龙凤胎。除了妈妈的身份，她还管理100名员工的公司。她的公司专注于电子做事，伴随着客户高哀求和激烈竞争。她是一名母亲，一位妻子，于此同时还是一胜景利的女企业家感到心满意足。
核心需求：
自满感：只接管生命中最好的（自我实现）康健是人生的重中之重（故意识的选择）保持家人康健安全只为他们供应最好的产品，乐意为此付出更多（决策和担保）挫败感：
由于日程繁忙，她并不能去杂货店购物她没有从当地杂货店买到优质产品。只管她没有得到康健的物品，她乃至付了更多想要确保她的孩子们在所有东西中拥有最好的2. 空想用户之旅当我开始完成和理解更多用户的挫折时，我想放大用户的生活办法。因此，我可以想出一个大略的方法来融入他们的生活。
3. 旅程舆图
为了更深入地理解挫折感，我利用了“旅程剖析”用户体验方法，并将旅程分为五个阶段——
并在这些阶段 强调用户——
旅程舆图
指前途程舆图中的挫败感
4. 竞品剖析它帮助我理解竞争对手在做什么以及他们如何办理这些问题。它还帮助我从这些网站得到负面评论，并通过办理我们可以让自己脱颖而出的问题。
图片翻译如下：
我们从Sayurbox中学到了什么？
Sayurbox（杂货网店）
标题中的全局搜索、种别和位置详细信息，首屏中最多 5 个轮播图横幅，主页中的每个部分都该当分类，特色商品身分，主页底部的常见问题解答，产品信息、营养和益处、储存方法、农人和供应商，检讨时，问Mobile no.，产品包装：塑料/非塑料交货韶光段图片翻译如下：
我们从 Happyfresh 中学到了什么？
Happyfresh（同一个地方席卷了所有的杂货店）
首屏部分中的位置，带有主图标题中的措辞和个人信息展示顶级超市和杂货店为什么在Happyfresh购物？展示紧张重点，货到付款/在线支付企业交付在产品页面等分类和过滤产品评论和评级顶部横幅展示购物车的右侧边栏自定义您的购物车订单图片翻译如下：
我们从 Brambang 中学到了什么
Brambang（杂货网店）
全局搜索、登录和购物车首屏（6）中的横幅好评限时匆匆销从 Brambang购买的上风会员操持欲望清单：列一个清单5. 客户评论（竞品）我从竞品那里网络了用户的负面评论，并专注于通过我们的设计办理它们。它帮助我更好地理解用户。图片翻译如下：
Sayurbox 客户评论
GG Branch 2020.11.1
这个运用程序真的令人失落望，我的订单该当最晚不才午 1 点到达，但它从来没有涌现过。在我决定给客服打电话后，结果创造我的订单被送错了地址，纠正之后，我终于拿到了我的蔬菜，但是番茄变得黏糊糊的。我哀求退款，但客户做事实际上没有回答。糟糕的经历，不要相信这个运用程序！
Ida Wirawaty 2020.3.17
糟糕的的运用程序。你乃至无法取消订单，从而使新订单的付款更加困难，由于假定已取消订单的所有价格都与正在进行的订单相结合。常见问题解答选项对办理此问题险些没有帮助。不推举。
Sari Tambun 2020.3.27
运用程序不好，须要改进，修复缺点，调快相应韶光速率，尤其是付款的时候。如果你以前失落败或放弃付款交易，请不要选择通过虚拟账户付款。但恐怖的是客户做事回答，回答非常慢，可以说根本没有回答。我的订单在预定日期后一天到达，短缺 1 件商品，没有任何确认。我确实谈天并通过电子邮件向他们讯问我的订单交付但根本没有回答。绝对会卸载！
！
！
annanovalia dewii 2020.2.4
我已经在周日下单并完成了付款，订单该当在周二早上6点到9点投递。已经是下午1点了，我的订单直到现在才投递，糟糕的系统，糟糕的做事，没有选择。退款也没有跟踪订单。在这里订购能有什么体验。
Ardian Sapoetro 2019.1.30
第一次体验=真的很糟糕。根本没有确认短缺的商品。投诉后，他们给了我们短缺商品等代价的代金券，但我须要支付额外的运费？？！
！
Leadsin99er 2019.12.13
有时包装不好。蔬菜送到时，塑料里面是湿的。当它该当用纸包裹时它会糜烂。有时水果和蔬菜的质量不好，尤其是打折的时候。在你为订单付款后，还有不少短缺的商品。你得到的不是退款，而是代金券。他们的品种太少，尤其是水果。添加一些选择。我仍旧会给这个运用程序一个未来改进的机会。客户做事也总是很忙，并不能真正令人满意地回答你的问题。
图片翻译如下：
Happyfresh 客户评论
Sapto Handriyanto 2020.10.29
我曾经喜好这个运用程序，但现在它变得越来越荒谬。我常日利用电子钱包付款，但该选项不再可用，对付我常日购物的商店，CC(信用卡支付)是唯一可用的付款办法。此外，每次打开运用程序时，送货费越来越贵。它不仅不适用于当天交货，也不适用于2-3天的提前购物。我必须说奇怪和屈曲。如果它是一个缺点，请修复它。但如果你故意这样做，对我来说很随意马虎卸载。
Mona Kassim 2020.12.6
运用程序不是用户友好的。产品供应有限。购物者没有受过良好的产品培训——很大程度上取决于购物者的个人知识。没有必要选择交货韶光，由于他们已经根据你选择的交货韶光预订了快递员。我的交货延迟了2小时，而购物者在5小时前完成了购买。我的肉类订单没有冷藏。
Sarah OG 2020.11.26
该运用程序已经有2周没有事情了。你将物品添加到购物车，但当你打开购物车时，它一片空缺。在许多不同的商店考试测验了很多产品，但仍旧相同。该运用程序已更新到最新版本。
Jaya sakthi 2020.10.1
最差的做事之一。摧残浪费蹂躏了2个小时等待我的订单。重点是节省不去杂货店的韶光。购买杂货时，我利用折扣券并支付了全部金额，当购物者到达门口时，纵然在显示我的购买细节和折扣后，又摧残浪费蹂躏了30分钟讯问折扣金额。他谢绝出示原始收据，由于他做了一些更换，以是我该当怎么打算。
Amanda Buchari 2020.11.20
我从此运用程序中选择的付款办法与送货员运用程序上涌现的付款办法不同步。我选择用借记卡付款，但末了不得不在送货员来时支付现金，由于在他的运用程序上我的订单是电子钱包或货到付款。我从我的运用程序中没有选择的付款办法。这便是你的运用程序系统的事情办法吗？
ZULLL 2020.11.14
除非运用程序。为什么我的区域无法访问所有市场商店？屈曲的…这是新冠合时代，我们须要所有送货做事，我们不想出去买我们须要的东西，请为我所在的地区做点什么。
图片翻译如下：
Brambang 客户评论
Salimah Maulana 2020.3.25
缺货，如果终极在运用程序中有选项，但当你选择它时说缺货时，线上什么都一样，你不必展示它。
Eltania 2020.3.31
没有库存，没有交货跟踪，没有延迟交货，没有取消订单，没有退款。请在接管订单前理解如何处理逾额订单并升级你的系统。
Christina M 2020.3.28
非常烦人的是运用程序无法区分哪个缺货，哪个仍旧可用。以是在某种程度上，须要很永劫光才能完成购物清单。
Derry Motor Bridal 2020.5.23
我常常在这里购物，常日还不错..纵然我已经是明星会员了…所有一起的订单都烂了..胡萝卜干瘪了，一些pokcoi坏了..WA也没有付款。公正评论：我一贯都很好地利用运用程序和做事，但如果这是由于新冠疫情或假日时令每个人都在家购买的旺季，最好避免利用这些运用程序。
Buditeguh Prasetyo 2020.3.27
该信息不易理解，没有取消。首先，订单没有发送…
Agnesia Margaretha 2019.8.8
我想注册并登录gmail(谷歌邮箱)，但它不事情也逼迫溘然注销，这是一个最糟糕的运用程序，最好不要再利用这个运用程序了
Andri Kristanto 2020.4.8
难以置信，我下单订了11件商品，结果创造只有3件商品。他们从不回答或接你的电话。我试图用各种可能的方法（电子邮件、WA、电话）联系他们，但都没有回答。这不是可靠的电商。
Elf_ycel 2020.2.16
在印度尼西亚有很多外国人，请考虑在运用程序上选择利用英语，以便更随意马虎理解ni 在发卖什么以及如何订购！
这将有很大的帮助！
感激你
六、第三阶段：用户界面设计1. 网站舆图
2. 草图草图（桌面断点）
草图（移动断点）
3. 线框
线框（桌面断点）
线框（移动断点）
4. 可用性测试
我根据我最初的想法创建了线框来展示客户并实行未经审核的用户测试。我与目标用户分享了原型链接， 。基于此，我对线框进行了一些变动并创建了高保真模型。
在测试之前，用户必须手动搜索他的位置才能收货。我修复了它并创建了一个对话框，如果位置功能打开，它可以自动检测位置，否则在用户登录网站夹帐动搜索位置。
常日会在卡片上 显示产品的变体以及定价和所有其他详细信息。客户想要一键购物，以是当用户点击 Variant list 时，我在卡片上进行了转换。它会大略地翻转并展示所有带有价格和报价详细信息的变体，如下所示：
将变体产品添加到购物车
早些时候，我展示了网站上最新优惠的3个部分 —— 网页横幅、特殊匆匆销和分类优惠。在测试中，我创造用户对优惠感到不知所措，看不到闪购。因此，我删除了特殊匆匆销部分，并使优惠清晰可见（不混乱）。
匆匆销横幅
为了更随意马虎访问每个产品（无论用户在哪个页面），所有页面中都供应了一个 粘性产品标题。用户可以直接选择杂货类型或将鼠标悬停在其上以得到子种别和该类别的推举博客文章。
悬停时显示子种别
5. 桌面断点
6. 手机断点我在优化时创造的最详细的问题是为手机设备创建相应式设计，但我做到了。
我将每个种别分为不同的部分，并考试测验给他们精确的位置，同时牢记他们的层次构造。我为导航栏利用了汉堡菜单，并将搜索栏与它对齐。我还为移动断点供应了一个底部导航栏，以便于访问，由于 90% 的目标受众是手机用户。底部导航栏
模型（手机断点）
7. 重新设计前后比拟
8. 我的学习这是我第一次做这么大的项目，理解国外用户须要花费很多韶光。只管团队在进行研究和调查方面帮助了我很多。由于公司条款，我无法在此处罚享数据，但您可以看到终极输出并感想熏染到我的费力事情。
在卡片上显示价格对我来说是一个寻衅。印尼盾 (IDR) 汇率高于美元。
1 美元 = 14444.50 印尼盾
常日，产品的价格以千计，乃至是一个奶瓶的价格。
在线框图中，我在卡片上显示了每个产品的评级，但后来我创造他们只有一个品牌产品。以是，这里没有比较的地方。末了，我决定仅在“产品详细信息”页面上显示客户评分和评论。
客户希望他们的网站有两种措辞 —— 印度尼西亚语和英语。用印度尼西亚语设计它对我来说很范例。以是，如果翻译成印度尼西亚语，我对卡片中的字数限定持谨慎态度。
无论如何，我从这个项目中学到了很多东西，并想用这些知识来办理更范例和更广泛的目标受众问题。
而且……这是一个包装！
差不多便是这样。这是我重新设计网站的全体过程。希望您创造这篇文章非常有帮助和有见地。如果您想与我分享任何内容，请与我联系。我很乐意接管。
原文作者：Om Arya（本文翻译已得到作者的正式授权）
原文：Redesigning Indonesia’s #1 Online Grocery Store — UI/UX Case Study by Om Arya Muzli - Design Inspiration
译者：周佳悦；审核：李泽慧、张聿彤；编辑：孙淑雅；微信公众年夜众号：TCC翻译情报局（ID：TCC-design）；连接知识，理解环球精选设计干货
本文由@TCC翻译情报局 翻译发布于大家都是产品经理，未经容许，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。
