I. 发现

客户访谈

由于这位甲方的合作态度良好，所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题：

主要问题：

• 低转化率：杂乱的界面使用户很难浏览商品。
• 手机端体验不友好：几乎 90% 的用户是通过手机访问网站，但手机版的设计不够理想。
• 手机端糟糕的界面和体验：目前他们使用的是现有的网站模板，根据目标用户的反馈，缺乏优化而且加载速度很慢。

客户需求

• 一键式购物
• 轻松的界面和体验
• 无缝的商品搜索
• 折扣和优惠更容易被看到
• 使用网站时能感觉熟悉而简便

成功指标

• 增加客单价
• 增强人们的对品牌的认知感
• 增加用户和订单数量
• 无缝的体验
• 让健康的生活方式更加受欢迎、评价、容易取得，更加有趣而美好
• 提供并教育用户健康的生活方式，并转化为愉快美好的生活

目标人群

根据产品团队提供的数据，整理出了目标人群的特征：

II. 构思

人物角色

根据以上信息，整理出了两个完全不同的人物角色：

故事版

没有区分人物角色的故事版：

目标用户的故事版：

体验地图

思考分析用户旅程的五个阶段（探索网站、比较商品、确认下单、完成购买和接收配送）和用户感知的三个方面（行为、思考和感知），制作了体验地图：

将当中的关键信息挑选出来：

竞品分析

设计师找到了三家主要竞品，先大概了解他们的特色和优势：

然后从 Google Play 的评论中寻找竞品的问题，这样就可以思考如何战胜他们：

III. 设计

信息导航

先把大致的用户流程确定下来，这样对整个产品就有了一个整体构思：

线框图

然后用手画出线框图，定下页面的整体布局：

低保真

将线框图手稿用绘图软件细化，制作成低保真方案，用来向客户展示和做用户测试：

IV. 完成

可用性测试

找用户做测试时，用的是低保真可交互原型。

根据测试发现的问题，设计师直接将优化方案运用到了高保真方案上，所以下面整理的问题都用高保真方案来配图展示：

• 1. 自动定位：测试之前用户必须手动搜索位置。
• 2. 属性选择：由于客户想要一键式购物，所以当用户点击熟悉（通常是重量）右侧的箭头时，可以反转卡片进行详细选择。

• 3. 促销展示：原本设计了三个促销区，但是测试中发现用户面对大量的信息无法充分理解，所以移除了一部分，只保留了头图和分类优惠。

• 4. 商品导航：为了避免用户迷路，将商品分类导航放在了所有页面顶部，并且悬停时展示子分类和相关文章。

高保真

响应式

这个网站需要具备很高的响应式能力，不论在 PC 端还是手机端，都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了，所以不得不使用断点（Breakpoint）来判断用户当前处在哪个端，并展示相应的界面。

这个断点的概念在栅格系统很常用到，指的是当界面尺寸缩小或增大到某个（或几个）零界点时，间距大小或其它界面元素发生突变。

上图来源：三种最主流的响应式栅格

这个方案的对于移动端的特殊处理包括：

• 确保商品分类的位置，方便用户记忆
• 使用汉堡菜单
• 提供模仿原生 APP 的吸底导航

Before&After

最后对比一下优化前后的方案：

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》重新设计东南亚头部在线超市的真实案例

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务