一款订餐App的重生记
英文原文：Transparency First：How We Designed Cover 2.0
译文创见首发由 TECH2IPO/创见花满楼编译转载请注明出处
创见干货：美国的一家初创公司，它所开发的产品是一款订餐 App，名叫「Cover」。它小巧精美，一经推出很快赢得了市场上的认可。随着平台上入驻的餐厅越来越多，公司决定对它进行重新设计开发，想知道这其中 他们经历了怎样的环节吗？这是 App 开发人员不可不学的经典案例！
在大洋彼岸，一个城市角落中，有一群年轻人捣鼓出来这么一款小巧的订餐 App。它跟咱们国内那些功能复杂多样，时刻都要将整个宇宙吞下的订餐 App 不同，只是针对朋友聚会吃饭时某一个非常细小，却又无法避免的问题：买单。这款 App 方便了食客们在餐厅的买单过程，无须在柜台排队结账，而且同行的好友不用头碰头聚在一起把各自的份子钱凑起来（这样好尴尬的不是么），只需要通过 Cover 的服务，大家都能轻松实现 AA 制，甚至没有安装 Cover App 的好友也能享受到这样一款新颖的服务。
这款 App 面向美国的如下城市开放：纽约、旧金山和洛杉矶。而如今，这帮年轻人开始觉得这个产品应该走向更广阔的市场。于是他们挽起袖子决定大干一场，让它脱胎换骨！
如果是你的话你会怎么做呢？也许会想着重新调整自己的产品开发战略方向？也许你应该听听来自 Cover 公司的 Kim Bost 的经验之谈。
App 重做的原因
事实上，第一个版本的 App 在市场上收到了很好的反馈，所以不是 App 本身有问题，而是目前项目发展进入了一个新的阶段。曾经只是少数的合作方以及用户在使用这款 App，它只存在于公司附近的餐馆，但是如今 Cover 的市场已经覆盖到了纽约城、旧金山、洛杉矶这三座城市，超过 300 家的餐馆签了合作协议，所以我们不得不去思考这款 App 将通过怎样的方式将自身最大的价值提供给我们的客户。
我们是如何解决问题的？
我们认为设计是一个反复打磨的过程，是需要时间的，而非某种摆个人看的雕塑作品。为了让我们的 App 能够重新闪亮登场，我们设定了五个阶段：
1. 透明度先行
设计，为每一个人。- Cap Watkins（著名设计师、Buzzfeed 的设计部门副总）
为了尽可能的在设计中实现透明度，设计的学问见于每一个细枝末节处。我们不会让设计过程只停留在设计师的视野中，我们邀请每一个人参与到设计过 程中。我们的团队集思广益，一起来想解决方案的。这种方式有助于我们相互之间构建起来信任，因大家都参与其中，所以各自都有充分的话语权和行动力，设计过 程中的每个环节我们都非常高效快速的完成。
我们在每个周三和周四召开设计会议，不管我们在哪儿，哪个时间，我们都会联系上彼此，各自通报自己负责的设计进度。对于这样一个包括了产品研发、工程技术、设计以及市场营销的队伍，定期的展开讨论是非常重要的事，我们必须面对面的提出问题，相互交流。
举个例子，我们的 App 的一大功能特色就是方便朋友们在买单的时候实现 AA 制，这个功能说起来简单，做起来难。一个简单的 UX 解决方案到最后就演变成了工程技术上的挑战。举个例子，如果两个人同时在 App 上操作的话，系统怎么处理？又或者是你准备在 App 上跟朋友进行 AA 制，而那个朋友已经在餐厅把单买过了，而他在 App 中还不是你的联系人，这又该怎么办？
在这周三周四必开的会议中，我们一开始就将 UX 设计想法摆在桌面，非常郑重的与工程技术人员进行讨论，告诉他们人机交互的每一处细节都意味着什么。最终我们会达成一些共识。所以，Chris,Jeff ， Kippy 这些技术人员在当时花很多时间来研究设计背后的技术实现时，我们每一个人也都清楚这是一项非常必要的环节。
除了我们团队定期召开会议之外，我们同样还有一个「战情分析室」，并且经常将项目的进度公布于众，让团队中的每一个人都知道我们现在处在什么阶段。
2. 定义问题
我们从项目一开始，就联同产品管理、工程技术、市场营销等人员一起罗列需要解决的问题，和产品需要达到的目标。产品重新进行设计开发，从一开始 团队中的所有人都参与进来。我们从一份简单的 Google Doc 文档开始出发，虽说这个文档很简单，但是它贯穿始终，并且确保每个人的文档都是一样，对于最基本的问题拥有相同的答案。这些基本问题包括：什么是我们最首 先要解决的问题？这个问题下又涵盖了哪些方面？我们目前所做的事是否真的在解决它们？
重新设计的过程中，我们的团队确认了以下这些关键点：
更好地让人们享有一次绝佳的就餐体验。目前我们的平台上已经入驻了好多餐厅（每个星期还不断有新的餐厅加入进来）。所以我们需要开发出来全新的「探索」工具。我们需要让你找到最合适正确的餐厅，不管是跟朋友吃一顿「早中餐」，又或者是计划晚上来一次浪漫的约会，你都能在这个平台上面找到最适合当日计划的餐厅。
提升结账时的产品体验。说实话，你要做到让人们习惯于吃完饭后用手机来付账，并且一切完毕后起身走人，这是 我们产品中最难实现的目的。人们不会这么习惯于全新的就餐经历。有些时候大家只是觉得不会这么轻松就离开餐厅吧？我们需要给予更多的支持，在 App 使用过程中不断给出更加明确的信号，让用户们信任我们的产品。
让 AA 制这个环节变得更加轻松。做好这一点，不仅一举解决了朋友交际时出现的一个问题，对于我们来说更是在市场中胜出的「竞争优势」。这不是哪家 App 都能做到这一点的，就算提供这样的功能但体验也不是很好。我们想要既强调这款功能，又让大家用起来更加得心应手。
保持目前 App 的简洁特性。从一开始，Cover 这款产品的使命愿景就没有定位在「破坏性」，「颠覆性」的字眼上。如果你现在在一家餐厅，想要结账的时候习惯性的掏出手机来，顺畅无比的完成整个支付过 程，这就 OK 了。我们要的就是这么个结果。我们到第二版产品设计的时候也要保持这种简洁纯粹的特性。
3. 发现与借鉴
我们花了好多时间进行研究以下问题：人们在解决相似的问题时，是否具有相同的思维路径和解决方式？有没有一些我们可供借鉴的产品？即便它们不是在订餐领域的？目前我们所拥有的这些客户中，是否有一些行为对我们的产品非常有利，我们需要将其强化？
发现周围有什么可以借鉴的例子，并不是方便我们无脑照抄模仿，我们从这些例子中可以激发灵感，开启讨论，找到产品适合出现的生活场景。我们找出 来了一些产品，它们或多或少跟我们的产品在某个方面是重合的。比如它们都是来自于食品领域、又或者都是基于位置、接受线上支付流程等等。从它们身上，我们 找出了能够直达属于我们自己的解决方案的路径。
从很早的时候，我们的团队就思考下面的问题：比如产品的使命，如何在地图上实现更多的价值，如何重新设计出能够扩张的模式，如何在设计层面丰富视觉观感。
我和我们的高级产品经理 Aaron 开始用铅笔画草图，从空白处努力去形容某些抽象的概念，这有助于我们从新的起点起步，脱离掉我们之前所做的东西的影响。我们将在 Cover 中实现的动作全部列出来，然后将其进行分类整理。当我们开始觉得满意的时候，我们将它们都标上标签，拍上照片，然后周而复始的重复这些事情。
（图注：上图就是我们开会讨论时的一些成果，目前已有的一些消费行为动作是在黄色纸片上，绿色纸片上写的是新功能，标签是写在粉色纸片上。）
这么细致具体的工作并不是直接反应到 UI 界面上的，但是它对于我们如何设计 App 的底层架构有着非常重要的指导意义。我们在订餐过程中，在「现在」和「稍后」这两个动作时间窗口上发现了一个天然存在的区别，也是因为这一点，让我们更好 的设计出 App 的架构。从此处出发，我们开始思考用户在使用 App 的不同阶段，App 的设计细节以及每一个环节的过渡是怎么完成的。
上面是不是说的有点儿太云里雾里了？我给你们举一个简单的例子你们就能明白了。如果你是在新版的 Cover 里，并且身处进驻 Cover 的餐厅中，你可以同样非常简单的使用这款软件，正如第一版的 Cover 给你的感觉一样；但另外一方面，它还能够让你更好的发现会引起你兴趣的餐厅。
4. 验证想法，缩小视野，重复迭代。
我们在还没有进入视觉设计环节的时候，就尽可能的将这款 App 重构的主要思路定下来了。我们通过线框图的用户测试，得到了非常多有宝贵价值的反馈意见，也是正因为我们分清楚了主次顺序，任何设计和工程技术上的变动都 会花更少的时间。我们时刻提醒自己，自己的想法不是什么不可取代的东西，一旦发现哪个环节不如预想中起作用，就立刻做出改变。
总之，我们在三个月的时间里做了几乎 20 轮用户调研测试。大概其中有一半都是在 UserTesting 上完成的（结合 Flinto)，还有一半是在实地餐厅里面，让用户使用测试版的 App（同样是低精度）完成的。这将近 20 轮的用户测试告知我们了人们是否愿意下载这款 App，是否愿意用这款 App 来探索新的餐厅，是否对使用 Cover 买单充满信心。
这些用户测试暴露出来很多的信息。也许现在用户在使用 App 的时候得心应手，视其为理所当然，但是有很多细节是经过我们精心设计过的。就比如那个用来买单的「按钮」上的话就非常有讲究，这句话下意识里决定了人们什 么时候进行买单。如果我们说「请于 Slanted Door 餐厅进行支付」，这言下之意是在给用户们提醒，这是一个吃完饭之后需要出现的行为，因为你是在「支付」嘛。但是如果我们说「请于 Slanted Door 餐厅签到登记」，那么用户会下意识理解为到了这个餐厅所要做的第一件事。
曾经，我们的 App 总是给用户带来困惑，尤其是在吃完饭的时候他们都不知道自己是否搞定了一切，茫然无措的坐在座位上不知道是走还是留。我们察觉了这一点之后，专门搞了一个 「搞定」（Settle Up）的按钮，其实从技术上来说这玩意儿一点儿用都没有，但是正因为这个按钮的存在，一旦用户按下，他能确信自己整个环节流程全部走完，也就可以立刻起 身，转身走人了。
这也正是新款 App 最具有魅力的地方。你在买单的时候不需要跟服务生有任何的接触，只需要在 App 上点两下就可以完成。当然，这种对传统就餐体验的颠覆，会让很多人不能适应，我们的新款 App 就是更好的顺应人们的心理，进而重新塑造了他们的就餐习惯。
我们最初的设计是上面左边这个图，右边这个图我们专门加了「搞定」（Settle Up）的按钮，给用户们一个确认的信息。
5 打磨细节
（图注：按钮上的文字所具有功能超乎你的想象！）
在我们对产品解决方案以及 UX 设计上面最终敲定之际，我们将自己的工作重心转移到了 App 的视觉设计上面，对关键过渡环节进行原型开发，对 Cover 重新进行品牌化设计，从而能够反映出我们新产品的优势和诉求是什么。
当然，视觉设计的过程中也涉及了大量的讨论、概念具象化、不断的迭代升级。我们讨论了各种问题，比如「哪种程度的紫色既能衔接上我们直接的产 品，又能在屏幕上带给人们全新的感觉？」，「怎样设计标题栏能够在 App 使用的过程中正确的体现功能上的层级关系？」，再比如「我们的 UI 设计和标题应该采用哪种字体？」
这其中很多原型开发的工作都是在 Origami 上完成的。
来看看吧！
你可以从我们的网站上下载全新的 iOS App，目前我们开放的市场是纽约、旧金山和洛杉矶。
重新设计过的产品以及过程让我们倍感骄傲。我们深信这会给用户们带来更多的价值，让你能够全身心地投入到属于你的美食，坐在你对面的朋友身上，以及餐桌上那美妙的气氛当中。