善用設計原型 化靜態為動態幫助團隊溝通

文/GoodPatch

利用設計原型（prototype）協助產品開發，近幾年在設計圈越來越普遍，各種軟體工具也越來越多樣。Hiiir在開發巷弄、friDay購物和CareMmyPet 這幾支 App 的過程當中，無論是內部溝通或概念測試皆使用Prott來製作設計原型。這次我們針對他們使用Prott的用途，以及使用時感受到特別方便的部分做了一場訪談。

用Prott做電商App，直接拿著手機給總經理確認設計原型

——Prott雖然在日本已經具有相當知名度，但在台灣設計圈內熟知這個工具的公司並不多，方便告訴我們你們當初如何認識到這款工具的嗎？

Kate：Prott兩年前剛上線的時候，剛剛好我們有需要製作一個電商的App，當時的流程主要都是用紙直接畫草圖的wireframe做溝通，整體工作流程偏向Waterfall。但為了加快產品開發的效率，讓使用情境和脈絡更突出，希望可以在流程中加入Prototype來協助團隊的溝通，我便開始尋找四個不同的軟體。並發現了Prott。

——從你們的角度來看，當時看到Prott跟其他產品比較起來有什麼特別的差異嗎？

Kate：我第一眼看到Prott就覺得這是一款很日系風格的產品，跟歐美的工具不同，風格比較貼近亞洲。而實際使用後覺得Prott相對之下呈現出的Prototype除了UI容易上手之外，能更快速將Prototype做出來，呈現品質卻不失真。

Kimi：在Prott之前我並沒有接觸過製作動態Prototype的流程，都是出靜態畫面跟RD溝通。Prott的功能眾多，解決了我們本來溝通上零散地許多問題。

——方便讓我瞭解一下Prott具體來說什麼功能有幫助到你們嗎？

Kate：我們當初要改版「Friday」的時候，通常電商軟體要製作的時間都會比較長，也不可能所有畫面都畫完才給RD確認，在前期就需要給決策者確認了，而我們公司在這個階段就會先將Prototype上呈總經理。

——總經理這麼早期就要直接加入確認了！

Kate：是的，所以這個階段我們就需要出足夠具體的設計原型給總經理過目。我們會使用Prott手機版的App，將原型實際呈現在手機上面直接給他操作，因為跟實際的App其實真的很接近，在我們實際操作一次給他看之後，總經理也立即可以上手。

讓消費者直接用設計原型做測試，化靜態為動態幫助團隊溝通

Kimi：在展示設計原型給團隊時，我們常使用Prott的簡報模式（Presentation mode），這個部分不只在會議報告上方便，讓RD在實際coding之前也能俯瞰整個App的架構，讓各情境的 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就等於畫好流程圖，畫面間的連結若有任何變更，流程線位置會自動更改，直接自動被反應在流程圖上面，真的省下不少工時。

巷弄App支付功能 突破巷子小攤無法用信用卡結帳之困境

——從你們開始使用Prott到現在，是否已經有使用Prott來製作特定的專案了呢？

Kate：我們在製作「巷弄」這款App的「快付結帳功能」時有大量的使用Prott。

——這也是一款電商型的服務嗎？

Kate：這算是一個集結巷弄美食資訊的平台，我們覺得台灣是一個美食豐富多元的國家，可是巷弄裡面的店家其實沒什麼機會被發現，特別是小店家缺少行銷觀念，也可能預算不足，我們希望可以透過「巷弄」這樣的宣傳平台，讓老闆和廚師可以專心在製作餐點上，而專業的行銷由我們來協助。

——聽起來是一款很棒的新型服務耶。你們使用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: http://prottapp.com/tw
Blog: https://blog.prottapp.com/?lang=tw
AppStore: http://appstore.com/prott/
Android App: https://play.google.com/store/apps/details?id=com.prottapp.android

關於Hiiir用Prott所設計的「巷弄」App：
美食 App 故事開發團隊，一家一家走訪店家，取得店家認同理念後，由店家提供每日限量的「半價嚐鮮餐點」。巷弄鼓勵消費者用嚐鮮的心情來體驗的台灣私房餐廳，讓味蕾在巷弄間來場美食小旅行。

粉絲專頁：https://www.facebook.com/alleytaiwan/
iOS：https://itunes.apple.com/tw/app/xiang-nongx-tai-bei-mei-shi/id551945238?l=zh
Android：https://play.google.com/store/apps/details?id=com.hiiir.alley&hl=zh_TW

【本文為Prott廣告企劃】