專業人士的設計流程
01

專案啟動與設置

前言

你的工作從拿起紙和筆之前就已經開始了。從準備與客戶第一次的會議就已經啟動設計流程。在第一次的接觸顯示準備充份且專業,就能開始建立關係。你的專業將會獲得很大的回報:你的決策將賭上客戶對你的信任。

您將在此章節中學習到:

  • 與客戶第一次的會面該問什麼問題
  • 溝通技巧:如何與客戶對話
  • 如何設定 Google 雲端硬碟、InVision 文件資料夾
  • 客戶最常問的問題

相關成員

  • 客戶
  • 設計師
  • 業務開發代表 (BD)
  • 專案經理 (PM)
  • 開發人員

Kick-off 會議檢查清單

在首次與客戶見面之前:

與專案經理開會,蒐集所有專案的訊息。讓專案經理、業務開發和開發團隊知道:不要把相同的問題問客戶兩遍。你要知道的事情:

  • 客戶已有正在使用的產品嗎?
    • 如果有,可以考慮先做 UX 評估
  • 產品有清楚的範疇 (scope) 嗎?
    • 是/否 (在此階段,產品應該已經界定範疇。沒有的話,就要進行一次範疇界定流程。)
  • 專案的構想是否已經足以進行設計?
  • 設計給哪個平台?
  • 如果是網頁設計,要做響應式 (responsive) 嗎?
  • 工程開發階段是由我們的團隊進行嗎?

首次會面 - 向客戶解釋流程:

  • 讓客戶知道
  • 在專案的早期階段,避免多平台設計。 如果客戶要求多平台設計,需找另外一位設計師來幫忙。如果你認為範疇夠大,一定要建議組成設計團隊。請看細節:為什麼團隊採用的方法對於產品設計成功與否很關鍵? (英)
  • 強調不可能精準地預測使用者行為。 我們依據研究和現有資料,解決方案的準確程度只有經過相關測試才能達成。
  • 我們無法保證生意上的成功。 請試著清楚說明:就算是最好的產品設計,也無法從利潤的角度保證產品成功。
  • 列出簡要的產品設計階段

首次會面 - 從客戶獲取訊息:

一般訊息

  • 最後期限是什麼時候?(設計/推出日期)
  • 你自己認為此功能的成功因素?
  • 你認為我們一起合作能夠成功的因素?
  • 你曾經蒐集過任何使用者反映的意見嗎?
  • 可以讓我們看分析工具嗎?
  • 已經有類似的產品或替代方案解決這個問題了嗎?你的潛在客戶目前如何替代你未來推出的產品?

針對 UX 評估的問題:

  • 在電話裡,試著建立評估的範圍
    • 越小越好。還可以更集中的話,就太棒了。
    • 嘗試瞭解客戶對於評估的需求與期望。
    • 嘗試找出對客戶來說很關鍵的使用者旅程。
    • 在完美的情況下,範圍會縮小到只有一個。
  • 電話談過後,與團隊內部討論客戶需求,詢問各種可能遇到的阻礙。

視覺:

  • 你們有品牌策略、品牌書或品牌規範嗎?
    • 如果沒有的話,在稍後的階段簡述一下它們的重要性。
  • 如果客戶想要在 UI 使用商業字型,要確認他們擁有網站/手機版的授權。
  • 如果你認為 UI 需另外使用的付費字型,要確定客戶可以接受要購買授權。
  • 客戶已經有任何符號或視覺風格的想法了嗎?
  • 客戶有先前設計的原始檔案嗎?

請確定每個回答都確實記錄起來了,而且現在和未來的團隊其他成員都可以看到。

溝通技巧

一般規則

  • 要積極地建議解決方案,不要消極
  • 聆聽客戶的期望,不要害怕問問題
  • 從第一天開始就向開發人員諮詢你的解決方案
  • 確認有向客戶說明過溝通工具的使用方法。例如:InVision 的留言功能,解釋 tour-points 和留言的不同。

