prott-prototyping

設計師在日本的 UI 專案設計流程

對於很多台灣設計師來說,日本的設計總是那麼得令人憧憬。然而,日本人是如何進行一個從無到有的設計專案呢?在這裡,我想和大家分享一下我所經歷的兩間日本公司的 專案設計流程 ,讓大家一窺究竟。

自我介紹

首先,我想要先簡單得自我介紹一下,我的中文名字叫做陳思婷,日文名叫夏音(Natsune)。我在 2009 年大學畢業之後就到日本留學,2012 年四月在日本的多摩美術大學情報設計研究所專研媒體設計,2014 年研究所畢業後的第一份工作是在日本的一間 IT 公司 teamLab 擔任 Designer。今年 2016 年一月以 UI Designer 的身份加入 Goodpatch。雖然我的工作經歷還很淺,純粹想和大家分享一下我的淺見,所以還請大家多多指教!

 

為何選擇日本?

為什麼當初我會選擇到日本留學呢?

契機是在我大學二年級升三年級的暑假,我在台北聽了一場深澤直人與原研哉的演講,其中最讓我覺得印象深刻的就是:深澤直人的無意識設計。不為造型酷炫而設計,而是以觀察人的行為,了解人的需求而去設計。因此,我決定到日本學習日本人的細膩思維。

目前為止參與過哪些專案呢?

目前為止,我參與過對應 PC 和 SP 的超長網頁的小專案,也參與過使用 CMS 來管理整個日本食品公司網站的大專案。也參與過 EC 網站、手機 App。甚至是日本電視台的 THE MUSIC DAY 節目的音樂遊戲單元裡的角色動畫。

 

對於設計師而言一個好的 專案設計流程 有多重要?

不知道大家是否重視設計流程以及參與度。我想以自己的經驗來分享專案設計流程以及探討設計流程的參與度對於設計師的影響。

 

一般專案設計流程

process

一般公司的專案設計流程就像這樣,從企劃到最後的交件。黃色的部分是設計師所參與的部分。

 

企劃

通常,一開始的企劃都是由 PM 或是 Director 與客戶開會討論,大部分的設計師都不參與這個階段。

社內 kick off

公司內部的 kick off(專案啟動會議),設計師第一次接觸專案,在這階段通常 PM 或是 Director 都規劃好所有行程,然後也都準備好線框稿了。

設計

接下來就是設計師的工作,然後問題就來了!因為設計師沒有參與前面的企劃,所以對於客戶的實際的課題以及使用者的不了解,只能邊做邊想邊猜測。而且,就算 PM 或是 Director 都畫好了線框稿,但是在日本通常畫線框稿的都不是設計師出身的,光是這一點,要從線框稿聯想到實際的 UI 設計,其實是很需要花時間溝通和理解的,,,然後最令人惱火的就是當 PM 或 Director 跟你說,客戶就是要看起來新的樣子,然後還要你做多種版本的設計,這時候就會了解到,其實他們根本只跟你討論客戶要什麽,而不是討論使用者需要什麼。

feedback & 設計修改

在這階段,大部分設計師都是被關在公司裡不見客戶,所以通常都是 Directior 在中間當傳話筒,就算有不同的想法也無法直接傳達。所以常常發生互相的想法不一致的狀況。就算設計師發現了問題,希望 Director 幫你傳達,然後 Director 又會跟你說,反正客戶都已經這樣決定好了。

開發、測試、修改

通常這個階段設計師就是只負責把圖片裁減給工程師,然後接下來設計師就不被需要了。不過有時候,會在修改階段突然被要求新增資訊或是修改設計,這種情況通常都是客戶上層的幹部之前都沒有參與,直到這個階段才第一次接觸專案,然後提出來的要求。

 

所以說,我先和大家談的是,未參與前端企劃的設計師在整個設計流程中會面臨的問題是?

  1. 無法直接了解客戶的問題
  2. 不曉得終端使用者族群
  3. 在許多未知的情況下… 設計師所被要求的就是 …

