一款訂餐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，目前我們開放的市場是紐約、舊金山和洛杉磯。

重新設計過的產品以及過程讓我們倍感驕傲。我們深信這會給用戶們帶來更多的價值，讓你能夠全身心地投入到屬于你的美食，坐在你對面的朋友身上，以及餐桌上那美妙的氣氛當中。