意見回饋

  • 客戶有足夠的時間給你意見回饋嗎?如果沒有,要試著要求有空的相關成員積極參與溝通。
  • 讓客戶能夠理解積極與合作方法的價值 (回饋與溝通)。
  • 確認在客戶的部分只有一個最終回饋點。
  • 確認你有機會向所有相關成員展示解決方案。
  • 確認客戶知道我們不是根據幾篇固定數量的評論做事,而是常態的回饋與反覆修改 (feedback-and-iteration) 模式。

過往經驗:

  • 客戶之前有跟設計師合作過嗎?
    • 如果沒有,試著在會面的過程中,培養客戶對於設計的最佳實做方法和基本原則。
    • 如果有,客戶跟設計師合作的經驗是怎麼樣?
  • 客戶理解設計師的角色嗎?

里程碑與優先順序

  • 確認客戶有合理的最小可行性產品 (MVP) 製作方式 (讓範圍保持夠小)。
  • 確認客戶知道在功能方面要一步一步來的重要性。

為什麼宣傳作品的成果很重要?

  • 如果有好好宣傳作品,就可以讓客戶信任你的決策。
  • 覺得猶豫或不知道設計決策背後的「為什麼」,就會把客戶嚇跑。

跟客戶溝通時的必備項目

  • 知道作品的好處與成果。
  • 獲取客戶的信任:他們會重視你的意見
  • 客戶的未來通常交付在你、你的決策和作品手上。所有你做的事情都是要說服客戶,他們的事業有妥善營運。
  • 不要輕易問在 Google 就能找到的問題。
  • 每個決策都要符合客戶的事業目標:絕對必備,而且無條件的。
  • 可以利用此架構:「你們之前做過的事」+「當初是怎麼想到你們之前做過的事」+「為什麼而做/這要如何對客戶的事業有幫助」
  • 沒有或許,才有自信。要很確定你的立場。
  • 說出設計的「為什麼」,還有你的作品會如何幫助客戶增加成功的機率。
  • 不要說客戶可以自己看到的東西。要這樣說:「這個元素放在這邊是因為可以幫助 X 跟著 Z 達到 Y。」
  • 利用資料。任何推測都要依據最佳做法、行為研究和統計。
  • 比起用一海票的普通論點淹沒客戶,說出少數幾個優秀的會更好。
  • 調整你的用語,不要使用專業術語。

蒐集回饋

在 Netguru,我們使用 InVision 做為每次進行反覆修正獲得的意見回饋,和把所有留言都放在同一處的主要工具。看它的運作原理。我們也有從團隊內其他設計師獲取精準回饋的詳盡流程。

來自隊友

請記得,如果你的設計遭遇任何困難,一定都可以向其他設計師徵求回饋。還有很重要的是:分享給客戶之前,先在團隊內部分享。這個做法可以改進設計、找出錯誤或邏輯問題,當然也可以收到對你的讚美,獲得按讚。

  • 就只要敲你的隊友 (用傳訊 app 或直接跟他們說),分享設計的連結,要求給予協助、意見或留言。
  • 請求另一位設計師幫忙檢查。
  • 如果不確定是否還可以花更多時間準備詳盡的設計,就問 PM 是否有足夠的資源/時間/金錢來開發這些功能。

來自客戶

從客戶獲取的回饋是成功專案的關鍵

  • 請求你想要獲得的回饋。
  • 專案裡加入設計,並且分享連結給客戶。最好的做法是:隨時把設計的連結放在專案管理工具裡,例如 Jira。
  • 詢問客戶是否能理解工具的使用方式,要不然就引導他走過一遍在設計上加入評論的流程。
  • 回覆評論,然後把它們標記為已完成。
  • 客戶或你有什麼不清楚的地方時,試著解釋到兩邊都清楚瞭解為止。
  • 準備好能夠點按的設計 (畫面之間設定連結),可以增進客戶感受到的體驗。
  • 跟客戶保持聯繫,把設計的最新版連結傳給客戶,給予進度更新。最好也要詢問客戶這些設計帶來的感覺和情緒。
  • 你就是為了要展示設計而跟客戶接觸。有時候,得要兜售願景,或是設計背後的全局。

