惠外卖 – 面向商家的外卖系统

惠外卖是什么？

饿了么、美团给外卖商家带来了大量流量，但水涨船高的佣金也让部分商家苦不堪言。
而「惠外卖」则是可以让商家脱离平台独立运营，并自主维护会员关系的外卖系统。

我的职责

我作为产品设计师，与产品经理一起进行商户调研、功能定义，并完成交互与视觉设计。

价值创造的重心

B 端产品，尤其是面向中小商家的 SaaS 型产品有其特殊性：

有明确的业务场景，功能需要完整覆盖业务闭环
成交链路长，商户试错成本高，产品销售成本高
商户为整体服务买单，销售则以预期服务为卖点
每个商家是相对独立且个性化的

因此在产品设计的过程中，我尝试总结并遵循了如下的设计优先级：

对应到实际产品中，我们会：

前往商家实地调研与竞品跟踪，完善产品功能
优先抽象业务流程并保证前后各端内在逻辑的统一，避免只关注「用户视角」
组件化设计与开发，保证产品拓展性与一致性

分享几个设计中的小故事

STORY 1
谁才是真正的用户？

一个意料之外的发现

自从加入公司以来，我们一直将商家视为产品的真实用户。然而在一次走访调研中发现，不少商家并不太会用我们的系统。那么问题来了，他们到底是如何使用系统功能的？

回公司查了数据才真相大白，真正的操作者其实是公司的客户成功团队（CS），而且 CS 与商家的 UV 比例达到了 5:1 左右。产品的用户画像与真实用户有如此大的偏差，我不禁开始探索背后的原因。

背后的原因

餐饮行业的商家文化水平差异较大，部分商家老板真的不会用我们的系统，对于他们来说，更关注的是首页的数据看板。
行业内各家的竞争导致服务提供商除了提供软件服务外，还会附带人工服务帮助商家完成日常配置与维护。因此商家通常会将一些复杂的操作直接交给 CS 代为完成。

对设计的影响

那么，我们是否还要将商家作为产品的目标用户呢？是的，商家永远是我们的最终服务对象，即使商家的活跃度再低，但只要交易已经达成，就证明商家已经认可了我们服务的价值，我们要做的就是更好地为商家呈现他们关注的信息，并尽可能地降低功能使用门槛，帮助商家做好他们的生意。

同时我也开始思考，当前这种靠 CS 人力去维系客户的方式不可复制且难以替代，每扩展一些客户就不得不增加对应的人员成本。那么不妨尝试优化内部产品流程，通过提升 CS 的工作效率来提升公司的运营效率。

对接第三方配送平台的流程优化

当商家想要开通第三方配送服务的时候，我们的 CS 需要帮助商家完成对接。原流程为手动对接，需要频繁登陆多个账号并记录数据进行绑定。在翻看了开放平台的文档后，我发现可以对现有流程进行大幅优化。

流程优化之外，来点惊喜可好？

枯燥的工作需要惊喜，希望 CS 能开开心心地完成对接工作呀～

STORY 2
订单、订单，还是订单

C 端产品通常会从用户流程开始构建产品流程，这样能让用户使用更顺畅；而 B 端产品通常有明确的业务流程，完善的业务流程以及系统逻辑的统一往往意味着更少的歧义、更高的稳定性，以及更多后期调整的余地。

订单系统的设计难点

外卖订单的状态受到多个角色的共同影响，且在不同角色手中有对应不同的操作。

信息重构

为了能够整理出订单的各种情况并关联当时的用户场景，我以订单进度、角色以及可能性三个维度进行排列（图为示例，仅包含部分状态）。

通过对状态的从属关系以及信息展示需求的梳理，我对所有数据进行了分类重构。一旦大家对数据结构达成了共识，各端便能更自如地展示对应信息以适合不同用户。

回归用户视角

商家与顾客的使用目的不同，因此显示的内容并不相同

商家在意的是当前状态下自己需要做什么，比如「待骑手取餐」时，自己应当确保餐品已制作完成或即将制作完成。此外，还需要知道各个节点的具体时间，方便进行管理与追溯。
顾客对订单状态则相对随意，只需要对餐品什么时候送到有一个预估。当商家显示为「待骑手取餐」时，告诉用户的信息则是「骑手取餐中」，同时在具体文案的使用上也比较轻松友好。

商家在 CRM 端与 App 端的关注重点也不相同

CRM 端偏重订单状态及订单进程的查询展示，App 端则偏重对订单的操作。

时隔半年后回顾订单设计，发现了很多值得优化的地方，比如：
- 饭点时间商家很忙，需要优先展示异常订单；
- 可以进一步优化信息层级、收起次要信息，帮助商家更快找到需要操作的订单；
- 考虑到有较多的中年用户，可以适当加大字号与点击区域以提升可用性；
- ……
相比作品呈现，能够发现过去的不足，才是整理复盘更大的意义吧。

STORY 3
组件化设计与开发

从上面订单的故事中可以发现，同一页面包含大量的状态，而这些状态的基本样式几乎是相同的，如果不以组件化的方式去思考，很可能会导致样式上的不一致。

组件化的好处

保证交互与视觉风格的一致性；
减少设计与开发的重复工作，可以将时间花在更有价值的事上；
组件化设计的过程能帮助检验逻辑；
通过设计组件与前端组件的统一，减少设计与开发间的重复沟通并实现高度还原；
方便多人协作与交接；
对于需要快速验证的功能可以借由组件快速上线测试。

STORY 4
等等，还有个图标设计的故事

元素构成

为了帮助商家更容易找到或想起我们的 App，图标以汉字「外」作为基础图形进行延展。通过这种方式可以非常直接地建立图标与产品的映射，实现「想到就能找到，看到就能想起」的效果。类似的应用有淘宝的图标「淘」、支付宝的图标「支」等。此外，通过将「外」字的图形与外卖小车的图形结合，使图标在传递文字本身含义的同时也附加场景的联想。

整体构图采用正方形内接等腰三角形，传递意向：稳定、盈利与增长。

视觉风格

整体视觉风格延续了公司文字商标「再惠」的特点：笔画末端直角收尾、圆角转折，以及关键横笔画的上扬。

再加上一点细节 😉

外卖系统正式上线前夕，我同时也将这个图标的故事发在了公司的公众号上，一方面是作为设计案例分享，另一方面，销售小伙伴们可以转发文章对商家们进行预热。最终文章的阅读量达到千余，不少潜在商家也表明了对惠外卖系统的兴趣，可喜可贺～