# Fully Booked：移动应用和管理面板的 UI/UX 设计

Company: Fully Booked
Service: 附加服务
Period: 2023-04 - 2025-06
Tech: UI/UX Design
Canonical: https://webanion.com/zh/portfolio/fully-booked-ui-ux-design-for-mobile-app-and-admin-panel

Fully Booked 的每一个界面都始于一张草图，在为任何代码付费之前就由创始人批准，每一个界面都在回答运营商或客户的某个问题。运营商首页变成了一份收入菜单，Get Covered 保留了手绘流程的顺序，报价单和取消信来自创始人自己的措辞，管理后台则从五个线框标签页成长为整个网络的控制室。MVP 的界面由 Webanion 的另一位设计师设计；第 2、3、4 阶段由我本人以这些流程为基础在 Figma 中重新设计。

## 完整故事

每个界面首先回答一个业务问题，并且在开发投入任何成本之前就已画在纸上。

### 先画草图，再写代码

<p>Fully Booked 是在创始人的预算内分阶段打造的，因此每一个流程都要先画出草图并达成一致，然后才写下第一行代码。创始人可以在纸上看到完整的功能，提出异议，并在修改还不花钱的时候加以调整。只有到了这一步，界面才进入设计和开发。</p><p>下面这些界面沿着这条路径，从草图一路走到上线的设计，而每一个界面之所以存在，都是因为某位运营商或客户遇到了必须解决的问题。MVP 的界面出自 Webanion 的一位设计师之手；第 2、3、4 阶段的重新设计则由 Webanion 的创始人亲自以这些流程为基础在 Figma 中完成。</p>

### 主屏幕就是一份收入菜单

<p>运营商应用的第一张草图画于 2023 年，主屏幕上只放了收入和一个 Refer a Link 按钮。这一原则延续至今。如今，主屏幕显示运营商已经赚到的收入，以及每一种赚更多钱的方式，每一项都只需轻点一下：客户询价、推荐询价和联盟询价、预订、报价、取消、联系人、Get Covered 和 Earn Commission。</p>

### Get Covered：从流程到界面

<p>Get Covered 最初是一张手绘流程图：描述行程，选择谁能看到它（所有公司、合作伙伴或平台之外的某家公司），然后比较作出回应的公司并接受其中一家。上线的界面完全保留了这个顺序。</p><p>陷入困境的运营商能看到有哪些公司应征、各自报价多少，而接单的运营商无需打一个电话，就能拿到一单业务和一张发票。</p>

### 几秒钟生成一份专业报价

<p>运营商常常把生意输给那些只是回复更快的公司。Send a Quote 流程在设计时加入了捷径：只需填价格的快速报价，或是补充完整行程信息的详细路径。两者都会生成一份带品牌的 PDF，末尾附有一个让客户比较更多报价的链接，即使丢掉的报价也能把客户带回网络。</p>

### 取消订单，却不失去客户

<p>过去，一次车辆故障意味着一通尴尬的电话和一位流失的客户。取消流程以创始人自己写过的取消消息为蓝本绘制，它会询问取消原因，并生成一封得体的信函，引导客户到网络中尽快找到另一家公司。</p><p>客户得到了妥善照顾，取消订单的运营商也仍能从重新预订中赚取佣金。</p>

### 像追踪包裹一样跟进线索

<p>创始人问，运营商能否像追踪包裹那样，看到自己分享出去的线索进展如何。答案是每条推荐上的进度时间线：线索已发送、客户已填写信息、运营商已回复、有公司已预订、你已收到付款。它让一次出于善意的举动，变成运营商看得见回报的事情。</p>

### 从门口开始建立信任

<p>新运营商必须先通过审核才能报价，但又不能让他们陷入无路可走的境地。暂停页面借鉴了银行告知客户账户正在审核的方式：一条包含账户已完善、已批准和已暂停的时间线，一句说明团队正在处理的话，以及致电或留言联系客服的入口。</p><p>创始人在后台放行账户后，应用会自动进入下一步。</p>

### 管理后台：从线框图到控制中心

<p>管理后台最初是五个标签页的线框图：仪表盘、公司、客户、推荐和交易。上线后的后台保留了这副骨架，并随着网络的发展不断扩充，加入了审批、钱包、接单、报价单和内容管理，却始终没有偏离首屏的初衷：今天有哪些事需要创始人处理。</p>