設計文件 - 組織架構

在此部分會介紹預設情況下,我們所建立的組織文件與資料夾。當然,此文件架構僅是一個範例,你可以運用最適合的方式建立。

1. 準備

當我們進行新專案,我們會在客戶的主要文件中建立給設計師的資料夾

Designer folder

2. 設計師資料夾的架構

Designer folder structure

A. 原始檔案

Sources folders

每個資料夾 (視覺和線稿) 會包含所有原始檔案 (source、.psd、.sketch 等)。視專案而定,但假如有兩種檔案,我們就會為 .psd、.sketch 或任何其他附檔名文件建立子資料夾。

Source files subfolders

所有原始檔案都會以 .jpg 或 .png 格式的檔案預覽。

B. 字型

這個資料夾中,我們將專案中用過的所有字型放在這裡,即使是免費字型也一樣。他們以字型名稱為群組,範例如下:

Fonts folder

C. 資源與輸出檔案

這個資料夾包含兩個子資料夾:

Assets and Exports subfolders

資源和輸出檔案是提供給前端工程師使用的。

  • 資源 (assets)

資源包含所有我們無法放在輸出資料夾 (Exports) 所額外補充的資源,舉例來說:SVG 和圖示等。

  • 輸出檔案 (Exports)

在輸出資料夾中,將所有 Sketch 和 Photoshop 的匯出檔放在這裡。

D. 圖檔和圖示

如果我們有一些額外的圖檔 (Shutterstock 等等圖資源) 或圖示集,我們會上傳到這裡。

E. 文件記錄

非常重要!在專案的最後,我們可以為所有畫面建立連結網址,利用 InVision app 將每個連結將連到指定的畫面,打破不同平台、斷點的藩籬去溝通。

在這個資料夾中,我們會上傳跟所有跟實際專案有關的文件。這些文件可以是人物誌 (persona) 和 使用者旅程 (user stories) 等。

我們也會建立初次會面 (Initial interview) 的子資料夾,內含初次會面期間的重要資料、客戶提供的資料,還有可能會在專案裡用到,設計階段相關的範疇界定流程筆記。

Initial interview folder

客戶可能會提的問題

Q
為什麼你想要知道商業模式 (business model)?
A
這可以幫助我們專注在更重要的工作與優先執行的項目。
Q
為什麼在會議前就要先知道這些事情?
A
讓我們在會議前準備得更充足,進行的時候能夠更集中。
Q
我們沒有商業分析/市場調查/基本目標客群。可以幫忙做嗎?
A
我們可以支援一部分的工作。

在本階段問問自己:

  • 有問過所有必要的問題了嗎?
  • 已經得到所有必要的答案了嗎?
  • 與客戶的第一次會議中,已搜集專案所需的必要資源了嗎?
  • 專案流程已經跟客戶對過了嗎?
  • 專案架構已經建立了嗎?
  • 合乎所有螢幕裝置的 InVision 原型 (prototype) 已經建立好了嗎?

本階段的理想成果

  • 專案的資訊已經蒐集完成。
    • 了解我們得解決的專案需求與問題。
    • 知道如何使這個專案執行成功。
    • 都瞭解客戶的商業模式。
    • 都知道客戶是否清楚他們的商業模式。
    • 之前的設計及商業相關的問題已經蒐集到。
  • 已建立好架構的資料夾
  • 已經搜集好客戶提供的可使用資源 (包含品牌規範…等)。

延伸閱讀

本章節譯者

ymcheung李盈熲 Mika、劉亮吟