「盡量把設計弄酷一點!然後做很多不同的設計版本!」

 

即使專案結束了,不知是否真正的解決了客戶的問題、也不曉得終端使用者的使用狀況。

設計師就會覺得…自己像個「美工」!!

但是 … 設計師不是「美工」!!

 

為了改善這樣的設計環境,Goodpatch 發想出了一套設計流程並且讓設計師全程參與。

 

Goodpatch 的專案設計流程

process

Goodpatch 設計流程分四個階段:

第一個階段 Good Problems,公司會先判斷對於客戶的課題,我們是否能夠提供產品所需的價值。確定接案之後,到了第二階段 Good People,我們會請客戶和負責專案的組員一起開專案啟動會議,分享彼此對於專案的目標、課題的認知以及如何用設計去解決。第三階段 Good Prototypes,除了調查市場以及訪問使用者等之外,為了改善及激發出更好的想法,我們會不斷地重複著製作、測試以及評論。最後一個階段,Good Products 即使產品公開了,還是會持續觀察並改良商品。

 

在這整個設計過程裡,主要想表達的有三大重點:

第一個重點是,“只有偉大的團隊才能製作出偉大的產品”,我們認為產品本身的品質是跟團隊的溝通量成正比的。創造一個可以讓成員彼此溝通意見的時間與氛圍,來激發更多的點子是很重要的。

step01

 

第二個重點是,「Prototypine文化」,公司團隊的默契是,總之先動手做做看!在言語上無法傳達清楚的事情,透過圖像或是動態設計原型,讓團隊能夠一邊討論一邊激發新的想法。

step01

 

第三個重點就是,即使產品公開了,我們還是會持續追蹤使用者狀況以及客戶的課題的改善,追求讓使用著滿意的產品品質。

step03

 


 

接下來我想分享,如何把前面兩個重點,實際在 專案設計流程 裡實現的方法。

 

只有偉大的團隊才能製作出偉大的產品

good

主要是在說 Good People 這個部分裡的,Design kick off 設計專案啟動會議以及 team building 團隊建立。

先談 Design kick off 設計的專案啟動會議。這是剛才有提到的為了分享並確認彼此對於專案的目標、課題的認知以及討論如何用設計去解決。

為什麽要實施 DESIGN KICK OFF?DESIGN KICK OFF 的重要性是什麼?我們認為產品本身品質的好壞是跟團隊的溝通量成正比的。

kick_off

 

當我們覺得要構築出良好的溝通關係的話,我們必須彼此互相了解,包括個人的背景經歷、性格等。所以我們決定實施 Design kick off。

Kick_off_2

 

這是我們實際實施 DESIGN KICK OFF 時的流程。一開始會先大家說明當天會議想到達到的目標,再來是介紹彼此組員,以及請客戶說明專案的背景以及課題,然後再和客戶說明我們公司的專案進行方式,也就是說明整個設計流程。之後我們就會開始進行 workshop,最後就是總結以及確認今後的規劃行程。這整個流程需要花 2 個小時來進行。

Kick_off_3

 

 

DESIGN KICK OFF 之後,接下來和大家分享我們如何建立團隊 – 我們很重視溝通,所以不論是公司內部溝通或是與客戶溝通。

我們採用 slack 這個團隊溝通工具,不僅可以即時跟客戶討論,也減少了以往用 e-mail 溝通時不必要的客套對話。

slack

除了使用溝通工具之外,我們也會不定時的請其他社員一起評論現況的專案內容。

meetup

 

甚至我們把團隊的力量擴大到整個公司。每個禮拜一早上我們會有專案分享的時間,讓全公司的人了解彼此專案的近況,互相評論並給予建議。我們也會直接在客戶那裡進行雙向溝通討論。而不是只是單方面的提案。

