優化 3drens 團隊工作流程與設計系統
提升團隊內部工作體驗
UI/UX
B2B
設計驅動


負責項目
內部流程設計、建立設計規範
專案期間
2023 三月 - 2024 三月
3drens 是一家專注於物流軟體解決方案的公司,在我負責司機 APP 設計的期間,正值產品快速迭代、驗證市場的階段,快節奏的開發也導致我們留下許多設計債,讓後續開發的溝通成本增加。因此在這期間我針對幾個問題建立了規範與工作流程,讓後續的迭代可以更順利。
優化 i18n 設計流程,提升交付效率
2023 年公司開始拓展東南亞市場,第一個面臨到的問題是 i18n,當時我們雖然已經有多語言開發的經驗,但原本習慣的開發流程已經不符合現階段大量的需求,導致設計需要花額外的時間與工程師溝通和管理稿件。
以設計的角度,我們的任務就是把產品文案翻譯成英文,再確保它在 figma 稿上不會跑版,所以最一開始我們的做法是將每個需要翻譯的 UI 在 figma 複製一份,再把中文文案翻譯成英文文案,工程師再依據設計稿上的每一個文案去建立 key 值,用 key 值來管理中英文文案的更新,這樣的做法好處是我們的翻譯文案可以兼顧排版,避免跑版的狀況,即便有也可以即時的調整,壞處則是翻譯無法精準、完整考量到在地化;這樣乍看沒什麼大問題,我們也確實用這個方法跑了幾個 Sprint,直到後來問題漸漸產生:
01.
重複的字詞散布在不同設計稿很難維護,以人工的方式需要花很多時間來更新。
02.
協作流程無法確保設計稿文案和開發一致,隨著文案量增加,和工程師溝通的成本也增加。
很明顯的,這個流程不適合我們現在的產品規模,考量到未來還會有更多語言,我開始思考怎麼優化現有的流程。
最先需要被解決的是多語言在設計稿的整理,我們需要找到一個可以統整文案的方法,避免需要花很多時間在更新設計稿的窘境;首先,我參考了許多語言管理平台,希望能自動化替換設計稿語言,但這類的服務通常不便宜,要導入也會大幅的改動到現有的流程,考量到時間和金錢成本現階段先不採用;我也嘗試了一些免費的 figma plugin 但都因為不穩定而作罷,最後想到 figma variables 也能統整文字,只需要建好 text variables 資料庫,將它套用在 text layer 上,就能批次管理設計稿上的文案。

點擊 create variable 選擇 “String”,來建立 text variables 資料庫,批次管理 i18n
考慮和工程師的協作,如何才能減少溝通成本,確保翻譯文案與開發一致;在前面有提到工程師是以 key 值來管理文案,一把 key 代表一個文案,我想到的方法是將工程端的 key 與 figma variables 同步,讓 key 成為溝通的橋樑,可以確保工程和設計一致,當有新文案產生時,工程師可以用 comment 方式標註新建的 key 值。

以實際的 key 值來命名 variables
我將流程與團隊分享並被團隊採用,我之後建立了 figma variables 教學,撰寫協作流程,讓團隊能快速上手。
建立文案規範,維護內容一致性
受到多語言開發的影響,我們開始面臨到翻譯一致性的問題,文案和翻譯是由設計負責,當時為了分擔翻譯的工作量,PO 和 QA 也會協助翻譯並校閱,多人合作雖增加效率,也讓文案出現不一致問題,導致後續還要花額外 sprint 的時間解決。
為了解決問題,我決定建立文案規範並在 APP 上先進行小規模的改動,首先我先從桌面研究開始,了解其他產品針對 content guide 的設定與架構。接著開始盤點APP所有的文案,找出他們不一致的地方,並標示出需要制定規則的範圍。最後,與 QA 和 web 端設計夥伴討論達成共識,撰寫出規則,並我將此規範套用到 APP 的所有文案。

透過 audit 託運單模式文案發現問題,並註記以利後續整理通用規則及優化文案

Content guide 包括文案撰寫規則和產品通用名詞
建立符合品牌的 Icongraphy
在因應多語言功能迭代介面時,我們也發現了許多原有介面上的問題,其中一個就是APP icongraphy 的一致性,原本 APP 因為使用React 的 icon library 所以一直沒有明確的規範,而 React 的 icon library 內包含了風格不同的 icon ,導致APP的一致性受影響,加上物流產業的關係,有一些比較不常見的動作需要 icon,為解決問題,我決定設計全新的APP icon library,建立統一的grid system,並遵照品牌調性繪製所有icon。

建立統一的 grid system 來繪製 icon

延續過去品牌調性繪製所有icon
回顧
過去我可能認為設計師的工作就是做好產品,但這次的工作經驗給了我很多自由度,讓我可以探索產品以外的設計,而這也讓我回歸到設計的本質也就是解決問題,非常感謝公司和主管給予的自由和彈性,讓我可以以更宏觀的角度去思考問題,也讓我重新思考作為設計師如何對團隊做出貢獻,發揮設計影響力。