設計與開發如何協力營造良好的用戶體驗
DITLDESIGN TALK有幸邀請到星展銀行用戶體驗部門，分享設計師與開發工程師的合作經驗與方法，針對跨國多產品的金融公司，合作是產品成功與客戶滿意的關鍵，從實際的合作到建立清楚的設計語言系統，帶給我們很多的啟發。
2019.Jun.06 DITLDESIGN TALK邀請到星展銀行用戶體驗團隊的Iris和Rita，分享他們的設計經驗與對於用戶體驗的看法，其中Iris是DITLDESIGN去年的畢業生，也是我們在新加坡工作的第三位成員，他們分別隸屬Design Team和Design Standard Team，公司編制還有另一個單位是Research Team，星展銀行用戶體驗團隊總共有50位來自10個國家的用戶體驗設計師與設計調研人員，具備十分國際化的視野。
用戶體驗團隊專注於網站與App的用戶體驗，專於五大核心業務的用戶體驗的創新發展與在地優化，包含客戶資料、自助服務、投資與保險、付款、存款與借款，十分高水準的用戶體驗團隊。用戶體驗設計團隊的目標十分有遠見，首先是幫助商業領袖實現他們的視野，二是滿足客戶真正的需求，三是與技術開發團隊一同建立一個具有彈性的長期的服務平台。
其中有趣的成員是UX Writer，用戶體驗文字呈現設計師，這個職位的重點是將公司的用戶體驗標準與感受利用文字來呈現，一般設計師是利用視覺元素與流程來建立良善的用戶體驗，而UX Writer是利用文字的描述來建立，金融相關的專業名詞很多，除了必須在產品之間維持一致的系列詞彙，將艱深的用語轉化為親近大眾的語言更是重要的工作目標。
因應chatbot的廣泛應用，星展甚至有Chatbot UX Writer，建立一致的用戶體驗，而這個角色必須熟悉與整合五大核心業務的問題。因為一般使用者在利用chatbot的時候，不具備銀行業務範圍的知識，如何透過chatbot的對話確認問題、進而提供對應服務就成為Chatbot UX Writer的挑戰。
Iris 分享的是「如何在一個大團隊裡搭建設計與開發之間的橋樑」，從設計與開發團隊的落差開始，透過建立清楚的用戶體驗文件，提供開發清楚的指引，到提升開發的設計知識。並建議開發流程中以解決問題、使產品能用為最優先，推出後再逐步修正成更易用美觀的產品，避免成為像素完美魔人(Pixel Perfect Designer)，過分拘泥於設計細節卻忽略核心解法。
她提到 A designer’s job does not end at when they handover designs to developers. But the job of a designer can be truly counted as completed only after the final product is developed. 設計師的任務是陪伴產品一路走到開發實踐，而不只是概念完成，再次提醒設計新手要想辦法把設計概念持續地向落地與完美的彼岸推進，而自己的設計才會對於公司有真正的貢獻。
在這個過程中，設計師的角色，70%花在轉換對於設計的視覺想像變成美麗的真實，30％花在產出sketch的檔案，定義細節。相對地，工程師的角色更加垂直與細膩，要在現有的資訊系統中完成包含所有細節的程式碼，所以對於頁面的視覺細節及互動方式需要清楚的定義。
所以一個定義清楚的溝通語言可以大量減少時間浪費，例如：App上方的區域在不同系統中可被稱為Toolbar, Header, 或是App Bar；訊息跳出則可能被叫作Popup, Dialog, Alert, 或是 Lightbox。一個定義清楚的設計溝通文件，會統一每個元件的名稱，是減少人員間誤解的重要方式。
其次，Iris提到「增加雙方設計知識的重疊 Boost Knowledge Overlaps」是進一步完美設計與開發合作的方法。設計師應該要增加基礎的程式知識，並且與開發一同檢視程式碼，透過公共的渠道分享設計知識與設計趨勢，都會逐步建立設計與開發的共識，進而弭平設計師與開發的差異，加速溝通的過程。
最後，IRIS再次提到不要做一位像素完美魔人(Pixel Perfect Designer)，這句話從她的嘴裡說出是別具意義的，因為在DITLDESIGN時，她是出名的完美主義者與細節追求狂人，她的設計十分細膩與完整，超越同期許多。
她指出在星展兩位設計師是對應24位開發，所以設計師看到的是全貌、開發看到的是片段，再加上開發必須要在片段中展現工作成果，如果設計師沒有辦法溝通修改的重要性，執著於支微末節，那兩方的衝突就是不可避免的。
如何在設計完美的開發資源中平衡，是一個重要的議題，因此她總結
Making use of everyone’s limitations can be achieved only when both parties understand those limitations.
聽完她的分享後，十分感謝星展提供了一個很棒的環境，讓一位優秀的設計師可以成長，而公司對於設計團隊的支援與設計，蠻值得台灣的金融公司借鏡。以效益為上的大型組織較難有嘗試與容錯之空間，台灣金融的封閉性與地區特性，更使用戶體驗推動的力道面臨重重阻礙，但若金融更加國際化，便會面臨難以望其項背的挑戰。另外，作為用戶體驗設計師，找到好的環境，透過公司的支持與挑戰來成長，是畢業後最重要的事情，設計師前三年的成長是必須靠公司來培養的。
第二位分享的是Rita，她是隸屬於星展銀行的DST (design standard team)團隊，團隊目標是建立公司用戶體驗的設計語言系統(Design Language System)，這對於一家金融公司來說是比較少見的，大多數建立DLS都是大型的互聯網公司，例如Microsoft, Google, Airbnb等公司。
星展銀行的DLS團隊有五位成員，包含團隊管理、互動設計師、視覺設計、用戶體驗文字呈現設計師(UX Writer)、及Chatbot UX Writer，比較酷的是兩位主要的設計師都是台灣人，而兩位文字呈現設計師都是歐洲人。
設計語言系統指的是「針對用戶體驗的整體品質，由一組共通的、整合的視覺元素及互動原則所組成，定義公司整體產品的不同設計面向」。設計系統並不是一個新觀念，可以回溯到早期Java及Apple的Human Interface Guidelines。
目前DLS設計語言系統的定義包含，風格的設定，如顏色、字型、圖像，整體的佈局，如留白(spacing)與方格系統(grid system)，網路與手機應用程式的元件(components)，指導方針，如準則(principles)與模式(patterns)，相關資訊的資源，如Sketch的library，及實際的程式碼，如React和CSS。
星展銀行建立DLS的原因和大部分公司建立DLS的原因是一致的，對於一間跨國公司，一個季度會有超過50個案子，其中涉及不同國家的20多位的設計師及開發，不同的團隊重複建立類似的功能與服務，造成設計與開發資源不足、較短的時程與較糟的產品品質與用戶體驗。
Design Standrad Team想要處理的問題是設計呈現的品質不一致、設計師學習與成長的缺乏、以及對於公司最佳實踐案例了解的缺乏。期望達成整體設計品質的提升、對於最佳實踐的認同、以及在不同的產品線上運用設計語言系統。他們期望的是建立一個更好的過程，幫助整個團隊更好的工作，最後形成一個幫助團隊建立設計語言系統的服務。
首先，Design Standrad Team建立一個屬於星展的設計語言系統，然後轉換成Sketch的library，但是卻發現這樣的固態的模式不足以滿足原先的目標，而DLS團隊疲於奔命的協助教導與解釋這個設計語言系統。因此他們思考全新的做法，期望可以幫助團隊做出有意義的設計決定。
首先是建立最高的數個指導原則，分別印成大海報放在辦公室四處，但空有抽象的原則並不能幫助設計，他們便從這些分支出更多具體的問題，供設計師隨時對照審視，並自行思考如何做決定。更重要的是，全體設計師都可以一同思考建立設計語言系統
其二是建立使用流程的模板，試圖透過視覺化的方式統一不同渠道的核心體驗。其三是基本的介面元件。最四，是頁面模式的規範，除了包含佈局的方式，甚至包含文字的書寫風格與方式。
（由於這套系統還在建立之中，所以不方便公開所有細節，待完成後，我們會再次邀請星展來分享其最終的結果。）
最後一個步驟，也就是我們覺得最成功的一步，就是將學習這套系統的方式，納入設計語言系統建立的過程之中。
Design Standrad Team思考了不少方法，來傳遞與交流這套新的系統，確保它能落實在各地的設計之中。包含每週固定的齊聚評圖時間，讓所有設計師藉由分享與校正產出，期望未來更易達成共識；DLS辦公室的開放時間，供設計師們回報相關DLS執行的問題，並由DLS團隊解答修正；團隊更會開設教學時段，引導設計師們使用更新版本的DLS。透過以上的過程，設計團隊共同討論、建立、學習、迭代星展的設計語言系統，協助各地設計師建立更穩定更高品質的設計解決方案。
總結來說，一個好的設計語言系統，包含虛擬與實體的元件，虛擬的部分包含設計準則、設計師協力的方式、以及設計與發展的工作流程，實體的部分包含程式碼、Sketch的Library、設計模式、及元件的指引。更重要的是，建立一個可以整合迭代設計語言的服務，讓設計語言系統可以在公司內部生根，協助設計與開發團隊一起建立優良的設計品質與客戶體驗。
聽完Rita的分享後，十分感佩星展銀行願意大力支持用戶體驗的提升，或是因為公司的對於客戶重視的眼界，或是因為國際競爭的壓力，看到一間公司努力的建立設計語言，統一對外的設計品質，提升用戶體驗，還是十分感動的。另外，真的期待台灣的金融業可以更積極地提升用戶體驗的品質，讓優秀的用戶體驗設計師可以留在台灣。
最後，設計語言系統似乎是學習現有用戶體驗水準的好方法，藉由理解一家公司如何建構其用戶體驗的標準及設計細部，也許可以更加深入用戶體驗的核心。
致謝：感謝星展銀行用戶體驗團隊，周雨虹RITA與陳虹伶IRIS的演講，帶給我們一流的用戶體驗實踐過程與經驗，也感謝維安的校稿與修改。
參考資料
設計語言系統 Design Language System — UX Planet https://uxplanet.org/design-language-system-d438f4aa30e0
Karri Saarinen, Principle Designer at Airbnb https://www.youtube.com/watch?v=TuLY1cYM57g
Apple Human Interface Guidelines https://developer.apple.com/design/human-interface-guidelines/) )
2013年Brad Forst [Atomic Design] http://bradfrost.com/blog/post/atomic-web-design/
2014 [Google Material Design]https://material.io/design/
2016年 [Airbnb] 設計語言系統 https://karrisaarinen.com/posts/building-airbnb-design-system/
Salesforce 設計語言系統 https://www.lightningdesignsystem.com/
Atlasssian 設計語言系統 https://atlassian.design/
Shopify https://polaris.shopify.com/](https://polaris.shopify.com/
React — A JavaScript library for building user interfaces https://reactjs.org
（DITLDESIGN TALK為DITLDESIGN團隊的內部分享活動，如果您願意分享您寶貴的經驗，歡迎與我們聯絡。如果您想要贊助這樣的活動，也歡迎跟我們聯絡，一起培育下一代的創新人才！）
