重新设计东南亚头部在线超市的真实案例

上次分享了一位叫做 Om Arya 的设计师做的线超市 APP 虚拟项目——Tasy Green。

上图来源：靠这个虚拟项目，他争取到了不错的工作！

文中提到他在分享了这个虚拟项目后，很神奇地收到了一个甲方爸爸的邀请，去做真实项目去了。

而这位甲方爸爸，就是印度尼西亚第一大在线超市 SESA，主要通过网站和 WEB APP 提供服务：

今天来继续分享一下，他设计这个真实项目的过程：

1. 发现：客户访谈、目标人群
   

2. 构思：人物角色、故事版、体验地图、竞品分析

3. 设计：信息导航、线框图、低保真

4. 完成：可用性测试、高保真、响应式、Before&After

I. 发现

客户访谈

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

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

主要问题：

• 低转化率：杂乱的界面使用户很难浏览商品。

• 手机端体验不友好：几乎 90% 的用户是通过手机访问网站，但手机版的设计不够理想。
  

• 手机端糟糕的界面和体验：目前他们使用的是现有的网站模板，根据目标用户的反馈，缺乏优化而且加载速度很慢。

客户需求

• 一键式购物
  

• 轻松的界面和体验

• 无缝的商品搜索
  

• 折扣和优惠更容易被看到
  

• 使用网站时能感觉熟悉而简便

成功指标

• 增加客单价
  

• 增强人们的对品牌的认知感
  

• 增加用户和订单数量
  

• 无缝的体验
  

• 让健康的生活方式更加受欢迎、评价、容易取得，更加有趣而美好
  

• 提供并教育用户健康的生活方式，并转化为愉快美好的生活

目标人群

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

II. 构思

人物角色

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

左右滑动查看更多

故事版

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

目标用户的故事版：

体验地图

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

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

竞品分析

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

左右滑动查看更多

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

左右滑动查看更多

P.S. 评论分析是一种简单有效的竞品分析利器（也可以用来分析自己的产品），具体方法我之前有分享过：别总想着数据分析/用户调研，先把评论分析做了吧！

III. 设计

信息导航

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

线框图

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

低保真

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

IV. 完成

可用性测试

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

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

1. 自动定位：测试之前用户必须手动搜索位置。

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

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

高保真

响应式

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

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

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

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

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

• 确保商品分类的位置，方便用户记忆

• 使用汉堡菜单
  

• 提供模仿原生 APP 的吸底导航

Before&After

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

上下滚动查看更多

---

想要学习或者练习交互，但又缺少机会和动力的朋友，可以了解一下「体验设计学习社」。

无限制作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：

如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：