Digihua 由三家公司組成,是亞太地區領先的智能工廠數位化解決方案供應商,擁有全球超過 1500 家標竿客戶,深耕台灣、立足中國、輻射亞太,專注於智能製造與工業互聯網應用。
目前 Digihua 以智能製造運營管理(MOM, Manufacturing Operations Management)為藍圖,整合了 MES、APS、QMS、IIoT 等產品。但旗下的產品缺乏統一的品牌風格和操作體驗,導致客戶在購買一個或數個產品後,需重新學習每個產品的操作,大幅影響了系統在工廠內的實際運行的效率和體驗。
我們從NPS 調查報告中,發現兩岸用戶在介面和操作體驗上的需求截然不同,對於客戶來說具有負面影響。因此,在積極拓展製造業市場的同時,集團希望統一各產品在不同裝置上的操作體驗。
然而,不同裝置、職能和國家的操作習慣各異,在這個專案中,我們希望將大方向的品牌規劃收斂至產品設計作為起點,儘管如此,同時佈達 10 個產品也是一大範疇,若未經深度調研的情況下貿然改變產品操作界面,可能會阻礙新客戶市場的拓展,並引發現有客戶的負面反應。
專案期間
Nov 2020 - Mar 2023
擔任角色
UX Mentorship
Design Leadership
Strategic Delivery
負責項目
Brand Strategy
Product Blueprint
Delivery and Coaching
團隊目標
整合企業的「品牌識別系統」,保留集團的標誌與識別,為 Digihua 的製造業市場及其數個產品規範。並將可行性設計納入設計系統,旨在提升未來產品開發的效率和擴展性。
角色與產出
我擔任設計 PM ,並與售前、顧問和產品經理密切合作。我負責進行兩岸製造業市場和使用者場景調研,將品牌價值主張定位,及產品 UI 和 UX 的設計方案產出,與設計團隊進行實作和測試,最終將成果覆蓋至公司所有產品。
專案挑戰
兩岸製造業文化不同,品牌需定位於公司願景並具市場策略記憶點。此外,公司系統為多裝置組成的生態系,設計需考慮技術、時間限制,並以設計系統達到提效的工具。
成果與影響
經過為期兩年的深度調研和測試,成功將品牌提升至全新高度。統一了 10 個產品的風格,完成度達 90%,並收穫了大量客戶的正面反饋,而設計系統的建立不僅減少了 75% 的溝通成本,也為客製議題減少了 43% 的時間成本。
01
前置作業
現存問題
我們的目標
建立品牌核心價值,規範產品設計,驅動產品生態鏈
我們由上往下推展,建立「品牌能力即服務能力」,由公司遠景所展開,目標確保整體公司具備同樣意識。而「設計系統」為「品牌識別系統」中的一環,也是本次專案的核心,讓所有開發成員(產品經理、設計、開發、測試...等)所做的事情都圍繞在提升品牌價值上,使不同系統、不同裝置和不同場景下的體驗提升且一致。
假設
此專案由董事長直接指派,期望我們解決目前的內部問題,以及支持未來公司策略的發展,我們嘗試了一年不斷的調研和修正設計,並與公司高層(董事長、業務主管、產品主管)進行數次討論,了解整個專案的目標和效益,讓每位團隊成員都能夠清楚的知道我們要解決的問題,以及對公司發展策略支持。
假設一
建立品牌體系,能使客戶的心理達到穩定、一致和信任的感受,對營銷活動的效用提升。
假設二
依照不同裝置建立設計系統,能夠貼合不同使用者場景,提升車間生態系的操作體驗
專案挑戰
01
品牌定位
Brand positioning
建構設計系統前,需要確保「品牌」的定位,務必在文化、設計、社會、產業及科技等五個維度上得以支撐,滿足公司策略,並且在特殊場景時能夠做微調。
02
收斂設計
Convergent design
在多個裝置和用戶共同使用的情境下,尤其是在不同的製造業場景中,我們需要確保所構建的生態系統既能提升效率,同時符合用戶的操作習慣。
03
時間限制
Time constraint
與 10 個產品部門合作,若採去傳統瀑布流的工作方式,整體專案時間會太久,且驗證的結果往後延。我們需要迭代將最重要、覆蓋作多的設計優先級實施。
我們做了這些事
專案流程概述
在品牌識別專案中,我們首要挑戰是克服文化差異。從多個專案的經驗來看,我們發現兩岸在互聯網使用體驗和視覺偏好上存在明顯差異,這些差異在進入具體行業與場景後變得更加突出。在車間內,文化背景與技術知識的差異進一步增加了挑戰。我們必須在這種多元背景下,快速制定並驗證設計策略的可行性,同時確保品牌價值能夠在不同市場中得到有效傳遞,這是這次專案成功的關鍵。
02
訪談調研
調研概述
鼎華多數產品是由台灣研發,為了拓展市場,公司於2019年往中國與東南亞市場發展,為體現本地化設計,我們需要把文化差異列入研究重點,對當地市場充分瞭解。近一步深入製造行業,多元背景下,需制定不同的服務和功能,以提高產品的核心競爭力。為了實現以上需求,我們需要以全球化設計的思維,找到最快且合適的方式去兼容不同國家的使用者,對產品進行綜合性設伎,以滿足不同聞話群體的需求。
從全球化、本地化到行業化分析
調研結果觀察
分解
Decomposition
跟據實際車間應用情境,我們以「設計系統用途」作為切入點,分解出要素有「色彩」、「裝置」、「操做」和「環境」等。缺漏的部分則是進一步研究各製造行業的規模及使用者行為差異。
比較
Comparison
我們以優先權和區域化做比較,團隊評估操作行為和裝置的影響在B2B行業中尤為重要,直接影響效率和結果;另外,為了加速中國市場的推動,色彩和比例原則將直接影響中國市場高PDI的需求。
連結
Integration
為了同時滿足前線人員呈現給客戶看時取得亮眼成績及車間使用者有效的操作體驗,影響色彩的落點、比例原則和環境等議題,能統一品牌設計,搭配裝置的體驗優化,能提升整個車間的互動體驗,形成貼合的生態系。
省略
Omission
我們評估在有限的資源下,Dark mode 的項目可以往後放緩,儘管許多相關產品以 Dark mode 做為視覺吸引的要素,但 Dark mode 在實際車間使用上,風險大於利益。
03
設計實作
設計策略
以下這些是我在規劃設計系統時的目標和策略:
01
快速反應與決策支持
目標:
在緊急狀況下提升應變速度。
策略:
製造業客戶購買系統軟件的目的,是為了降本提效。我們想要確保使者的反應效率是快速且準確的,而7 ± 2 法則 (Miller’s Law)能夠實現我們記憶,並透過馬斯洛需求層次理論 (Maslow's Hierarchy of Needs)實現我們在緊急狀況於反饋行為。
02
直觀與清晰的反饋設計
目標:
支撐項目一,提升反應速度與操作準確性。
策略:
車間的使用者多達 12 種角色(Persona)以上,工作內容細分清楚,傾向單一性快狠準的解決工作需求,我們想要以希克定律 (Hick's Law)減少判斷數量,縮短決策時間,並以格式塔原則 (Gestalt Principles)確保相關的資訊組織,促使迅速理解反饋。
03
信息漸進呈現與避免過載
目標:
防止信息過載,提升操作效率。
策略:
系統為高複雜性軟件,而上述兩項策略以解決結構問題,我們希望使用者減少不必要的內耗,漸進呈現法則 (Progressive Disclosure)能夠減少系統載入時間和使用者的認知負擔,而費茲定律 (Fitts' Law)能保證在不同裝置上的操作效率提升。
04
多裝置的生態系建立
目標:
提升建立多裝置間的車間生態系。
策略:
客戶傾向在同一品牌軟件上得到一樣的視覺與體驗,我們以克隆家庭 (Clone Family)方式整合各平台之間的風格與互動,並深入不同裝備,根據每個角色的場景,幫助其專注在與個人職務相關的 20% 的核心功能,提升設備的使用體驗。
設計產出
將設計系統收斂成四個平台
專注於公司的最高戰略目標,我們基於克隆家庭式的設計系統建立統一的品牌,統合各部門的產品,並分為Mobile、Pad、Web 和 Winform 四大平台,確保風格的統一性與適應性。最終,我們著眼於深化各裝置的應用,透過直觀的介面和清晰的信息結構,串接不同場景,構建車間的數位生態系統,提升整體工作流程的效率和一致性。
選定系統,實驗、反饋與調整
在實際布達給各產品單位使用設計系統前,我們需要驗證克隆家庭式 (Clone Family)設計系統在四個平台上的可行性和風險。我們依照不同的平台套用於公司1-N 的產品:
設計優化
單一化的 Mobile 與 Pad
在B2B的商業流程中,客戶規模和產品使用者對我們的設計有關鍵影響。經過競品分析、使用者研究與戰略目標的評估,我們發現手機應用主要針對中小企業。這些客戶需求的系統較為簡單,使用者多為高階主管,主要用來查看全局並快速決策,因此,在資訊架構上,我們統一了移動端的裝置,確保每項異常狀況能夠以最短的流程解決。
01
新版的資訊架構(Information architecure, IA) 使整體的 Site map 廣度與深度更淺,使複雜的功能在移動端如工具般簡單使用。
02
車間人員工作細分,使用者依職能不同,可自定義常用模組做為首頁,滿足車間單一化工作流程。
03
移動端將使用者花最多時間的部分,我們透過步驟式引導,保持使用者專注且流暢的體驗。
便捷的 UI 元件
如何降低顧問交付的成本,讓使用者在操作上如同會計師使用計算機一樣簡單,我們要比通用設計準則更注重點擊準確度與視覺清晰度,降低使用過程中的錯誤風險,確保車間內不同年齡層、國籍和3C使用頻率的使用者,輕鬆學會系統並有效解決需求。
01
將複雜的文字敘述(如.產品投料-例外原因)縮短至 4 ± 2 ,比 Miller’s Law 定義的更短,會更考驗整體流程上的邏輯架構。
02
點擊範圍更大的長度與寬度,解決 3C 產品低使用率、戴手套點擊和透過觸控筆點擊的使用者。
03
我們發現當按鈕上下排列容易造成誤觸,因此在新的 Layout 上,我們減少上下擺放的按鈕設計。
PC 設備展現更豐富的內容
在調研過程中,我們與各職能團隊緊密合作,從使用者、操作情境和使用裝置出發,確保能有效解決需求。在中國市場,我們發現,由於其高「權利距離指數」(PDI)和「陽剛性」(MAS)的文化特性,PC 使用者傾向於一次瀏覽更多總體信息,這有助於分解可行方案並制定方向。在非移動場景中,我們在 Web 端與 Winform 端保留基本可讀性,同時盡可能展示更多內容,以滿足這類需求。
01
通常客戶購買系統的目的是需要解決高複雜度問題,而 PC 使用者在車間生態系中扮演著前段計劃和後段分析的角色。
02
使用者透過電腦處理大量的總體資訊,我們需要確保提供大量內容的同時,信息密度、可視信與操控便捷被滿足。
03
為了滿足「快速決策支持」,我們透過排版、間距和大小達到信息層級化,並透過色彩將關鍵資訊和異常狀況的層級拉高。
圖像化的大屏看板
即時的資訊反應對於車間生產過程非常重要,為了即時了解生產狀況,車間環境通常會以作業區為一個單位,安排大型看板展示當前作業區的狀況,也會有更大的螢幕展示,作爲會議上分析戰略使用,這類型的看板我們會以「戰情室」稱呼。
我們發現此類系統,客戶皆會以電腦連接,以 1:1 的方式投影呈現。為了能夠即時監控與反應,我們透過可視化的統計圖幫助客戶快速理解,並將關鍵數據放大字體,達到提升生產效率的目標。
01
通常看板需要具備即時性,反應當車間現場狀況,我們透過圖表、文字和顏色來呈現關鍵指標,提升可視性和易讀性。
02
分析型的客戶,通常會在作業區和會議室使用看板,我們將資料搜集後,選擇合適的統計圖表,幫助使用者更深層的做數據分析。
03
我們發現中國市場的展示型需求較多,我們會以 Dark mode 的方式提升視覺感受,同時也解決低光源環境所帶來的視覺疲勞。
色彩比例原則
82%的B2B決策者偏好選擇有清晰品牌主張的供應商,而色彩是影響品牌記憶的關鍵因素之一,因此在解決高複雜性議題的系統類型產品中,我們運用60-30-10的色彩比例原則,其中60%的留白有助於簡化視覺層次,讓使用者專注在10%的狀態色,30%的品牌色則凸顯品牌主張,進一步強化品牌記憶與區隔,最終達到快速反應人、機、物、料狀態,並同時解決市場覆蓋和品牌推廣的需求。
01
根據鼎華戰略市場和使用者環境,我們訂定了鼎華品牌色-珊瑚藍。
02
系統中的狀態色與強調色對於車間人員的效率有著直接的影響。同時,針對鼎華希望迅速覆蓋市場並成為領導者的目標,我們使用 30% 的品牌色和 10% 的強調色,不僅強化品牌辨識度,也提升用戶操作效率,達到市場推廣與流程效能的雙贏。
滿足高複雜度的色彩盤
Digihua 的客戶當工作複雜度達到成本過高時,會選擇使用系統工具進行優化,意味著,系統工具必須解決高複雜度問題,而其中便有複雜的色彩議題需要解決,如 sAPS 系統需要解決多個訂單,這是許多單一化、工具化的產品無法看到的,因此我們在色彩議題上也測試了許多情境,去驗證系統呈現高複雜度色彩時,環境、裝置和使用者會有什麼樣的影響,我們要如何降低最多的風險。
UI 的複雜度通常與使用者觀看維度有直接關係,在鼎華的系統中,「訂單」、「製程」、「稼動」等具有高複雜度的顏色使用。將這些系統畫面與使用情境結合測試,發現幾個預設色彩在極端環境下會出現判斷錯誤,所以我們將容易誤判的顏色進行調整。
01
色相落於 淺綠(133)、藍綠(168)、淺藍(198) 的三者,受測者反應難以分辨,拉開綠色和藍色之間的差距,強化辨識度。
02
色相落於 紫(258)、粉紫(288) 和 粉紅(318) 的三者,質化測試結果區別性較小,因此我們保留兩個,可以減少使用者認知落差。
03
粉紅(318) 和橘色(18)同為暖色調,飽和度、亮度相似,導致受測者易將兩者混淆。我們再利用 Delta E 檢視兩者對比度,發現兩者對比度相近,因此,我們將粉色與橘色飽和度提高,並將粉色色相下修至 300,使冷暖色差異更鮮明。
04
彩度較低的黃色(48)帶點土色,經常被受測者稱混淆為橘色,我們將提高飽和度,使其更鮮明,易於辨識。為了使整體視覺更平衡,將紫色的飽和度提高,整體更為和諧。
04
落地與布達
在過往的開發經驗中,我們了解到,無論調研和設計有多縝密,仍有很多因素可能影響設計的最終落地。為了確保此次設計如期達成,我們制定了設計系統,並優化現有產品。透過這一系統和優化後的布達流程,我們能夠更快地整合產品,並迅速驗證使用者體驗與市場適配,最終提升車間生態系的效率。
建構系統
在鼎華的開發流程中,設計系統將成為 SA、SD、PR 和設計師這四個關鍵角色之間合作的基礎。作為設計師,我們分析了過去的開發流程,提出假設並持續訪談相關團隊成員,理清彼此的利害關係。我們的目標是通過設計系統來簡化流程,減少重工、溝通和維護成本。透過這個完整的設計系統,我們確保產品能夠貼合市場需求和使用者體驗,同時促進開發團隊之間的共識。
01
元件取用
根據功能、流程會用到哪些 UI 元件?
什麼場景,應該用什麼樣的 UI 元件?
SA
SD
02
元件變化
元件有哪些狀態和互動?
在不同場景下,元件呈現什麼狀態才能協助使用者完成操作?
規範元件有哪些行為可用或不可用,避免 PR 開發出來。
SD
PR
03
細節不一致
不同 PR 對同一個功能,HTML、JS、CSS 皆不同。
元件的交互行為該如何呈現?
命名和編寫邏輯不一致。
PR
Designer
04
場景與框架
不同情境下,UI 元件之間該如何搭配,以滿足需求。
在不同大小的畫面下,元件該如何配置與佈局。
在套件的限制下,元件該如何配置與佈局。
Designer
SA
05
場景確認
了解情境過程較為耗時。
PR 花較多時間在與 SA/SD 溝通討論開發的可行性。
SA
PR
06
取用確認
畫面排版上的元件,排版是依據什麼樣的研究結果?
SD
Designer
透過調研,我們整理出開發流程中,四個角色(使用者)的痛點和需求。我們也從之前的使用者訪談中了解到,各部門的使用者開發流程與習慣不同,且負責的產品面臨不同產業、規模、地區和業務場景,因此每個使用者的需求各異。這也是我們花較多時間在整理需求間的依賴關係,並透過模組化解決方案滿足不同的需求。
將設計系統以原則、組成、規則、範例和程式碼來做支撐,用以了解四個角色的痛點和需求。我們仍以品牌一致性與商業價值作為高優先權,並確保「技術一致」和「跨部門共識」,使設計系統有效得支撐公司戰略並將低成本。
場景化懶人包
鼎華的市場在製造業,細分製造業可以發現生產流程和核心需求的不同。透過設計系統,我們能確保不同專案和設備上保持樣式、元件和互動模式的一致,但這僅能滿足基礎操作和產業通用的功能,對於製造業間的差異化和核心價值,我們仍要不斷的往下調研,才能預見未知需求和風險控制。
為了深化製造業場靜寂應對市場和業務的快速變化。我們透過懶人包的方式,根據新的調研和公司戰略的變更,不斷的更新和教學,在這樣的設計思維下,即使遇到新的產業或場景,也能快速調整、擴展,保持產品的競爭力。
我們歸納出了一部分稱作「懶人包」,並與設計系統做區別,目的是在短時間內快速幫助使用者掌握事件的來龍去脈,這樣的做法是為了將專屬的場景切分出來,或是可以一次調整項目獨立。如果說設計系統是一本字典,懶人包就像食譜,可以直接教會使用者完成一道菜。
布達順序
公司的目標是在半年將內部的 10 項主要產品進行統一。我們知道單一產品下,有移動端、PC端或是其他裝置,對於團隊來說,未統一的產品其維護和交付成本非常高。而對未來的商業策略,我們希望減少客戶的不信任感和學習成本。因此,我們目標是短時間內用最少的成本達到最佳的效果,並且減少技術上的限制。
若以傳統的單一模組或產品的瀑布式開發,則會遇到下面幾個問題:
01
市場變動快速,若逐一完成,勢必會有等待的狀況發生,不但資源不法充分使用,還會導致設計系統成為「僵化框架」。
02
不同產品的技術和交互邏輯不一致,會遇到技術瓶頸或資源不足的問題。
03
各產品部門具有不同的優先級、流程和資源安排的問題,若溝通不一致,則設計無法實現到位。
建立統一的品牌語言並非一蹴可的事,因此,我們團隊透過「影響 - 投入矩陣(Impact Effort Matrix)」作為內部討論的工具,確保在時間內達到最理想的成果。由於短期效果有限,我們將整體設計布達分成兩個階段,第一階段為低投入、高影響,第二階段為高投入、高影響,其目的分別為:
•「低投入、高影響」:短期內提升品牌識別,從視覺層面著手,減少大規模改動的風險和跨部門協作的成本,確保使用者接受度高。
•「高投入、高影響」:長期提升產品競爭力,從體驗層面著手,並以高頻使用的核心功能進行優先調整,確保整合性、操作性提高。
對於一個全新的設計系統來說,布達設計對公司內部來說是一個非常重要的流程,影響著設計落地程度、長期合作是否能夠順利和獲取資源的機會。我們這次分階段分階段導入、迭代和強化內部共識,整體比預期的計畫來的更完整,雖然初期大家對於完整的定義大部分落在「觀點」上,但設計團隊利用這六個月打建立了跨部門間的信任,也對後面更複雜的體驗設計拿到更多的資源。
05
專案成果
一個可以降本提效的設計系統
統計 2024 年,我們降低成本超過 50% , 在導入新的設計後,版本更新的客戶及新購客戶,淨推薦值(Net Promoter Score,NPS)達到 71分。而我們同樣對內部做了問卷, 內部 NPS 為 74 分,這意味著大家對於新的設計及設計系統具有一定的共識,對於 B2B 的商業模式而言,除了提升產品的一致性和彈性,還能夠幫助前線人員提高銷售和服務效率。
內部成功
整體來說,設計團隊在 UI 的工作量下降許多,讓我們有更多機會深入行業和使用者體驗議題。在溝通上,我們幾乎一次性將介面的部分定案,並聚焦在商業策略上。針對客製議題,我們也能夠降低了人力和時間成本。
外部成功
2023 到 2024 年大陸景氣低迷,但我們銷售業績和市場覆蓋度仍保持上升,而客戶反饋在 NPS 的結果趨近 60 分,這意味著設計系統的引入,能夠賦能前線業務,提升市場的靈活性和成交率。通過一致性的品牌設計,我們提升了市場競爭力和客戶的黏著性。

我們的設計系統持續根據商業策略做優化,並相信長時間的專注能夠使公司帶來複利成長
第一版具備品牌化的設計系統完成後,我們利用很短的時間達成 10 個產品的調整,讓這 10 個產品的移動端、PC、工業電腦等裝置仍逐步趨近一致。在開發設計系統的同時,我們發現客製化議題仍無法下降,儘管公司戰略市場已細切,但製造業市場仍存在許多專屬領域的 Knowhow,為了降低開發成本, 我們於 2024 推動高配置平台,也讓現有的設計系統和圖示系統直接串聯在一起,節省了許多開發和重構的成本。
以下展示的畫面是我們已經開發/正在測試的高配置平台,我們希望透過這平台能夠幫助客戶快速開發,掌握更多商機。
01
我們將資料、流程和頁面等項目做區分,使用者能夠在不同模塊下,快速建立系統功能已滿足使用者場景。
02
我們將程式碼的使用降到最低。無論是開發人員或非技術人員,都能快速了解需求,訂定方向,減少隱性的溝通成本。
03
串連設計系統的高配置平台,能夠以圖形介面的方式使用視覺化模組,來組裝和配置應用程式。
反思與學習
在這次專案中,我們為一個由多家公司合併而成的集團執行品牌設計,過程複雜且需多方考量。團隊選擇設計系統作為切入點,不只是羅列UI元件,而是從市場、產品和使用者三個層面出發,分析內外部影響,目標是「貼合使用者場景,並實現降本增效」。
身為設計師在這專案中的挑戰,不僅是專業的設計和使用者研究,更在於解決利害關係人之間的矛盾。系統將影響 10 個產品、300位以上使用者、5種操作裝置和7個製造業場景,在進行跨部門合作時,許多的人焦點建立在利益和觀點上,而設計能否落地往往取決於溝通與策略能力,而非單純的設計技巧。
我們透過OGSM計劃表細化人員、目標、技術、資源和優先順序,並將使用者體驗和產品策略融入日常討論,不斷優化設計系統。這不僅是任務,更是一種信念——打造公司第一個設計品牌。
最後,這次專案讓我深刻理解,設計無法完全符合不同國家的文化,且平衡商業策略與使用者體驗至關重要。策略性思維成為我在有限時間內高效解決問題的關鍵。最終,我們學會如何讓設計如期落地,精準對焦商業目標,並在跨文化設計中找到差異與共通點,解決使用者痛點的同時,也解決商業挑戰。