時間軸 (Hiiir) 是一間集數位行銷、電子商務與行動 APP 服務的科技公司，除了推出網頁端的服務外，也開發了許多 APP，如 “巷弄”、”friDay 購物” 和 “CareMmyPet” 等。他們在開發這些產品時，皆使用大舌頭之前也有介紹過的 Prott 來製作原型，以確保內部溝通順暢與概念的測試。也因此，Prott 團隊特地針對時間軸使用 Prott 的流程及感受，規劃了一場精彩訪談，而讀者們也能透過訪談內容得知科技公司內部是如何選擇原型工具，以及在設計過程中使用原型能帶來的效益。
訪談內容：
Ｑ：Prott 雖然在日本已經具有相當知名度，但在台灣設計圈內熟知這個工具的公司並不多，方便告訴我們你們當初如何認識到這款工具的嗎？
Kate Wang（雲端生活事業處 – 首席產品設計師，後簡稱 Kate）：Prott 兩年前剛上線的時候，剛剛好我們需要製作一個電商 App，當時流程主要都是用紙畫 wireframe 做溝通，整體工作流程偏向 Waterfall。為了加快產品開發的效率，讓使用情境和脈絡更突出，希望可以在流程中加入 Prototype 來協助團隊的溝通，我便開始尋找四個不同的軟體，並發現了 Prott。
Ｑ：從你們的角度來看，當時看到 Prott 跟其他產品比較起來有什麼特別的差異嗎？
Kate：我第一眼看到 Prott 就覺得這是一款很日系風格的產品，跟歐美的工具不同，風格比較貼近亞洲。而實際使用後覺得 Prott 相對之下呈現出的 Prototype 除了 UI 容易上手之外，能更快速將 Prototype 做出來，呈現品質卻不失真。
Kimi（雲端生活事業處-資深 UI 設計師，後簡稱 Kimi）：Prott 之前我並沒有接觸過製作動態 Prototype 的流程，都是出靜態畫面跟 RD 溝通。Prott 的功能眾多，解決了我們本來溝通上零散地許多問題。
Ｑ：方便讓我瞭解一下 Prott 具體來說什麼功能有幫助到你們嗎？
Kate：我們當初要改版「Friday」的時候，通常電商軟體要製作的時間都會比較長，也不可能所有畫面都畫完才給 RD 確認，在前期就需要給決策者確認了，而我們公司在這個階段就會先將 Prototype 上呈總經理。
Ｑ：總經理這麼早期就要直接加入確認了！
Kate：是的，所以這個階段我們就需要出足夠具體的設計原型給總經理過目。我們會使用 Prott 手機版的 App，將原型實際呈現在手機上面直接給他操作，因為跟實際的 App 其實真的很接近，在我們實際操作一次給他看之後，總經理也立即可以上手。
讓消費者直接用設計原型做測試，化靜態為動態幫助團隊溝通
Kimi：在展示設計原型給團隊時，我們常使用 Prott 的簡報模式（Presentation mode），這個部分不只在會議報告上方便，讓 RD 在實際 coding 前也能俯瞰整個架構，讓各情境的 Flow 更清晰，在會議中找出目前及潛在的問題。
Kate：我們之前在設計「CareMyPet」的時候，還有用 Prott 輔助做過市調！
Ｑ：你們直接開著 Prott 給一般消費者操作嗎？
Kate：現場是由設計師操作給消費者看，為了產品開發前的概念測試，所以我們做了三支 Prototype，想測試看看哪一個是消費者真正需要的功能，再搭配獸醫師專訪確立產品的專業定位，總共跟市調公司配合做了兩場使用者測試。
Ｑ：看來 Prott 對你們來說已經拓展為幫助與客戶端的溝通的工具，也算是使用者測試的新手法了。請問你們的設計流程在導入 Prott 之後有什麼顯著的變化嗎？
Kimi：我們設計師以前都會畫出一連串靜態的 wireframe 給 RD 和 PM，並配合口說解釋。但有些 PM 會看不懂 Wireframe 這種框架靜態圖片的表現，拒絕去想像畫面的連結，所以 Prott 讓圖片可以變成動態呈現的 Prototype，讓我們跟 PM 的溝通更加清楚，在補足他們想像力這部分幫了很大的忙。
Kate：以前為了用靜態頁面跟 RD 做說明，我們都得從 Photoshop 畫畫面製作，再拉到 PowerPoint 簡報上面寫備註。這樣前後加起來至少要花上一天。而現在用 Prott 串畫面可能一個小時就完成，製作時間大幅縮短，在案件早期就可以透過 Prott 來看到具體完成的形象，對我們產品品質提升也相當重要。
實際的手稿
多重手勢實現高擬真度設計原型，全自動畫面流程圖讓製作更迅速
Ｑ：在 Prott 眾多功能當中，你們最喜歡也最常使用的功能是哪些呢？
Kate：在「同一個區塊可以設定多個手勢」以及「自動輸出畫面流程圖」這兩點算是我們決策要導入 Prott 一個蠻重要的原因。
Ｑ：流程圖的部分算是剛上線不久 Beta 版的功能，推出時也有獲得各界蠻大的迴響，倒是「同一個區塊可以設定多個手勢」這點比較少被關注到。
Kate：我們很重視 Prototype 整體的流程和操作的反饋，所以在呈現給主管時，也都很重視高擬真度。手機上的操作不一定都這麼單純一個區塊只有一種手勢連到一個畫面而已，Prott 能夠迅速的設定出單一區塊的多重連結，針對同區塊不同的手勢操作有不同的結果，讓團隊看到的 Prototype 實際操作的體驗更真實，我們得到改善的回饋也自然就更具體。
Ｑ：畫面流程圖的部分你們過去又是如何製作的呢？
Kate：我們以前都是先用文字把架構寫出來，也就是所謂產品規格書，而畫面畫完之後再用 Illustrator 把畫面連起來，之後一樣拉到 PowerPoint 裡面作為簡報的一部份，給其他成員確認。
Ｑ：這樣的流程真的是蠻花時間的。
Kate：現在這個部分有了 Prott 之後幾乎是完全不用做，我們對於出產品規格書的規定也不再那麼嚴格，只要做好 Prototype 就等於畫好流程圖，有任何變更也可以透過內建的連結 Slack 直接反映上去，真的省下不少工時。
Ｑ：從你們開始使用 Prott 到現在，是否已經有使用 Prott 來製作特定的專案了呢？
Kate：我們在製作「巷弄」這款 App 的「快付結帳功能」時有大量的使用 Prott。
Ｑ：這也是一款電商型的服務嗎？
Kate：這算是一個集結巷弄美食資訊的平台，我們覺得台灣是一個美食豐富多元的國家，可是巷弄裡面的店家其實沒什麼機會被發現，特別是小店家缺少行銷觀念，也可能預算不足，我們希望可以透過「巷弄」這樣的宣傳平台，讓老闆和廚師可以專心在製作餐點上，而專業的行銷由我們來協助。
實際在 Prott 上的畫面
Ｑ：聽起來是一款很棒的新型服務耶。你們使用 Prott 製作的功能具體來說是什麼樣的內容呢？
Kate：我們為了協助沒有信用卡刷卡機的店家們突破這個結帳的門檻，在巷弄上我們鼓勵消費者可以在平台買餐券，而我們餐券的份數都會設定限量，讓消費者可以透過平台用信用卡購買餐券，用巷弄快付結帳就能到店家掃描 QR code 直接給店家看畫面，開吃前先省一筆，開吃後也不用擔心現金支付。
Ｑ：這對傳統店家來講真的相當有幫助，很期待這款服務接下來的發展。除了這套服務之外，你們接下來還有打算要使用 Prott 製作其他產品嗎？
Kate：我們公司現在有相當多產品在線上，會有越來越多功能需要更敏捷的優化改版，這階段我們將會將過去設計過的東西轉換到 Prott上面製作。
Ｑ：最後麻煩兩位給 Prott 團隊一些訊息吧！
Kimi：我覺得 Prott 的操作都相當簡潔，對於設計師來說，工具要容易上手的這件事情真的很重要，這樣才能迅速的將東西製作出來。我喜歡 Prott上面每個 Prototype 背景可以配合使用情境做修改的功能，這不只呈現App功能本身，讓使用者感受到情境，他們回饋給我們的體驗也會更加真實。
Kate：對設計界來講 Prott 這樣的產品的確是不可或缺。Prott 的產品定位在架構設計以及團隊合作的部分，也剛好是我們接下來希望可以加強的地方。而 Prott 團隊也時常與我們溝通，接下來要開發新功能的時程都有分享給我們知道，我們感覺得出這些期待都有漸漸被反映在產品本身。Prott 本身就是一個很重視使用者的好服務啊！未來有建議都希望可以持續回饋給你們。
延伸閱讀：
—
關於 Hiiir 所使用的設計原型開發工具「Prott」：
時間軸在設計流程中使用的「Prott」是一款由日本設計公司 Goodpatch 所開發的 Prototyping 工具，從2014年服務上線以來已經躍升為日本標準 Prototyping 工具之外，台灣痞客邦、愛料理皆使用此產品作為開發設計工具。
Website | Blog | AppStore | Android App
關於 Hiiir 用 Prott 所設計的「巷弄」App：
美食 App 故事開發團隊，一家一家走訪店家，取得店家認同理念後，由店家提供每日限量的「半價嚐鮮餐點」。巷弄鼓勵消費者用嚐鮮的心情來體驗的台灣私房餐廳，讓味蕾在巷弄間來場美食小旅行。
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