meetupII

 

我們會做這些都是為了縮短物理上、時間上以及心理上的溝通距離。這些都是因為我們認為產品本身品質的好壞是跟團隊的溝通量成正比的。

distance

 

Prototyping 文化

接著是第二個重點 – 我們公司的 Prototyping 文化。主要是在 Good Prototypes 這個部分。

Prototyping 文化

 

我們認為,要做出好的產品需要有建設性的議論,並且要創造出一個容易激發創意發想的氛圍。所以必須要不斷重複迅速的製作、測試以及來自團隊的迅速的反饋回應,才能讓創意想法更具體化並激發出更多更好的想法。所以我們會用 Paper Prototyping 以及使用我們公司的軟體 Prott 來做 Prototyping 等。

Prototyping 文化_2

 

我們認為,團隊會在 Prototyping 的過程中成長,專案的方向與目標會更加明確。

主要是因為,我們很重視團隊的溝通,但是其實我們都曉得,能用語言說明的部分只是冰山一角而已。所以透過 Prototype,把那些沒有被語言化的「腦中的想法」以具體化的方式呈現並分享設計的脈絡。

具體化

 

關於 Prototyping 工具,我們公司設計師所使用的軟體是 Sketch 和 Prott

tool

 

實際 專案設計流程 的應用分享

接下來,我想跟大家分享實際在兩天之內,做出來的一個員工資料庫網站的 Prototype。這個是我們公司開發合宿時的照片。

專案設計流程 - 01

 

製作員工資料庫網站的 Prototype 的團隊成員就只有兩位設計師。

專案設計流程 - 02

 

第一天,我們針對員工資料庫網站進行 kick off

專案設計流程 - 03

 

Kick off 結束後,把想法分享給請其他組別的同事請他們給予建議,並檢討。

專案設計流程 - 04

 

確定好專案的方向與目標後,便開始著手畫 wireframe 線框稿。

專案設計流程 - 05

 

第二天,直接上 sketch 設計畫面。

專案設計流程 - 06

 

設計好畫面之後,接著就是用 Prott 做出 Prototype。因為 Prott 有sketch 的 plugin,所以可以迅速地把畫面自動同期到 Prott 裡面!

專案設計流程 - 07

 

最後就是利用簡報模式來和大家發表我們的 Prototype 。因為我們主張,不用紙張來進行發表而是以可以互動的設計原型來發表。

專案設計流程 - 08

 

也就像這樣,我們希望可以透過接近實際的使用狀態的 Prototype 來發表專案。

專案設計流程 - 09

 

然後我們也把專案的網址透過 Slack 分享給沒有參與合宿的同事們,而大家的回應都是希望可以把網站實際做出來。

application10

 

除了透過 Slack 獲得回應之外,也能透過 Prott 的留言功能,了解針對設計細部的建議。

application11

 

所以其實像我們這種不會寫程式的設計師,使用 Prott 做 Prototyping,兩天之內就可以具體表現出對於一個新專案的想法。Prototype 不僅可以防止想法有出入、分享互相的認知、避免議論半途而廢,可以引導到適切的議論方向,還能因此產生新的創意與想法。

所以我們認為,「1000 次會議比不上一個 Prototype !」

application12

 

 

結論:設計師必須重視設計流程以及 100% 的參與

一個只參與 專案設計流程 不到 30% 的設計師,就會只像個「美工」一樣。畢竟「只有偉大的團隊才能製作出偉大的產品!」更何況我們認為「產品本身品質的好壞是跟團隊的溝通量成正比!」所以說,全程參與整個專案設計流程對於設計師來說是必須的!除此之外,為了讓創意想法更具體化並激發出更多更好的想法,製作 Prototype 是必要的。Prototype 不僅能縮短會議時間,更能防止認知上的不同!

總而言之,為了提升設計師整體的價值,讓我們一起重視設計流程,改善設計環境!

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: