南瓜派
17 min readMar 4, 2018
延伸閱讀:選擇第一份UX工作延伸閱讀:如何成為一位服務設計師

怎麼做UX 與服務設計的作品集?

這是問句,這是問句,這是問句…

這陣子著手把先前的專案整理,但遲遲未做完,除了手上案子剛好卡著以外,作品集本身定位這事一直搞不定,研究了網路上一些資源還有社團資深先進的經驗意見,就順手整理些心得當作紀錄留底。

超長文警告

「公司的showcase」 VS 「個人的case study」

同樣一個專案,以一個單位要對外宣傳的角度所描述的面向與重點,與一個人要展現能力的觀點會有相當大的出入。以公司而言,showcase是展現你可以提供給客戶的服務項目、解決了哪些問題、帶來哪些預期跟外溢效益,一切都要讓潛在客戶明白拿一百元找你可以收到五百元的效果;個人作品集則略有差異,尤其是UX相關,個人的能力特質,在專案內扮演的角色,在專案中帶來什麼樣的影響,怎麼發揮1+1>2的效果,這些在團隊內無形的效益可能會比你很會畫漂亮圖來得更重要(除非是剛畢業的狀況)。

別陷入「堆圖片」的陷阱

一開始在找參考案例時遇到不少麻煩,跟工設或偏向視覺的UI那種很吃視覺呈現的類型不同,UX重點應在前期的分析以及後續策略相關的影響;那服務設計就更不用說了,如果只看圖面結果很可能「就這樣」,但這個「就這樣」可能是在各種條件限制與可行性下的最佳解決方式。

但這樣的案例在一般設計主流的平台少之又少,而UI領域在Behance / Dribble這兩個平台又非常偏向視覺展示,甚至變成某種賣場感,要找視覺風格刺激很棒,但對UX與服務設計的作品而言參考性很低。另外我強項一直以來就不是以視覺見長,要畫出一樣的成果相對要花的時間比較多….也沒那麼多吃視覺的案子或資源就是…(無奈遠目) 。

一般設計公司即使是UX為主,大多也偏向APP產出,鮮少有針對軟硬體與空間人員之類的整體服務的專案視野。

AJA官網的意象、文字、瀏覽經驗應該是台灣目前設計公司的官網中最好的

值得參考的企業案例

大抵而言,設計顧問公司中比較符合我想像中樣貌的有這四間:

  1. AJA,台灣 ,很偏 digital product,問題與解決方向描述很好讀
  2. 唐碩,中國,同上,但文風太油不是很誠懇(可能是我對中國的戒心XD)
  3. IDEO,神級的存在,但只能拿來拜,等級不夠搆不到邊
  4. Artefact Group,第一次接觸,但案例頁十分推薦!

比較這四間公司,可看出前兩者與後兩者在案例描述的形式跟視野有相當大的差異,後兩者的案例比較像在看觀點文章,對議題有一個觀點來帶出案例的感覺,兜售味沒那麼重。

如果比喻,前兩者像是走進Apple Store 乾淨明亮有人來招呼你噓寒問暖,希望你可以買單;後兩者則是走進茶室,一窺正在磨粉、插花、看とこのま上字畫,喃喃自語的千利休。

但共同點是:文字與圖之間的比重將近1:1,甚至文字比例遠超過圖片。

img source

可參考的 UX DESIGNER 作品集

符合我需求的設計師個人作品集,在前面提過的dribble / behance上很難找到,因為在搜尋的時候下意識會去看視覺效果比較優秀的作品(然後打開發現是實驗性、或兜售UI kit),除非本來就聽聞耳聞過特定的設計師,那也要剛好人家有做自己的網站。

運氣不差,找到了這篇羅列幾位國外UX Designer的個人作品集網站;根據資深先進的說法,只推薦看Joshua Taylor & Simon Pan, 這兩位的作品集在敘事能力、重點與節奏上非常值得參考。

這幾位的個人作品集網頁,共通點就是文字比例相當高,不大“炫技”,你看不到什麼驚人的視覺效果(是說EVER NOTE、UBER這類本來就不用一堆物件飛來飛去還做各種漸變啥毀的)。

題外話,台灣許多厲害優秀的設計先進,但大部分檯面上看得到的資訊無論是產品開發、管理、研究,還是以技術、操作面的經驗分享為主,鮮少看到對議題的個人評論或觀點,不曉得是否跟文化差異有關。

業界資深前輩的觀點

這段在成大社團上大學姊KC &大學長Albert 給的意見,經過潤飾整併:

看完上面介紹的十一個設計師作品集,如果要我從裡面推薦UX designer作品集,我只會推薦Joshua Taylor和 Simon Pan,這兩個比較值得參考,因為其他有的是視覺設計師,有的是很會放design process但是final execution差強人意的UI designer。

至於第一個被推薦的Anton Mircea,原來是因為有人寫文章推薦他,難怪我最近連續三個面試者做了同樣的About me頁面,那三張slides幾乎長得一模一樣,我看過比他做的自我介紹還棒的,不過不是每個設計師都放在網路上給大家參考,因為大家都不想被主管或是同事發現在找工作。

consultant的東西隨便看看就好,弄出一些瞎忙的研究方法,只是把客戶的產品用了很多方法做usability and accessibility 分析,但是說真的客戶不見得買單,因為感覺只是data dump,但是設計不見得是客戶推出的最終產品。

有經驗的UX consultant,就直接用客戶現有產品先做user research,用participants的影片直接點出使用者經驗上的痛點,然後闡述帶來的business impact,才能說服客戶這個UX consultant真正了解business problem,然後提出大方向的solution hypothesis,做設計改版,再去驗證假設。

img source

最近面試過一堆類似作品集,現在好像很流行在面試dump一堆研究方法和設計流程,但下面的面試團隊如果都很熟悉研究和設計方法時,這樣的面試只是班門弄斧,反而很容易詢問像原po一樣的疑問。

我看過很多剛畢業或年輕的設計師,做了很多persona,但是其實業界的persona是先根據統計數據歸納出的target user來虛擬的,不是無中生有的;然後也看過storyboard和persona風馬牛不相及,或是最後做usability請來的participants一看就跟persona差很多。

這些都透露出研究不嚴謹,是為了做研究而做研究,因此做出的設計也就是憑直覺做的,這在portfolio上都顯得設計思考的部分很薄弱。

寫的時候,不只是敘述你用了哪個研究方法,或有哪些design deliverables,記得回到本質:
UX Research — 發現以及釐清問題
UX Design — 針對問題提出solution hypothesis
Usability — 測試設計,驗證假設

我以上並沒有詳細提到visual design and prototype,這部分如果底子不夠或是技巧不高,那在作品集裡面就是那樣了也很難補救

另外內容要specific,我最近在mentor 一個在加州的年輕設計師,他的作品集一開始敘述他做了Heuristic Evaluation,發現問題是navigation is not easy to use and layout is not user friendly; 這樣的描述太廣泛,所以要更詳細說明是怎樣有問題。

我來推薦一個我欣賞的格式:
1. Hero image: best screenshot
2. Project background
3. Research
4. Highlights with detailed design
5. Process (照片佐證做了哪些就好)

https://www.artefactgroup.com/work/dialog/

我hire UX designer, 看portfolio主要看六要點
1. Visual design不能太醜 至少要有70分
2. 研究部分有沒有好好summarize, problem A B C 清晰列出
3. 發想部分只丟張sketching collection,扣分。 有舉出至少一個例子是如何發想出幾個方案 又是如何決定最後方案,加分
4. 有作concept testing or usability study,然後有把學習融入最終設計,加分
5. 最終solution feature ABC 跟最初的問題ABC要對得起來 (多得是problem solution對不起來的)
6. Final mock有小秀一下interaction design or motion graphic,加分

在美國,應徵進來的設計師是基本要訓練成可以在任何計劃下單兵作戰的Product designer, 所以end to end都要有基本能力。 我知道在台灣 UX 比較像 researcher + information architect, UI比較像 interaction designer + visual designer,兩邊對UX的定義我覺得很不一樣;我的重點一直都是找能單兵作戰的designer,因為我一直在類似startup的公司,所以也不能算是通論喔

這是我在比較大的企業的分析:

如果是entry level, UX designer會看design process /problem finding/solving skills,視覺絕對加分因為小feature或是小改版交給他可以自己執行。

mid level,視覺不能太醜,因為如果包裝自己作品集都做不到,那對品質的要求也感覺不夠高,除了以上design process /problem finding/solving skill,還會看有沒有達到business requirement or bring business impact,prototype可以加分,但是是要知道為何要做,要從裡面得到啥

senior level,從concept to completion,可以drive vision也可以collaborate across teams to deliver,還有bring business impact和communication都非常重要。舉例來說,具備各種設計能力,但是如果沒辦法deliver message,是很難說服人家你是senior,像是具備storytelling skill,pitch to leadership等等都是希望在senior身上可以看到的。

而Usability是UX researcher的基本功,Motion交給visual designer or motion。 designer。

img source

Researcher 我因為比較多都是和senior合作,所以我覺得好的:

1. 針對複雜問題可以迅速釐清有哪些問題假設需要研究驗證還有哪些不需要浪費大家時間,或是有哪些過去的研究可以幫忙驗證知道哪種方式做研究

2. 以最有效率找到target user
3. 引導受訪者繼續談話的能力
4. 客觀analyze & synthesize reasearch findings
5.有效溝通並能影響 leadership

視覺設計師我覺得厲害的:
Typography,色彩學,排版等等基本功紮實,能做出design system並且瞭解如何和front end developer合作打破限制做出大膽的設計。

溝通能力:market自己的設計並且讓大家都WOW

分享一下我在公司裡建立的personal brand:

What makes I unique: 10+ years of work experience delivering world-class products from concept to completion;

What’s my superpower: Translate research insights into solutions

img source

我會看有哪些問題要identity 或設計需要驗證,視情況自己做quick & dirty,還是請researcher幫我做,也會針對我需要得到的結果去“設計”research;

我舉個例子,有次做team site的產品,我請一桌同事來做幫忙研究:我給他們裡面有框架圖但內容是空白的紙,告訴他們:

“你們剛建立一個內部網站,你會在navigation & homepage放哪些內容?”

然後請他們把紙交給下一個同事,告訴他一個禮拜後你們部門網站有新內容要加進來,然後再給下個同事告訴他一個月後專案結束之類的…來幫助我了解整個team site使用的lifecycle,然後哪些是team member editing哪些是admin setting & editing的角色扮演。

img source

另外有次也是紙上作業,因為不了解經濟學家們如何看圖表,所以我設計各種圖表剪成小圖片,並且請經濟學家們排順序,讓我知道他們decision making order…例如哪幾個數據最重要,決定要不要scroll down或是換下一個任務,然後再來請他們剪剪貼貼看資訊要怎樣做grouping,哪些data要跟哪些放在一起,用螢光筆請他們highligh每一個圖表中最重要的數據,我才知道要怎樣幫助他們迅速scan data的participantory design

說真的,以上都沒有fancy的研究名稱,只有我想要了解這些複雜的process所設計出來的研究。最後,這些研究都成為我storytelling我的最終設計的素材,成功present 給好幾個VP

這篇文章值得閱讀

先了解自己,再佈局架構

資料搜集那麼久,終於開始分析跟制定作品集策略了。過去這幾年我做的案子大都有以下特性:

Scope很大,不一定是指專案費用,而是牽涉議題龐大的服務規劃

Design deliverable 不明確,通常得等中期才會知道方向

因為專案特質所以鮮少有「實務」,大都在proposal部分

過往這些非專注在數位產品,甚至類似制定規格等非典型的專案;這讓我跟一般的UX UI設計師不同,常會習慣從「架構」來想事情,這個架構不限於產品本身的架構,而是從整個企業的狀態、專案的策略等來想接下來我們該怎麼做 (幹,因為專案產出需求沒人清楚… )這經歷怎麼凸顯我的不同就成為非常重要的第一步,也會影響到專案頁該怎麼呈現的策略。

我建立的專案敘事規則大概是這樣:

1. 專案outline/ brief/ tl;dr :一言敝之,背景/挑戰/成果

拜當年寫英文論文養成的習慣,我通常先將架構先建好才開始長肉,第一段就是abstract,你仔細看這段,後面快速掃一掃也不會跑掉太多。很多case study或portfolio不大喜歡放這個,直接堆圖的話風險蠻大的。

2. 我的角色:我的職位與角色是什麼 / 負責哪些具體項目 /專案目標

要讓觀者先知道這個專案要達成什麼,你在這專案裡面角色,負責哪些部分,這塊要寫得很精準非常難,但有sense的一眼就能看出你的好壞。

3. 痛點概述:議題背景 /客戶是誰、為什麼有這專案 / 專案面臨的挑戰 / 企業的痛點 / 市場現況與競品 / 營運與商業模式 / 利益關係人的考量 / 用戶的痛點 / 我們的詮釋

因為專案常常是兩三個team一起做,所以我會收到商業相關的分析,目標企業的經營概況,另外我也會支援研究組的工作(好歹也是IAA畢業鄧老課有乖乖上論文也是做研究的!),所以場域部分的狀況也能大致摸清。這讓我決定把整個議題的概況、商業與研究部分重新揉成一個專案的問題觀點,也能順應帶到我提出的設計去,如果有人認真看才不會前後對不起來。

4. 設計highlight:解法方向的決策 /解法

這部分就沒啥好說,但一定要講重點,尤其我這種不是以視覺取勝的,得呈現出為什麼挑選這個方向,中間怎麼抉擇。

5. 專案流程補充:過程重點

中間專案過程不用放太多,交代一下即可,如果你前面寫得好,過程基本上不需要按照專案時序來交代,後面放一下佐證人家也知道你不是打醬油的。

6. self-review:專案哪邊可以更好 / 學到了什麼 /反思與檢討

這部分是一些專案回顧檢討部分,要抱怨…誒不,要檢討避免下次錯誤的也該放在這,除了顯得自己是個好學生外,也是一種誠實交代。你不是設計公司的案子要「遮醜」而是要找工作。所以讓未來可能的主管同事知道你會誠實面對自己在專案中不足處,比之後你on site面試或on board 發現是個地雷名聲打壞來的好… 哪邊不足哪邊弱點早點交代,誠實為上策。

但self review不是抱怨

或者說,你得抱怨的夠精準

開始動手:平台的選擇

架構出來後,一方面我開始整理專案資料,重新寫文案跟適合的圖片資料外,另一方面就開始找適合的平台;我不大會自己寫網站,最多就是拿套版去CSS跟html裡面蓋一些layout,所以線上網站平台就是我得去面對的。

behance這種就不列入考慮,線上架站服務最後剩下兩個選:weebly / adobe portfolio 。這幾個服務雖然有的是免費提供,但我都是以收費考量為主

Adobe Portfolio 其中一個優點是與behance可以互通,在文字格式與中文字體的表現上比weebly好,甚至收費後的一些功能對我而言比weebly還優惠,例如鎖密碼這項功能,weebly竟然要到付費mid level才能使用,每個月單價足足比adobe貴了三塊多美金……但最後還是選擇weebly,因為

後台幹他娘親的

超 難 用

速度一直是我非常在意的點,但adobe這套你要切換頁面速度非常的不順暢,簡直像cpu使用率100%的狀態還要去開新程式或關閉檔案時的那種停滯感,嘗試做了兩頁就抓狂了。再者他的格式其實非常「簡陋」,可能是為了順應behance之間的銜接,所以圖片展示上沒有slide show這類可以在同一個橫幅就把很多圖處理掉,搞得有夠長…

而weebly 最大問題是圖片壓縮率,有些專案是後台介面,大量文字表格的介面圖上傳後的品質真的無法入眼,問了客服也沒有辦法處理。但在網頁素材庫、網站架構的互動、以及速度上真的比較像收費該有的水準。

至於其他的頁面確切內容、以及細節的處理上,因為都需要拿網頁直接講,但我的網頁基本上目前還是得用密碼鎖起來避免麻煩,就不多著墨了,直接看前面提到的範例比較快。

南瓜派
南瓜派

Written by 南瓜派

設計從業員 /後備自訓/綠共/1450/塔綠班 whatever , come and take it , you MDFK